Bootstrap - Tooltips

Ethan D. - June 1, 2024

Creating a Basic Tooltip

To create a basic Bootstrap Tooltip, add the data-bs-toggle="tooltip" attribute to an element. The title attribute specifies the content of the Tooltip.

Example: Basic Tooltip

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip text">
  Hover over me
</button>

By default, Tooltips are triggered when you hover over the element. You can change this behavior using the data-bs-trigger attribute. The possible values are:

Value	Description
`hover`	The Tooltip is triggered when you hover over the element (default).
`click`	The Tooltip is triggered when you click on the element.
`focus`	The Tooltip is triggered when the element receives focus.
`manual`	The Tooltip is triggered manually using JavaScript.

Example: Tooltip Trigger

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-trigger="click" title="Tooltip text">
  Click me
</button>

You can also specify the placement of the Tooltip relative to the element using the data-bs-placement attribute. The possible values are:

Value	Description
`top`	The Tooltip is placed above the element (default).
`bottom`	The Tooltip is placed below the element.
`left`	The Tooltip is placed to the left of the element.
`right`	The Tooltip is placed to the right of the element.

Example: Tooltip Placement

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip text">
  Hover over me
</button>

To make the Tooltips work, initialize them using JavaScript. You can do this by calling the tooltip() method on the elements that have the data-bs-toggle="tooltip" attribute.

Example: Initialize Tooltips

$(document).ready(function(){
  $('[data-bs-toggle="tooltip"]').tooltip();
});

This code selects all elements with the data-bs-toggle="tooltip" attribute and initializes the Tooltip functionality on them.

Customizing Tooltips

Bootstrap Tooltips provide several options for customization, allowing you to change the content, style, and behavior of Tooltips to suit your needs.

Changing the Content of a Tooltip

By default, the content of a Tooltip is specified using the title attribute of the element. However, you can also change the content dynamically using JavaScript.

To change the Tooltip content, you can use the data-bs-title attribute instead of the title attribute. This allows you to specify the content using JavaScript or bind it to a dynamic value.

Example: Changing the Content of a Tooltip

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="Dynamic Tooltip content">
  Hover over me
</button>

$(document).ready(function(){
  $('[data-bs-toggle="tooltip"]').tooltip({
    title: function(){
      return "Dynamic Tooltip content: " + $(this).data('bs-title');
    }
  });
});

Styling Tooltips with CSS

Bootstrap Tooltips come with a default style, but you can customize their appearance using CSS. The Tooltip element has the class .tooltip, and the Tooltip arrow has the class .tooltip-arrow.

To style Tooltips, you can target these classes in your CSS:

Example: Styling Tooltips with CSS

.tooltip {
  background-color: #000;
  color: #fff;
  border-radius: 4px;
  padding: 8px;
}

.tooltip-arrow {
  border-top-color: #000;
}

In the example above, the Tooltip background color is set to black, the text color is set to white, the border-radius is adjusted, and the padding is increased. The arrow color is also set to match the Tooltip background color.

Using HTML inside Tooltips

By default, Tooltips only support plain text content. However, you can enable HTML content inside Tooltips by setting the html option to true when initializing the Tooltip.

Example: Using HTML inside Tooltips

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<strong>Bold</strong> <em>italic</em> text">
  Hover over me
</button>

$(document).ready(function(){
  $('[data-bs-toggle="tooltip"]').tooltip({
    html: true
  });
});

With these customization options, you can tailor the appearance and behavior of Bootstrap Tooltips to match your project's design and requirements.

Tooltip Options

Bootstrap Tooltips have several options that let you control their behavior and appearance. Let's look at some of these options.

Delay Option for Showing and Hiding Tooltips

By default, Tooltips show right away when the triggering event happens (e.g., hovering over the element). However, you can add a delay before the Tooltip is shown or hidden using the delay option.

The delay option takes an object with two properties: show and hide. These properties set the delay time in milliseconds for showing and hiding the Tooltip.

Example: Setting the delay option

$(document).ready(function(){
  $('[data-bs-toggle="tooltip"]').tooltip({
    delay: { show: 500, hide: 100 }
  });
});

The Tooltip will show after a delay of 500 milliseconds (0.5 seconds) when the triggering event happens, and it will be hidden after a delay of 100 milliseconds (0.1 seconds) when the event ends.

Setting the Container for Tooltips

By default, Tooltips are added to the <body> element. However, you can set a custom container for the Tooltips using the container option. This helps when you want to avoid overlapping issues or make sure Tooltips are positioned right within a specific element.

Example: Setting a custom container for tooltips

$(document).ready(function(){
  $('[data-bs-toggle="tooltip"]').tooltip({
    container: '.my-container'
  });
});

The Tooltips will be added to the element with the class .my-container instead of the <body> element.

Enabling or Disabling Animation

Bootstrap Tooltips have a fade animation by default when they are shown or hidden. If you want to turn off the animation, you can set the animation option to false.

Example: Disabling tooltip animation

$(document).ready(function(){
  $('[data-bs-toggle="tooltip"]').tooltip({
    animation: false
  });
});

With the animation option set to false, the Tooltips will show and hide instantly without any fade animation.

These are just a few of the options you can use to customize Bootstrap Tooltips. By combining these options with the ones talked about in the previous sections, you can change the behavior and appearance of Tooltips to match your project's needs.

Tooltip Methods

Bootstrap Tooltips have several methods that allow you to control their behavior with code. These methods can be used to show, hide, destroy, or toggle Tooltips.

Showing and Hiding Tooltips with Code

