Popover

Description: Popovers display additional visual content for the user that overlays the current content. Popovers can be displayed in four different directions: above, below, to the left, or the right of the current content. There are also various ways to trigger a popover. One way is by selecting the object, and the other is by simply hovering over the object.

508 Guidelines: Popovers are meant to display visual additional information when the user uses a mouse to hover over the object or select the object. To make popovers 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.

Toggle Popover

TIP:

Dismissive Popover

TIP: To display the popover, select the button; to dismiss the popover, click outside of the popover.

Dismissible popover

Hover Popover

Popover with HTLM inside 'data-content'

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left"
data-content="left">left</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top"
data-content="top">top</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom"
data-content="bottom">bottom</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right"
data-content="right">right</button>
Copy 
<a tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" title="Dismissive popover" 
data-content="Here's some amazing content.">Dismissible popover</a>
Copy 
<button type="button" class="btn btn-default" data-toggle="popover" data-trigger="hover" title="Hover Popover"
data-content="The amazing content continues.">Hover Popover</button>
Copy 
<button type="button" class="btn btn-default btn-sm" data-toggle="popover" title="Add Other Procedure" data-content="
<div class='form-container'>
    <div class='control form-group'>
        <label for='add-procedure'>Add Other Procedure</label>
        <select class='form-control typeahead-select' title='Press enter to browse through select options' id='add-procedure'>
            <optgroup label='Alaskan/Hawaiian Time Zone'>
            <option value='AK'>Alaska</option>
            <option value='HI'>Hawaii</option>
            </optgroup>
        </select>
    </div>
    <div class='control form-group'>
        <div class='text-right'>
            <button type='button' class='btn btn-primary btn-sm' title='Press enter to cancel'>Cancel</button>
            <button type='button' class='btn btn-primary btn-sm' title='Press enter to add'>Add</button>
        </div>
    </div>
</div>">Add Other Procedure&hellip;</button>
Copy 
<script>
	$(function () {
		$('[data-toggle="popover"]').popover({html: true});
		$('#popover').popover({ trigger: "hover" });
	});
</script>
Copy