Can anyone please show a simple example of using BeautyTips?
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>
精彩评论