Sign in


Sign up


Bootstrap tooltips

Tooltips are a convenient way of presenting additional information to your user. They are tiny little clouds with a brief text message, triggered by clicking on specified element or hovering over it.

They significantly increase User Experience, especially with advanced UI elements, which often require additional explanation.


Examples

                        
<tooltip trigger="hover" :options="{placement: 'top'}">
  <div class="popper">
    Tooltip on top
  </div>
  <btn slot="reference" color="primary">
    Tooltip on top
  </btn>
</tooltip>
<tooltip trigger="hover" :options="{placement: 'right'}">
  <div class="popper">
    Tooltip on right
  </div>
  <btn slot="reference" color="primary">
    Tooltip on right
  </btn>
</tooltip>
<tooltip trigger="hover" :options="{placement: 'bottom'}">
  <div class="popper">
    Tooltip on bottom
  </div>
  <btn slot="reference" color="primary">
    Tooltip on bottom
  </btn>
</tooltip>
<tooltip trigger="hover" :options="{placement: 'left'}">
  <div class="popper">
    Tooltip on left
  </div>
  <btn slot="reference" color="primary">
    Tooltip on left
  </btn>
</tooltip>