Tooltip widget

Crea un tooltip per l'elemento selezionato

// API dBJs-ui  

Settaggio e opzioni:
      - 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.

Example 1
    <span class="tooltip" data-ttHtml="Info sul l'input di testo"><input type="text" /></span>
  
Example 2

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>
  
Operazione eseguita con successo!