让工具提示出现在图像周围的最好方法？

Question

我一直在寻找一些jQuery插件，当图片悬停在上面时，它会在图片周围显示工具提示。但我一直没能找到一个，我正在寻找的是一个工具提示加载，并与描述，文本和评级，同时使用相同的图像在工具提示。

所以我想做我自己的，想知道你们觉得最好的方法是什么？

一般的想法是顶部有一排图像，当用户悬停一排图像时，会出现一个圆角矩形，里面有相同的图像，并将信息填充到图像的左侧。他们必须留下工具提示，因为它会逐渐消失，而不是缩略图。

你们知道有什么jQuery工具提示插件可以做到这一点吗？不需要重新发明轮子。

<div class="item">
    <div class="thumbail">
        <img src="" alt="" />
    </div>

    <div class="hiddentooltipinfo">
        <div class="tooltipinfo">
            <div class="info">
                <h3>Title</h3>
                <p>Text</p>
            </div>

            <div class="rating">
                <p>85%</p>
            </div>
        </div>
    </div>
</div>

Answer 1

• I还没有找到我喜欢的工具提示插件。我会自己建一个。老实说，我很乐意提供帮助。我建议您使用html
• attributes，并将评级设置为十进制值或带有%符号的百分比。两者都清楚地显示了百分比。此外，请确保包含我最不喜欢的width .

的和插件

<!-- You could use this as your markup: -->
<div class="item">
    <div class="thumbail">
        <img src='' width='' height='' title='' alt='' data-rating='' />
    </div>
</div>

<!-- Depending on why you have the extra markup, you could potentially
     Just use the following: -->
<img src='' width='' height='' title='' alt='' data-rating='' />

Answer 2

只需在image标签上使用ALT和TITLE属性，如果您想要更多jquery有插件之类的很酷的工具提示。

<img src="#" alt="Submit" title="submit">

http://flowplayer.org/tools/tooltip/index.html

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/