开发者

Can anyone please show a simple example of using BeautyTips?

开发者_如何学Go

Looking for a simple example of how beautytips can be used( HTML + CSS included)? My requirement is this - I am displaying product names.On hovering of product name,I want to display products image in the tooltip.How can I do this?

thanks


Here is a website with some samples: http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

Assuming that is that you are referring to this jquery plugin.


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