Tooltips

Default tooltips

The tooltips and the tooltiped elements should be structured like this. The tooltip position in relation to the tooltiped element are specified by the respective classes on the tooltiped element.

<div class="tooltipped tooltip-top">
    Tooltip Top
    <div class="tooltip">This is the tooltip</div>
</div>
<div class="tooltipped tooltip-top-right">
    Tooltip Top Right
    <div class="tooltip">This is the tooltip</div>
</div>
<div class="tooltipped tooltip-right">
    Tooltip Right
    <div class="tooltip">This is the tooltip</div>
</div>
<div class="tooltipped tooltip-bottom-right">
    Tooltip Bottom Right
    <div class="tooltip">This is the tooltip</div>
</div>
<div class="tooltipped tooltip-bottom">
    Tooltip Bottom
    <div class="tooltip">This is the tooltip</div>
</div>
<div class="tooltipped tooltip-bottom-left">
    Tooltip Bottom Left
    <div class="tooltip">This is the tooltip</div>
</div>
<div class="tooltipped tooltip-left">
    Tooltip Left
    <div class="tooltip">This is the tooltip</div>
</div>
<div class="tooltipped tooltip-top-left">
    Tooltip Top Left
    <div class="tooltip">This is the tooltip</div>
</div>

Tooltips with delay

Sometimes tooltips are annoying when they pop up unintentionally on every mouse hover, expecially when the user is familiar with the UI. In order to make sure that the user is interested in the specific element and not just passing the cursor over, a small delay can be added.

<div class="tooltipped tooltip-top">
    Tooltip Top
    <div class="tooltip with-delay">This is the delayed tooltip</div>
</div>
<div class="tooltipped tooltip-right">
    Tooltip Right
    <div class="tooltip with-delay">This is the delayed tooltip</div>
</div>
<div class="tooltipped tooltip-bottom">
    Tooltip Bottom
    <div class="tooltip with-delay">This is the delayed tooltip</div>
</div>
<div class="tooltipped tooltip-left">
    Tooltip Left
    <div class="tooltip with-delay">This is the delayed tooltip</div>
</div>