Tooltip & Popover

Tooltip

Mostra al passaggio del mouse il valore dell'attributo title in un fumetto posizionabile rispetto all'elemento.

Come si attiva:

Nell'elemento:

• Trigger: data-toggle="tooltip"
• Posizionamento: data-placement="top|right|bottom|left"
• Contenuto: title="Testo mostrato nel tooltip"

Attenzione: il javascript tooltip non si attiva tramite il solo attributo data-toggle, occorre una chiamata javascript del come riportato nell'esempio.

---

---

HTML

Tooltip on left

Tooltip on top

Tooltip on bottom

Tooltip on right

Javascript

$(function () {
	$('[data-toggle="tooltip"]').tooltip()
})

---

Popover

Simile al tooltip ma le informazioni il fumetto con le info si attiva al click.

Come si attiva:

Nell'elemento:

• Trigger: data-toggle="popover"
• Posizionamento: data-placement="top|right|bottom|left"
• Contenuto:
  • Titolo del fumetto: title="Testo mostrato titolo del popover"
  • Corpo del fumetto: data-content="Testo mostrato nel popover"

Attenzione: anche Popover va attivato tramite un'esplicita chiamata javascript del come riportato nell'esempio.

---

---

HTML

  Popover on left



  Popover on top



  Popover on bottom



  Popover on right

Javascript

$(function () {
	$('[data-toggle="popover"]').popover()
})