PDA

View Full Version : Step Carousel - how to add toolptips



mitja
06-14-2011, 09:24 AM
1) Script Title: Step Carousel Viewer v1.9

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem:

I would like to implement a tooltip when someone go with the pointer on the panel div. A simple tooltip (possibly with a little delay in milliseconds, just not to made the tooltip aper as soon as someone goes with the pointer on the panel) made of html/css code or just a line or two of text.
How can I made it?

ddadmin
06-15-2011, 07:30 AM
The easiest way would just be to make use of HTML's title attribute inside each of the panel's DIV, for example:


<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel" title="this is panel 1's description">
<img src="http://i30.tinypic.com/531q3n.jpg" />
</div>

<div class="panel" title="this is panel 2's description">
<img src="http://i29.tinypic.com/xp3hns.jpg" />
</div>

<div class="panel">
<img src="http://i26.tinypic.com/11l7ls0.jpg" />
</div>

<div class="panel">
<img src="http://i31.tinypic.com/119w28m.jpg" />
</div>

<div class="panel">
<img src="http://i27.tinypic.com/34fcrxz.jpg" />
</div>

</div>
</div>

mitja
06-15-2011, 11:10 AM
I made it, but when I put the anchor element inside the div in the tooltip I see the link, not the title.
Here is a line of code form the panel div:
<div class="panel"><a href="feste.shtml?scritte=8" title="Festa del Redentore"><img src="img/fs_07.png" /></a> </div>
When I stop on the panel I see the URL (feste.shtml?scritte=8) and not the title (Festa del Redentore).

Is there a onpanelfocus or onpanelhover (or similar) event to be used in such case?

mitja
06-20-2011, 11:14 AM
no help?

Let me explain a little bit more.

I need a kind of tooltip or better a caption for the photo in the panel div. A caption that popup when someone pass on the div with the mouse and obviously disappear when goes out of the div.

ddadmin
06-20-2011, 07:25 PM
As far as just adding a tooltip, have you tried adding the "title" attribute inside the DIV tag instead of the A tag as you have now:


<div class="panel" title="Festa del Redentore"><a href="feste.shtml?scritte=8"><img src="img/fs_07.png" /></a> </div>

mitja
06-21-2011, 06:25 AM
Hmm ...
Now I'm a bit confused. In Safari 5.0.5 (on Mac) nothing changed. I still see the url not the title, but in Chrome and Firefox (on the same Mac) I see the title ...
In fact I tried only on Safari and not in other browsers, but I need it to work in Safari too :(