Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Table of Contents

Examples

Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

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

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

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

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

And with custom HTML added:

								
									<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
										Tooltip with HTML
									</button>

Usage

The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.

Trigger the tooltip via JavaScript:

								$('#example').tooltip(options)
Markup

The required markup for a tooltip is only a data attribute and title on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).

Making tooltips work for keyboard and assistive technology users

You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as <span>s) can be made focusable by adding the tabindex="0" attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most assistive technologies currently do not announce the tooltip in this situation.

								
									<!-- HTML to write -->
									<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

									<!-- Generated markup by the plugin -->
									<div class="tooltip bs-tooltip-top" role="tooltip">
										<div class="arrow"></div>
										<div class="tooltip-inner">
											Some tooltip text!
										</div>
									</div>