Tooltips sind immer dann nützlich, wenn zusätzliche Informationen vorliegen die beschreibend oder zweitrangig sind. Um diese Informationen im Kontext und bei Interaktion einzublenden kann das jQuery-Plugin qtip() verwendet werden.

**Info:** Es handelt sich dabei um das freie Plugin qTip2 (http://qtip2.com/). Alle Optionen, Events und andere Möglichkeiten können in der Dokumentation des Plugins nachgelesen werden.

Es wird direkt auf das Interaktionselement angewendet:

$(document).ready(function() {
  $('#my-tooltip').qtip()
})

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<a href="#" id="my-tooltip" title="This is a tooltip">labore</a>

Info-Flags

$(document).ready(function() {
  $('#my-info-flag').qtip({
      content: {
          title: 'Info Flag',
          text: 'Info Flags are plain text...'
      }
  })
})

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<a href="#" id="my-info-flag">labore</a>
**Anmerkung Barrierefreiheit:** Da Tooltips meist nur über Maus-Interaktionen aktiv werden sollten darin nur unwichtige oder unterstützende Informationen hinterlegt sein. Tooltips sollten nicht Voraussetzung für die Benutzerführung sein.