bootstrap 4 tooltip

Bootstrap 4 Tooltip

To use the Bootstrap 4 tooltip, you need to follow these steps:

1. Include the Bootstrap CSS and JavaScript files in your HTML document. You can either download them and host them locally or use a CDN. Here's an example using the CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

1. Add the data-toggle and title attributes to the element you want to have a tooltip. The data-toggle attribute should have the value "tooltip", and the title attribute should contain the text you want to display in the tooltip. Here's an example:

<button type="button" class="btn btn-primary" data-toggle="tooltip" title="This is a tooltip">Hover over me</button>

1. Initialize the tooltip using JavaScript. Add the following script at the end of your HTML document, just before the closing </body> tag:

<script>
  $(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });
</script>

That's it! Now, when you hover over the element with the tooltip, the tooltip will be displayed.

Note: Make sure you have the jQuery library included before the Bootstrap JavaScript file, as the tooltip functionality relies on jQuery.