Bootstrap4 Tooltip |

-- Learning not just technology, but dreams!

Bootstrap4 Tutorial

Bootstrap4 Tutorial Bootstrap4 Installation Bootstrap4 Grid System Bootstrap4 Typography Bootstrap4 Colors Bootstrap4 Tables Bootstrap4 Images Bootstrap4 Jumbotron Bootstrap4 Alerts Bootstrap4 Buttons Bootstrap4 Button Groups Bootstrap4 Badges Bootstrap4 Progress Bars Bootstrap4 Spinners Bootstrap4 Pagination Bootstrap4 List Groups Bootstrap4 Cards Bootstrap4 Dropdowns Bootstrap4 Collapse Bootstrap4 Navs Bootstrap4 Navbar Bootstrap4 Breadcrumb Bootstrap4 Forms Bootstrap4 Form Inputs Bootstrap4 Input Group Bootstrap4 Custom Forms Bootstrap4 Carousel Bootstrap4 Modal Bootstrap4 Tooltip Bootstrap4 Popover Bootstrap4 Scrollspy Bootstrap4 Utilities Bootstrap4 Flex Bootstrap4 Media Objects Bootstrap4 Create a Website

Bootstrap4 Modal

Bootstrap4 Popover

Bootstrap4 Tooltip

A tooltip is a small popup that appears when you hover over an element and disappears when you move the mouse away.

How to Create a Tooltip

Create a tooltip by adding data-toggle="tooltip" to an element.

The content of the title attribute is the text displayed in the tooltip:

Hover over me

Note: Tooltips must be initialized with jQuery: call the tooltip() method on the specified element.

The following example can be used anywhere in the document to initialize tooltips:

Example

$(document).ready(function(){
    $('').tooltip();
});

Try it yourself »

Specifying Tooltip Position

By default, tooltips appear above the element.

Use the data-placement attribute to set the direction of the tooltip: top, bottom, left, or right:

Example

<a href="#" data-toggle="tooltip" data-placement="top" title="I am tooltip content!">Hover over me</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="I am tooltip content!">Hover over me</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="I am tooltip content!">Hover over me</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="I am tooltip content!">Hover over me</a>

Try it yourself »

Use it in buttons:

Example

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

Try it yourself »

Add HTML tags to the tooltip content by setting data-html="true", and place the content inside the title attribute:

Example

<button type="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>

Try it yourself »

Disabled button:

Example

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Try it yourself »

Bootstrap4 Modal

Bootstrap4 Popover

iFlytek Spark Coding Plan includes free model call quotas, DeepSeek, GLM, Kimi, MiniMax, one-stop experience and deployment platform. Configuration Guide ¥3.9/month Subscribe Now