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

发布于 2024-11-28 02:15:00 字数 798 浏览 1 评论 0原文

我一直在研究一些 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

避讳 2024-12-05 02:15:00
  • 我还没有找到我喜欢的工具提示插件。我只是自己构建一个。说实话,我很愿意帮忙。
  • 我建议您使用 html img 属性并将评级设置为十进制值或带有 % 符号的百分比。两者都清楚地表明了百分比。另外,请务必包含宽度高度属性
  • 我最不喜欢的插件是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='' />
  • I haven't found a tooltip plugin that I like. I'd just build one yourself. I'd be willing to help, to be honest.
  • I'd recommend that you use the html img attributes and put the rating as a decimal value or a percent with the % sign. Both clearly indicate percentages. Also, be sure to include width and height attributes.
  • The plugin that I've disliked the least would be 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='' />
你是暖光i 2024-12-05 02:15:00

只需使用图像标签上的 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/

Just use the ALT and TITLE properties on the image tag, if you want more jquery has plugins and such for cool tooltips..

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

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

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文