谁能展示一个使用 BeautyTips 的简单示例吗？

发布于 2024-09-12 00:36:35 字数 112 浏览 10 评论 0原文

正在寻找如何使用 beautytips 的简单示例（包括 HTML + CSS）？我的要求是这样的 - 我正在显示产品名称。悬停在产品名称上时，我想在工具提示中显示产品图像。我该怎么做？

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

乖乖哒 2024-09-19 00:36:35

这是一个包含一些示例的网站：
http://www.lullabot.com/files/bt/ bt-latest/DEMO/index.html

假设您指的是这个 jquery 插件。

回复收藏 0 原文

命比纸薄 2024-09-19 00:36:35

这里是。您只需确保 js 文件已加载即可。请注意，我在这里使用悬停意图库来在弹出任何内容之前给予延迟。

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery.bt.min.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.r6.js">
<div id="mydiv">Mouse over here to see it poppin'</div>
<script>
$("mydiv").bt("Text to pop out",{
            showTip: function(box){
                $(box).fadeIn(300);
            },
            hideTip: function(box, callback){
                $(box).animate({opacity: 0}, 100, callback);
            },
            hoverIntentOpts: {
                interval: 1000,
                timeout: 200
            },
            fill: '#E1EEF8',
            cornerRadius: 10,
            strokeWidth: 0,
            shadow: true,
            shadowOffsetX: 3,
            shadowOffsetY: 3,
            shadowBlur: 8,
            shadowColor: 'rgba(0,0,0,.9)',
            shadowOverlap: false,
            noShadowOpts: {strokeStyle: '#999', strokeWidth: 2},
            positions: ['top', 'bottom','right']
        });
</script>

Here it is. You just have to make sure the js files are getting loaded. Note that i'm using hoverintent lib here to give a delay before anything pops up.

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery.bt.min.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.r6.js">
<div id="mydiv">Mouse over here to see it poppin'</div>
<script>
$("mydiv").bt("Text to pop out",{
            showTip: function(box){
                $(box).fadeIn(300);
            },
            hideTip: function(box, callback){
                $(box).animate({opacity: 0}, 100, callback);
            },
            hoverIntentOpts: {
                interval: 1000,
                timeout: 200
            },
            fill: '#E1EEF8',
            cornerRadius: 10,
            strokeWidth: 0,
            shadow: true,
            shadowOffsetX: 3,
            shadowOffsetY: 3,
            shadowBlur: 8,
            shadowColor: 'rgba(0,0,0,.9)',
            shadowOverlap: false,
            noShadowOpts: {strokeStyle: '#999', strokeWidth: 2},
            positions: ['top', 'bottom','right']
        });
</script>

回复收藏 0 原文

~没有更多了~