Tooltip widget
Crea un tooltip per l'elemento selezionato
// API dBJs-ui
Davide Bausach
/ 22-06-2015
- data-ttPos : posizione top | right | bottom | left (default right)
- data-ttAutoClose : chiusura automatica all'evento onmouseout (default on)
- data-ttWidth: larghezza in px (default 300)
- data-ttHtml: contenuto html
- data-ttEvent: evento di apertura mouseover | click (default mouseover)
Standard sintax
<button class="tooltip" data-ttPos="top || right || bottom || left" data-ttAutoClose="on || off" data-ttWidth="width in px" data-ttHtml="html text" data-ttEvent="mouseover || click">tooltip</button>
Per far si che il widget Tooltip funzioni è necessario
che la classe tooltip sia applicata ad un tag chiuso come ad
esempio uno <span></span> o un <div></div>
e non ad un tag aperto come ad esempio <img /> o
<input />.
Qualora lo si voglia ottenere su un elemento rappresentato da un tag chiuso
è consigliato che quest'ultimo venga racchiuso in un tag
<span></span> avente la classe tooltip.
<span class="tooltip" data-ttHtml="Info sul l'input di testo"><input type="text" /></span>
Il seguente esempio mostra come è possibile configurare un Tooltip al click del mouse sull'elemento che lo genera e con la relativa chiusura con il click su un qualsiasi altro elemento del DOM.
<button class="tooltip" type="button" data-ttPos="top" data-ttAutoClose="off" data-ttWidth="200" data-ttHtml="<h1>Tooltip 1</h1>" data-ttEvent="click">Try Tooltip</button>