Bootstrap 4 Tooltip: Markup, Initialization and Placement

Bootstrap 4 tooltips display short contextual help. They require Bootstrap's JavaScript tooltip plugin and its positioning dependency. Keep tooltip text concise and do not rely on hover alone for critical information.

Tooltip Markup Top ↑

<button type="button"
        class="btn btn-secondary"
        data-toggle="tooltip"
        data-placement="top"
        title="Tooltip text">
  Hover or focus
</button>

Initialize Tooltips Top ↑

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

Placement Top ↑

Common values include top, right, bottom and left.

This is Bootstrap Tooltip, which is separate from jQuery UI Tooltip.

Additional Original Learning Routes Top ↑

getJSON.php

Continue Learning jQuery

jQuery Tutorial Home jQuery Basic Structure Functions Used with jQuery jQuery Events jQuery Effects jQuery UI jQuery Exercises

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

This article is written by plus2net.com team.

plus2net.com