search

enyo / opentip

Opentip is an open source javascript tooltip based on the protoype framework.
http://www.opentip.org
1.25k stars 401 forks source link

Don't know how to display image as tooltip #79

Closed martind1111 closed 10 years ago

martind1111 commented 10 years ago

I know this can be done, but I don't know how. How to display an image has a tooltip. If I do the following:

<a href="images/Dispel.ashx.jpg" data-ot="Tag info 1" data-ot-group="tags" data-ot-ajax="true">Tag 1</a>

What I see as a tooltip is the binary of the image (text gibberish) instead of the image itself.

How can I display an image as a tooltip with opentip?

Martin

martind1111 commented 10 years ago

I found out how to display an image as a tooltip. The idea is to put an img src in the content property, like this:

<div data-ot="<img src='images/image.jpg'>" data-ot-style="glass">Hover me</div>

However, I still have an issue with the rendering. If the image can't display say at the bottom of the window because the "Hover me" label is too close to the bottom, I would expect the tool tip to display above the "Hover me" label. This is not what happens in my case. Is there an option I need to set or some script I need to execute to get this to work? I thought the containInViewport property would control this, but the default is "true", so I expect it should be doing this already.

enyo commented 10 years ago

Hi @martind1111 I think this happens, because the image is loaded after Opentip detected the correct dimensions of the tooltip. To make sure that Opentip knows of the correct dimensions, calling .reposition() on your Opentip when the image loaded should do the trick. Cheers