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

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

• 我还没有找到我喜欢的工具提示插件。我只是自己构建一个。老实说，我愿意提供帮助。
• 我建议您使用 html img 属性，并将评级作为十进制值或带有 % 符号的百分比。两者都清楚地表明了百分比。另外，请务必包含width 和height 属性。
• 我最不喜欢的插件是qTip。

---

<!-- 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

只要在图片标签上使用 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/