Description: Tooltips allow the user to view additional visual information by hovering over an object. Tooltips can be displayed in four different directions: above, below, to the left, or the right of the current content.

508 Guidelines: Tooltips are meant to display visual additional information when the user uses a mouse to hover over the object. To make tooltips 508 compliant, adding the title attribute and helpful content will be sufficient enough to pass the 508-compliance test since the title attribute will be read by the screen reader.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on left">
Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on left">
Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on left">
ooltip on right</button>

Copy

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

Copy