Bootstrap Tooltips

A Tooltip is a small information box that appears when a user interacts with an element such as a button, link, or icon.

Tooltips are commonly used to:

• Explain buttons.
• Describe icons.
• Provide additional information.
• Show short instructions.
• Display helpful hints.

A basic Bootstrap Tooltip uses the data-bs-toggle="tooltip" attribute and a title attribute.

<button
type="button"
class="btn btn-primary"
data-bs-toggle="tooltip"
title="This is a tooltip">

Hover over me

</button>

The data-bs-toggle="tooltip" attribute tells Bootstrap that the element should behave as a Tooltip trigger.

<button
data-bs-toggle="tooltip"
title="Hello">

Hover Me

</button>

Without proper initialization, the Tooltip will not automatically appear just because the attribute is present.

The title attribute contains the text that Bootstrap displays inside the Tooltip.

<button
type="button"
data-bs-toggle="tooltip"
title="Save your document">

Save

</button>

Bootstrap Tooltips must be initialized with JavaScript.

const tooltipTriggerList =
document.querySelectorAll(
'[data-bs-toggle="tooltip"]'
);

const tooltipList =
[...tooltipTriggerList].map(
tooltipTriggerEl =>
new bootstrap.Tooltip(tooltipTriggerEl)
);

This code finds all elements containing data-bs-toggle="tooltip" and creates a Bootstrap Tooltip for each one.

Tooltips can be used with links as well as buttons.

<a
href="#"
data-bs-toggle="tooltip"
title="Open the home page">

Home

</a>

Tooltips are especially useful for icons because icons may not always be obvious to every user.

<button
type="button"
class="btn btn-info"
data-bs-toggle="tooltip"
title="Information">

ℹ️

</button>

Bootstrap supports different Tooltip positions. Common positions are:

• Top
• Bottom
• Left
• Right

The default Tooltip placement is generally above the element when there is enough available space.

Use data-bs-placement="top" to request a Tooltip above the element.

<button
class="btn btn-primary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Tooltip on top">

Top

</button>

Use data-bs-placement="bottom" to request a Tooltip below the element.

<button
class="btn btn-success"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="Tooltip on bottom">

Bottom

</button>

Use data-bs-placement="left" to request a Tooltip on the left side.

<button
class="btn btn-warning"
data-bs-toggle="tooltip"
data-bs-placement="left"
title="Tooltip on left">

Left

</button>

Use data-bs-placement="right" to request a Tooltip on the right side.

<button
class="btn btn-danger"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Tooltip on right">

Right

</button>

Each Tooltip can contain different text.

<button
class="btn btn-primary"
data-bs-toggle="tooltip"
title="Add a new student">

Add Student

</button>

<button
class="btn btn-success"
data-bs-toggle="tooltip"
title="Save student details">

Save

</button>

A Tooltip can also be attached to an image.

<img
src="student.jpg"
alt="Student"
data-bs-toggle="tooltip"
title="Student Profile"
width="100">

When using images, always provide meaningful alt text for accessibility.

Disabled elements such as disabled buttons generally cannot trigger interaction-based Tooltips themselves.

A common solution is to place the disabled element inside a wrapper such as a span and attach the Tooltip to the wrapper.

<span
data-bs-toggle="tooltip"
title="This option is unavailable">

    <button
    class="btn btn-secondary"
    disabled>

    Disabled

    </button>

</span>

Bootstrap Tooltips can be configured to allow HTML content, but this should be done carefully.

const tooltip =
new bootstrap.Tooltip(
element,
{
html: true
}
);

If HTML content is accepted from users or an untrusted source, it can create security risks. Trusted and properly sanitized content should be used.

Bootstrap Tooltips can be configured with a delay before they appear or disappear.

const tooltip =
new bootstrap.Tooltip(
element,
{
delay: {
show: 500,
hide: 100
}
}
);

The values are specified in milliseconds.

A Tooltip can be triggered using different interactions such as hover, focus, or click.

const tooltip =
new bootstrap.Tooltip(
element,
{
trigger: 'hover'
}
);

Bootstrap supports trigger values such as click, hover, focus, and combinations of them.

Tooltips can be initialized using JavaScript by selecting an element.

const button =
document.querySelector('#myButton');