You can show or hide Tooltips using JavaScript methods. To show a Tooltip, call the show() method on the element that has the Tooltip. To hide a Tooltip, call the hide() method.

Example: HTML for Tooltip Buttons

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip text" id="myTooltip">
  Hover over me
</button>

<button type="button" class="btn btn-primary" id="showTooltip">Show Tooltip</button>
<button type="button" class="btn btn-danger" id="hideTooltip">Hide Tooltip</button>

Example: JavaScript for Showing and Hiding Tooltips

$(document).ready(function(){
  $('#myTooltip').tooltip();

  $('#showTooltip').click(function(){
    $('#myTooltip').tooltip('show');
  });

  $('#hideTooltip').click(function(){
    $('#myTooltip').tooltip('hide');
  });
});

Clicking the "Show Tooltip" button will show the Tooltip with code, and clicking the "Hide Tooltip" button will hide it.

Destroying Tooltips

If you no longer need a Tooltip, you can destroy it using the dispose() method. This will remove the Tooltip from the element and clean up any event listeners.

Example: HTML for Destroy Tooltip Button

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip text" id="myTooltip">
  Hover over me
</button>

<button type="button" class="btn btn-danger" id="destroyTooltip">Destroy Tooltip</button>

Example: JavaScript for Destroying Tooltips

$(document).ready(function(){
  $('#myTooltip').tooltip();

  $('#destroyTooltip').click(function(){
    $('#myTooltip').tooltip('dispose');
  });
});

After calling the dispose() method, the Tooltip will be removed, and hovering over the element will no longer show the Tooltip.

Toggling Tooltips

You can toggle the visibility of a Tooltip using the toggle() method. If the Tooltip is currently hidden, calling toggle() will show it, and if the Tooltip is currently visible, calling toggle() will hide it.

Example: HTML for Toggling Tooltip Button

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip text" id="myTooltip">
  Hover over me
</button>

<button type="button" class="btn btn-primary" id="toggleTooltip">Toggle Tooltip</button>

Example: JavaScript for Toggling Tooltips

$(document).ready(function(){
  $('#myTooltip').tooltip();

  $('#toggleTooltip').click(function(){
    $('#myTooltip').tooltip('toggle');
  });
});

Clicking the "Toggle Tooltip" button will show and hide the Tooltip each time it is clicked.

These methods give you full control over the behavior of Bootstrap Tooltips, allowing you to show, hide, destroy, or toggle them based on your application's needs.

Tooltip Events

Bootstrap Tooltips fire several events that you can listen to and handle with JavaScript. These events let you react to changes in the state of a Tooltip and perform actions based on those changes.

Events Fired by Tooltips

Bootstrap Tooltips fire these events:

Event	Description
`show.bs.tooltip`	Fired when the `show` method is called.
`shown.bs.tooltip`	Fired when the Tooltip has been made visible to the user.
`hide.bs.tooltip`	Fired when the `hide` method is called.
`hidden.bs.tooltip`	Fired when the Tooltip has finished being hidden from the user.
`inserted.bs.tooltip`	Fired after the `show.bs.tooltip` event when the Tooltip template has been added to the DOM.

These events provide hooks for you to run your own code at specific points in the Tooltip's lifecycle.

Listening to Tooltip Events

To listen to Tooltip events, you can use the on() method in jQuery and attach event handlers to the events you want.

Example: Listening to Tooltip Events

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip text" id="myTooltip">
  Hover over me
</button>

$(document).ready(function(){
  $('#myTooltip').tooltip();

  $('#myTooltip').on('show.bs.tooltip', function () {
    console.log('Tooltip is about to be shown');
  });

  $('#myTooltip').on('shown.bs.tooltip', function () {
    console.log('Tooltip is fully visible');
  });

  $('#myTooltip').on('hide.bs.tooltip', function () {
    console.log('Tooltip is about to be hidden');
  });

  $('#myTooltip').on('hidden.bs.tooltip', function () {
    console.log('Tooltip is fully hidden');
  });

  $('#myTooltip').on('inserted.bs.tooltip', function () {
    console.log('Tooltip template has been added to the DOM');
  });
});

In the example above, we attach event handlers to the various Tooltip events using the on() method. Each event handler logs a message to the console when the event is fired.

Handling Tooltip Events with JavaScript

By handling Tooltip events with JavaScript, you can perform actions based on the state of the Tooltip. For example, you can update the content of the Tooltip when it is shown or perform some cleanup when the Tooltip is hidden.

Example: Handling Tooltip Events with JavaScript

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Initial Tooltip text" id="myTooltip">
  Hover over me
</button>

$(document).ready(function(){
  $('#myTooltip').tooltip();

  $('#myTooltip').on('shown.bs.tooltip', function () {
    // Update the Tooltip content when it is shown
    $(this).attr('data-bs-original-title', 'Updated Tooltip text');
    $(this).tooltip('show');
  });

  $('#myTooltip').on('hidden.bs.tooltip', function () {
    // Reset the Tooltip content when it is hidden
    $(this).attr('data-bs-original-title', 'Initial Tooltip text');
  });
});

In this example, we handle the shown.bs.tooltip event to update the content of the Tooltip when it is shown. We change the data-bs-original-title attribute to a new value and call the show() method to update the displayed Tooltip.

We also handle the hidden.bs.tooltip event to reset the Tooltip content back to its initial value when the Tooltip is hidden.

By using Tooltip events, you can create interactive and dynamic Tooltips that respond to user actions and changes in the state of the Tooltip. This allows for a more engaging user experience and provides opportunities to display relevant information based on the user's interaction with the Tooltip.