Question

I have problem with tooltips on my magento website, I need to have one tooltip on product page which will show a HTML UL List. I tried some plugins I found but had problems with JQuery as it was disabling other prototype pop up I have on product page.

Im really a newbie at All the types of javascript and hope you experts can help me with this please.

My trigger id for tooltips is #why-to-buy
and the tooltip class in CSS is .why-to-buy-tooltip

can anyone suggest me a prototype or scriptaculous driven simple tooltip which can show HTML please?

Any help is more than welcome.
Thanks in advance.

Answer 1

Typically this can be done in just CSS. To start with there needs to be an anchor;

<a id="why-to-buy" href="#" onclick="return false;">
    Why To Buy?
    <ul class="why-to-buy-tooltip">
        <li>Reason #1</li>
        <li>Reason #2</li>
    </ul>
</a>

The onclick is to prevent it working as a hyperlink. An anchor is necessary for older IEs to respect the following hover;

#why-to-buy {
    position: relative;
}

#why-to-buy .why-to-buy-tooltip {
    display: none;
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 100;
}

#why-to-buy:hover .why-to-buy-tooltip, #why-to-buy:active .why-to-buy-tooltip {
    display: block;
}

If you need more info search for and read about “CSS popups”. A nice touch is to add some CSS3 transitions – old browsers just ignore them and continue to work as normal.

---

This type of popup is limited because it is inside an anchor, and anchors cannot contain anchors. If the #why-to-buy element is of another type, such as a DIV, then IE doesn’t pick up the :hover pseudoclass. For this special case a bit of JavaScript is needed after all.

$('why-to-buy').observe('mouseenter', function() {
    this.addClassName('over');
}).observe('mouseleave', function() {
    this.removeClassName('over');
});

Update the last stylesheet rule to include #why-to-buy.over .why-to-buy-tooltip. The bit of JavaScript is rarely needed and can go in /skin/frontend/base/default/js/ie6.js. Or you could encourage browser upgrades and choose not to support old IE at all.