Popovers and tooltips provide further information on an element when the user clicks (popover) or hovers (tooltip).
Tooltips provide further information when a user hovers or tabs to a button or link. Hover or tab into the following buttons to see the behavior:
Button Example | Code |
---|---|
<button class="btn btn-lib" data-placement="left" data-toggle="tooltip" title="Left" type="button">Exit Stage...</button> | |
<button class="btn btn-lib" data-placement="right" data-toggle="tooltip" title="Right" type="button">Exit Stage...</button> | |
<button class="btn btn-lib" data-placement="top" data-toggle="tooltip" title="This high" type="button">How high?</button> | |
<button class="btn btn-lib" data-placement="bottom" data-toggle="tooltip" title="This low" type="button">How low?</button> |
<script>$(function () {$('[data-toggle="tooltip"]').tooltip()})</script>
.tooltip>.tooltip-inner{background-color:#000;color:#FFF;border: 1px solid #581818;font-size: 14px; font-weight:700}
When creating a tool tip, you are adding the following attributes to a link or button:
data-placement="[top, bottom, left, right]"
data-toggle="tooltip"
title="What the tool tips says"
Popovers function like tooltips but require the user to click or otherwise activate the popover with a button or link:
<button type="button" class="btn btn-lib" data-toggle="popover" data-trigger="click" title="The Title within the Popover Element" data-content="Some more information concerning the topic of the button." data-placement="auto left">Select to learn more information.</button>
<script>$(function () {$('[data-toggle="popover"]').popover()})</script>
When creating a tool tip, you are adding the following attributes to a link or button:
data-placement="[top, bottom, left, right, auto]"
data-toggle="popover"
data-trigger="click, hover, focus, manual"
title="The title within the popover element"
For further information on Tooltips, please see the following websites:
For further information and options concerning Popovers, please see the following websites: