让工具提示出现在图像周围的最佳方法?
我一直在研究一些 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>
I've been looking at some jQuery plugins to show a tooltip around an image when it's hovered on. But I haven't been able to find one, what I was looking for was a tooltip to load and with the description, text, and rating while using the same image inside the tooltip.
So I was thinking about making my own, and wanted to know what you guys think of the best way of doing this?
The General idea is top have a row of images and when a user hovers one, a rounded retangle appears with the same image inside and it populate the information to the left of the image. And they have to leave the tooltip for it fade away, not the thumbnail.
And do you guys know of any jQuery tooltip plugins that do this? No need to reinvent the wheel.
<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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
img
属性并将评级设置为十进制值或带有 % 符号的百分比。两者都清楚地表明了百分比。另外,请务必包含宽度
和高度
属性。img
attributes and put the rating as a decimal value or a percent with the % sign. Both clearly indicate percentages. Also, be sure to includewidth
andheight
attributes.只需使用图像标签上的 ALT 和 TITLE 属性,如果您想要更多 jquery 有插件等酷工具提示..
http://flowplayer.org/tools/tooltip/index.html
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
Just use the ALT and TITLE properties on the image tag, if you want more jquery has plugins and such for cool tooltips..
http://flowplayer.org/tools/tooltip/index.html
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/