touch me

(tooltip on the right of the div - delay 0.5 sec)

(tooltip follows the mouse)

(tooltip on 500px left of page - delay 1sec)

center

(tooltip on the left of the div)

touch me again :)

(tooltip on the position 700px x 300px of the page)

---

Documentation

Params

• Element Id onmouseover
• (Options)
  • show - id of the element to show (tooltip)
  • showWrite - id of the element where the text is written (if not exist it's the same element "show")
  • where - tooltip position
    • mouse - tooltip follow the mouse cursor (default value)
    • right - on the right of the element
    • left - on the left of the element
    • personal - personal position
  • position - Array (x y) with the coords of the "show" element (right, left and personal)
  • textAttr - attribute to get the text (default -> title)
  • delay - delay to show the tooltip (in seconds) (default = 0 seconds)
  • zindex - z-Index, of the show element (default = 3)

HowTo

new ToolTip('element', {...options....});

Ex: 

<script language="javascript" src="prototype.js"></script>

......

<div id="mylayer" style="width: 200px; display: none; position: absolute;">
    <div id="mytextLayer"></div>
</div>
<a href="#" id="myElement" tooltip="... tooltip ... text ...">mouse over this</a>

<script language="javascript">
new ToolTip('myElement', {show:'mylayer', showWrite:'mytextLayer', where:'mouse', textAttr: 'tooltip', delay:0.5});
</script>