<metaname="twitter:description"content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.">
<metaproperty="og:description"content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.">
<liclass="toc-entry toc-h4"><ahref="#making-tooltips-work-for-keyboard-and-assistive-technology-users">Making tooltips work for keyboard and assistive technology users</a></li>
<pclass="bd-lead">Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.</p>
<p>Things to know when using the tooltip plugin:</p>
<ul>
<li>Tooltips rely on the 3rd party library <ahref="https://popper.js.org">Popper.js</a> for positioning. You must include <ahref="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js">popper.min.js</a> before bootstrap.js in order for tooltips to work!</li>
<li>Tooltips are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li>
<li>Tooltips with zero-length titles are never displayed.</li>
<li>Specify <codeclass="highlighter-rouge">container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
<li>Triggering tooltips on hidden elements will not work.</li>
<li>Tooltips for <codeclass="highlighter-rouge">.disabled</code> or <codeclass="highlighter-rouge">disabled</code> elements must be triggered on a wrapper element.</li>
<li>When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use <codeclass="highlighter-rouge">white-space: nowrap;</code> on your <codeclass="highlighter-rouge"><a></code>s to avoid this behavior.</li>
<li>Tooltips must be hidden before their corresponding elements have been removed from the DOM.</li>
</ul>
<p>Got all that? Great, let’s see how they work with some examples.</p>
<p>Hover over the buttons below to see their tooltips.</p>
<divclass="bd-example tooltip-demo">
<divclass="bd-example-tooltips">
<buttontype="button"class="btn btn-secondary"data-toggle="tooltip"data-placement="top"title="Tooltip on top">Tooltip on top</button>
<buttontype="button"class="btn btn-secondary"data-toggle="tooltip"data-placement="right"title="Tooltip on right">Tooltip on right</button>
<buttontype="button"class="btn btn-secondary"data-toggle="tooltip"data-placement="bottom"title="Tooltip on bottom">Tooltip on bottom</button>
<buttontype="button"class="btn btn-secondary"data-toggle="tooltip"data-placement="left"title="Tooltip on left">Tooltip on left</button>
<buttontype="button"class="btn btn-secondary"data-toggle="tooltip"data-html="true"title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
</div>
</div>
<figureclass="highlight"><pre><codeclass="language-html"data-lang="html"><spanclass="nt"><button</span><spanclass="na">type=</span><spanclass="s">"button"</span><spanclass="na">class=</span><spanclass="s">"btn btn-secondary"</span><spanclass="na">data-toggle=</span><spanclass="s">"tooltip"</span><spanclass="na">data-placement=</span><spanclass="s">"top"</span><spanclass="na">title=</span><spanclass="s">"Tooltip on top"</span><spanclass="nt">></span>
Tooltip on top
<spanclass="nt"></button></span>
<spanclass="nt"><button</span><spanclass="na">type=</span><spanclass="s">"button"</span><spanclass="na">class=</span><spanclass="s">"btn btn-secondary"</span><spanclass="na">data-toggle=</span><spanclass="s">"tooltip"</span><spanclass="na">data-placement=</span><spanclass="s">"right"</span><spanclass="na">title=</span><spanclass="s">"Tooltip on right"</span><spanclass="nt">></span>
Tooltip on right
<spanclass="nt"></button></span>
<spanclass="nt"><button</span><spanclass="na">type=</span><spanclass="s">"button"</span><spanclass="na">class=</span><spanclass="s">"btn btn-secondary"</span><spanclass="na">data-toggle=</span><spanclass="s">"tooltip"</span><spanclass="na">data-placement=</span><spanclass="s">"bottom"</span><spanclass="na">title=</span><spanclass="s">"Tooltip on bottom"</span><spanclass="nt">></span>
Tooltip on bottom
<spanclass="nt"></button></span>
<spanclass="nt"><button</span><spanclass="na">type=</span><spanclass="s">"button"</span><spanclass="na">class=</span><spanclass="s">"btn btn-secondary"</span><spanclass="na">data-toggle=</span><spanclass="s">"tooltip"</span><spanclass="na">data-placement=</span><spanclass="s">"left"</span><spanclass="na">title=</span><spanclass="s">"Tooltip on left"</span><spanclass="nt">></span>
<p>The required markup for a tooltip is only a <codeclass="highlighter-rouge">data</code> attribute and <codeclass="highlighter-rouge">title</code> 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 <codeclass="highlighter-rouge">top</code> by the plugin).</p>
<divclass="bd-callout bd-callout-warning">
<h4id="making-tooltips-work-for-keyboard-and-assistive-technology-users">Making tooltips work for keyboard and assistive technology users</h4>
<p>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 <codeclass="highlighter-rouge"><span></code>s) can be made focusable by adding the <codeclass="highlighter-rouge">tabindex="0"</code> 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.</p>
</div>
<figureclass="highlight"><pre><codeclass="language-html"data-lang="html"><spanclass="c"><!-- HTML to write --></span>
<spanclass="nt"><a</span><spanclass="na">href=</span><spanclass="s">"#"</span><spanclass="na">data-toggle=</span><spanclass="s">"tooltip"</span><spanclass="na">title=</span><spanclass="s">"Some tooltip text!"</span><spanclass="nt">></span>Hover over me<spanclass="nt"></a></span>
<spanclass="c"><!-- Generated markup by the plugin --></span>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <codeclass="highlighter-rouge">data-</code>, as in <codeclass="highlighter-rouge">data-animation=""</code>.</p>
<td>Apply a CSS fade transition to the tooltip</td>
</tr>
<tr>
<td>container</td>
<td>string | element | false</td>
<td>false</td>
<td>
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element -which will prevent the tooltip from floating away from the triggering element during a window resize.</p>
</td>
</tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>0</td>
<td>
<p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
<p>If a number is supplied, delay is applied to both hide/show</p>
<p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
</td>
</tr>
<tr>
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>
<p>Allow HTML in the tooltip.</p>
<p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM.</p>
<p>Use text if you're worried about XSS attacks.</p>
</td>
</tr>
<tr>
<td>placement</td>
<td>string | function</td>
<td>'top'</td>
<td>
<p>How to position the tooltip - auto | top | bottom | left | right.<br/>When <code>auto</code> is specified, it will dynamically reorient the tooltip.</p>
<p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p>
</td>
</tr>
<tr>
<td>selector</td>
<td>string</td>
<td>false</td>
<td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <ahref="https://github.com/twbs/bootstrap/issues/4215">this</a> and <ahref="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
<p>Base HTML to use when creating the tooltip.</p>
<p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
<p><code>.arrow</code> will become the tooltip's arrow.</p>
<p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
</td>
</tr>
<tr>
<td>title</td>
<td>string | element | function</td>
<td>''</td>
<td>
<p>Default title value if <code>title</code> attribute isn't present.</p>
<p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p>
</td>
</tr>
<tr>
<td>trigger</td>
<td>string</td>
<td>'hover focus'</td>
<td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
</tr>
<tr>
<td>offset</td>
<td>number | string</td>
<td>0</td>
<td>Offset of the tooltip relative to its target. For more information refer to Popper.js's <ahref="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">offset docs</a>.</td>
</tr>
<tr>
<td>fallbackPlacement</td>
<td>string | array</td>
<td>'flip'</td>
<td>Allow to specify which position Popper will use on fallback. For more information refer to
<h4id="data-attributes-for-individual-tooltips">Data attributes for individual tooltips</h4>
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
</div>
<h3id="methods">Methods</h3>
<divclass="bd-callout bd-callout-danger">
<h4id="asynchronous-methods-and-transitions">Asynchronous methods and transitions</h4>
<p>All API methods are <strong>asynchronous</strong> and start a <strong>transition</strong>. They returns to the caller as soon as the transition is started but <strong>before it ends</strong>. In addition, a method call on a <strong>transitioning component will be ignored</strong>.</p>
<p><ahref="/getting-started/javascript/">See our Javascript documentation for more informations.</a></p>
<p>Reveals an element’s tooltip. <strong>Returns to the caller before the tooltip has actually been shown</strong> (i.e. before the <codeclass="highlighter-rouge">shown.bs.tooltip</code> event occurs). This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.</p>
<p>Hides an element’s tooltip. <strong>Returns to the caller before the tooltip has actually been hidden</strong> (i.e. before the <codeclass="highlighter-rouge">hidden.bs.tooltip</code> event occurs). This is considered a “manual” triggering of the tooltip.</p>
<p>Toggles an element’s tooltip. <strong>Returns to the caller before the tooltip has actually been shown or hidden</strong> (i.e. before the <codeclass="highlighter-rouge">shown.bs.tooltip</code> or <codeclass="highlighter-rouge">hidden.bs.tooltip</code> event occurs). This is considered a “manual” triggering of the tooltip.</p>
<p>Hides and destroys an element’s tooltip. Tooltips that use delegation (which are created using <ahref="#options">the <codeclass="highlighter-rouge">selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
