We couldn’t find anything that matched your searched term

  • PAGES

  • COMPONENTS

  • Brand guidelines

  • Insights

Documentation

Components

It displays a label explaining the function of a user interface element or feature when the user hover over, focus on, or tap an element.

Example
<button
  type="button"
  class="btn btn-primary tooltip-demo"
  data-bs-toggle="tooltip"
  data-bs-placement="top"
  title="Tooltip on top"
>
  Tooltip on top
</button>
<button
  type="button"
  class="btn btn-primary tooltip-demo"
  data-bs-toggle="tooltip"
  data-bs-placement="right"
  title="Tooltip on right"
>
  Tooltip on right
</button>
<button
  type="button"
  class="btn btn-primary tooltip-demo"
  data-bs-toggle="tooltip"
  data-bs-placement="bottom"
  title="Tooltip on bottom"
>
  Tooltip on bottom
</button>
<button
  type="button"
  class="btn btn-primary tooltip-demo"
  data-bs-toggle="tooltip"
  data-bs-placement="left"
  title="Tooltip on left"
>
  Tooltip on left
</button>
<!-- script to add after loading all required js dependencies (axaDesignSystemLib/popper) -->

<script>
  // Enable tooltips everywhere
  var tooltipTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="tooltip"]')
  );
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });
</script>