Question

I’ve been looking at some jQuery plugins to show a tooltip around an image when it’s hovered on. But I haven’t been able to find one, what I was looking for was a tooltip to load and with the description, text, and rating while using the same image inside the tooltip.

So I was thinking about making my own, and wanted to know what you guys think of the best way of doing this?

The General idea is top have a row of images and when a user hovers one, a rounded retangle appears with the same image inside and it populate the information to the left of the image. And they have to leave the tooltip for it fade away, not the thumbnail.

And do you guys know of any jQuery tooltip plugins that do this? No need to reinvent the wheel.

<div class="item">
    <div class="thumbail">
        <img src="" alt="" />
    </div>

    <div class="hiddentooltipinfo">
        <div class="tooltipinfo">
            <div class="info">
                <h3>Title</h3>
                <p>Text</p>
            </div>

            <div class="rating">
                <p>85%</p>
            </div>
        </div>
    </div>
</div>

Answer 1

• I haven’t found a tooltip plugin that I like. I’d just build one yourself. I’d be willing to help, to be honest.
• I’d recommend that you use the html img attributes and put the rating as a decimal value or a percent with the % sign. Both clearly indicate percentages. Also, be sure to include width and height attributes.
• The plugin that I’ve disliked the least would be qTip.

---

<!-- You could use this as your markup: -->
<div class="item">
    <div class="thumbail">
        <img src='' width='' height='' title='' alt='' data-rating='' />
    </div>
</div>

<!-- Depending on why you have the extra markup, you could potentially
     Just use the following: -->
<img src='' width='' height='' title='' alt='' data-rating='' />