Stroyka Admin - eCommerce Dashboard Template

Basic Example #

Hover over the links below to see tooltips:

Example

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text . And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

<div class="card">
    <div class="card-body">
        Placeholder text to demonstrate some
        <a href="#" data-bs-toggle="tooltip" title="Default tooltip">inline links</a> with
        tooltips. This is now just filler, no killer. Content placed here just to mimic
        the presence of
        <a href="#" data-bs-toggle="tooltip" title="Another tooltip">real text</a>. And
        all that just to give you an idea of how tooltips would look when used in
        real-world situations. So hopefully you&#x27;ve now seen how
        <a href="#" data-bs-toggle="tooltip" title="Another one here too"
            >these tooltips on links</a
        >
        can work in practice, once you use them on
        <a href="#" data-bs-toggle="tooltip" title="The last tip!">your own</a> site or
        project.
    </div>
</div>

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.

Example

<div class="row g-3">
    <div class="col-auto">
        <button
            type="button"
            class="btn btn-primary"
            data-bs-toggle="tooltip"
            data-bs-placement="left"
            title="Tooltip on left"
        >
            Tooltip on left
        </button>
    </div>
    <div class="col-auto">
        <button
            type="button"
            class="btn btn-primary"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            title="Tooltip on top"
        >
            Tooltip on top
        </button>
    </div>
    <div class="col-auto">
        <button
            type="button"
            class="btn btn-primary"
            data-bs-toggle="tooltip"
            data-bs-placement="bottom"
            title="Tooltip on bottom"
        >
            Tooltip on bottom
        </button>
    </div>
    <div class="col-auto">
        <button
            type="button"
            class="btn btn-primary"
            data-bs-toggle="tooltip"
            data-bs-placement="right"
            title="Tooltip on right"
        >
            Tooltip on right
        </button>
    </div>
</div>

And with custom HTML added:

Example

<button
    type="button"
    class="btn btn-secondary"
    data-bs-toggle="tooltip"
    data-bs-html="true"
    title="&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;"
>
    Tooltip with HTML
</button>

Tooltips

Basic Example #