const tooltip =
new bootstrap.Tooltip(button);

This method is useful when Tooltip configuration needs to be controlled through JavaScript.

When a page contains several Tooltips, you can initialize all matching elements at once.

const tooltipTriggerList =
document.querySelectorAll(
'[data-bs-toggle="tooltip"]'
);

const tooltipList =
[...tooltipTriggerList].map(
tooltipTriggerEl =>
new bootstrap.Tooltip(
tooltipTriggerEl
)
);

This is a common pattern for pages containing many Tooltip triggers.

Tooltips can provide additional information for navigation buttons or icons.

<a
href="#"
class="btn btn-outline-primary"
data-bs-toggle="tooltip"
title="Open Dashboard">

Dashboard

</a>

Tooltips are useful in admin dashboards where icons represent actions such as edit, delete, view, and settings.

<button
class="btn btn-warning"
data-bs-toggle="tooltip"
title="Edit Student">

✏️

</button>

<button
class="btn btn-danger"
data-bs-toggle="tooltip"
title="Delete Student">

🗑️

</button>

Tooltips should provide helpful information without making the interface difficult to use.

• Use meaningful Tooltip text.
• Do not put essential information only inside a Tooltip.
• Make important controls accessible using keyboard interaction.
• Provide accessible names for icon-only buttons.
• Do not depend only on hover for important information.

Tooltips and Popovers are both Bootstrap components, but they serve different purposes.

Avoid these common mistakes when working with Bootstrap Tooltips:

• Forgetting to initialize Tooltips.
• Forgetting the data-bs-toggle="tooltip" attribute.
• Using unclear Tooltip text.
• Using Tooltips for essential information.
• Relying only on hover interactions.
• Using very long Tooltip messages.
• Adding too many Tooltips to one page.
• Using unsanitized HTML content inside Tooltips.

Tooltips are especially useful with icon-only buttons.

<button
class="btn btn-primary"
data-bs-toggle="tooltip"
title="Settings">

⚙️

</button>

The Tooltip provides additional information about what the icon represents.

In a student management system, Tooltips can explain actions without making the interface crowded.

<button
class="btn btn-info"
data-bs-toggle="tooltip"
title="View Student Profile">

View

</button>

<button
class="btn btn-warning"
data-bs-toggle="tooltip"
title="Edit Student Information">

Edit

</button>

<button
class="btn btn-danger"
data-bs-toggle="tooltip"
title="Delete Student">

Delete

</button>

JavaScript configuration gives you more control over Tooltip behavior.

const elements =
document.querySelectorAll(
'[data-bs-toggle="tooltip"]'
);

elements.forEach(function(element){

    new bootstrap.Tooltip(
        element,
        {
            placement: 'bottom',
            delay: {
                show: 300,
                hide: 100
            }
        }
    );

});

This example requests a bottom placement and adds a small delay. Bootstrap may still adjust placement when necessary to keep the Tooltip visible.

The following example creates a small action area with Tooltips.

<div class="btn-group">

    <button
    class="btn btn-primary"
    data-bs-toggle="tooltip"
    title="View details">

    👁️

    </button>

    <button
    class="btn btn-warning"
    data-bs-toggle="tooltip"
    title="Edit record">

    ✏️

    </button>

    <button
    class="btn btn-danger"
    data-bs-toggle="tooltip"
    title="Delete record">

    🗑️

    </button>

</div>

This complete example demonstrates multiple Bootstrap Tooltips with different placements and useful action labels.

<div class="d-flex gap-2">

    <button
    class="btn btn-primary"
    data-bs-toggle="tooltip"
    data-bs-placement="top"
    title="View dashboard">

    Dashboard

    </button>

    <button
    class="btn btn-warning"
    data-bs-toggle="tooltip"
    data-bs-placement="bottom"
    title="Edit student">

    Edit

    </button>

    <button
    class="btn btn-danger"
    data-bs-toggle="tooltip"
    data-bs-placement="right"
    title="Delete student">

    Delete

    </button>

</div>


<script>

const tooltipTriggerList =
document.querySelectorAll(
'[data-bs-toggle="tooltip"]'
);

const tooltipList =
[...tooltipTriggerList].map(
tooltipTriggerEl =>
new bootstrap.Tooltip(
tooltipTriggerEl
)
);

</script>