<h2 class="section-title no-margin-top">Basic Tooltip</h2>

<button class="btn btn-default" data-bs-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button class="btn btn-default" data-bs-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button class="btn btn-default" data-bs-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button class="btn btn-default" data-bs-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>


<h3>With Color</h3>
<button
    class="btn btn-primary"

    data-bs-toggle="tooltip"
    data-template="<div class="tooltip tooltip-primary" role="tooltip"><div class="tooltip-inner"></div></div>"
    data-placement="left"
    title="Tooltip Primary">
    Tooltip Primary
</button>

<button
    class="btn btn-info"

    data-bs-toggle="tooltip"
    data-template="<div class="tooltip tooltip-info" role="tooltip"><div class="tooltip-inner"></div></div>"
    data-placement="top"
    title="Tooltip Info">
    Tooltip Info
</button>

<button
    class="btn btn-danger"

    data-bs-toggle="tooltip"
    data-template="<div class="tooltip tooltip-danger" role="tooltip"><div class="tooltip-inner"></div></div>"
    data-placement="right"
    title="Tooltip Danger">
    Tooltip Danger
</button>

<button
    class="btn btn-warning"

    data-bs-toggle="tooltip"
    data-template="<div class="tooltip tooltip-warning" role="tooltip"><div class="tooltip-inner"></div></div>"
    data-placement="bottom"
    title="Tooltip Warning">
    Tooltip Warning
</button>

<button
    class="btn btn-success"

    data-bs-toggle="tooltip"
    data-template="<div class="tooltip tooltip-success" role="tooltip"><div class="tooltip-inner"></div></div>"
    data-placement="left"
    title="Tooltip Success">
    Tooltip Success
</button>

<button
    class="btn btn-royal"

    data-bs-toggle="tooltip"
    data-template="<div class="tooltip tooltip-royal" role="tooltip"><div class="tooltip-inner"></div></div>"
    data-placement="top"
    title="Tooltip Royal">
    Tooltip Royal
</button>

<button
    class="btn btn-default"

    data-bs-toggle="tooltip"
    data-template="<div class="tooltip tooltip-dark" role="tooltip"><div class="tooltip-inner"></div></div>"
    data-placement="right"
    title="Tooltip Dark">
    Tooltip Dark
</button>

<button
    class="btn btn-default"

    data-bs-toggle="tooltip"
    data-template="<div class="tooltip tooltip-light" role="tooltip"><div class="tooltip-inner"></div></div>"
    data-placement="bottom"
    title="Tooltip Light">
    Tooltip Light
</button>

<h2 class="section-title no-margin-top">Popover</h2>

<button class="btn btn-default" data-container="body" data-bs-toggle="popover" data-placement="left" title="Popover Title" data-content="Lorem ipsum dolor sit amet domi consectetur  adipisicing elit. Excepturi ab ipsum dolorem. Itaque qui intsuct distinctio.">
Popover on left
</button>

<button class="btn btn-default" data-container="body" data-bs-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>

<button class="btn btn-default" data-container="body" data-bs-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>

<button class="btn btn-default" data-container="body" data-bs-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>