0

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

jess
  • 1,197
  • 3
  • 13
  • 21
  • @spinon I *love* the "Tip of the day" section: `Choose an eyeliner that suits your eye color.` and, `Wear a Hairstyle that complements your dressing and personality.` – Pekka Jul 28 '10 at 16:52
  • @Pekka Yeah that is pretty sweet. – spinon Jul 28 '10 at 16:55

2 Answers2

1

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.

spinon
  • 10,760
  • 5
  • 41
  • 59
  • That demo page is NOT useful - it uses a complex eval method to run javascript in a textarea - what the gentleman is asking for (and what would be useful to all of us) is a BASIC example of a page with a div that initiates a simple bubble when you hover over it. WITHOUT any flair... please. –  Aug 15 '11 at 21:59
0

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>
dsomnus
  • 1,391
  • 14
  • 21