martind1111
commented
10 years ago I have found the solution to this problem for invoking function opentip on mouseover. Instead of passing id to the Opentip function, variable obj should be passed to Opentip. Also, to fix the positioning problem, call reposition before show and I found that using the default tipJoint fixed some issue with a bubble that did not surround the image completely (even though the image is rendered as a whole).
I was told to use reposition() on tip to avoid images to not display properly at bottom of page. Thanks for the advice. I have tried it and it works better. It seems that assigning tool tip dynamically solves some issues with rendering on page. So I am trying to get this to work.
I would like to assign image tool tip dynamically, but am not sure what is the best way to proceed.
I would like the image to be loaded on mouse overs. I have written this code:
<div><span id='Impulse' onmouseover="opentip(event, this);">Impulse</span></div> ... <script type="text/javascript"> function opentip(event, obj) { var id = obj.getAttribute("id"); var imgSrc = "<img src='images/" + id + ".jpg'>"; var id = "#" + id; var tip = new Opentip(id, imgSrc, { borderWidth: 5, stemLength: 18, stemBa se: 20, style: "glass", target: true, tipJoint: "top", borderColor: "#317CC5" }) ; tip.show(); tip.reposition(); } </script>
I have two issues with this code.
First, I see that the image is flickering when mouse over (like it draws twice). If I don't put the tip.show() instruction, then the image does not appear when I first hover over it.
Maybe there is a better strategy to load the tool tip. I have many images on the same page. I would also like to know how I can deal with id's that have spaces in them. This will not work with my current function. Passing an id with spaces to Opentip causes problem. It is important for me to have the spaces in the filename of the image (used in the img src tag. There is also the problem of having the same image associated with two different element on the same page. If I use an id to image filename association, this is not going to work. I have seen some other designers using a statement like "var control = Event.element(event);" to get a handle on the element. This way, I wouldn't have to rely on the id as an argument to Opentip, but would pass the handle to the element. The Event.element function however seem to only work with later version of prototype. Maybe there is something else I could do.
Martin