#### Default

Link

    <a href="javascript:void(0);" class="btn btn-primary mb-3 rounded bs-tooltip" title="Tooltip using ANCHOR tag">
        Link
    </a>
    <button type="button" class="btn btn-success mb-3 rounded bs-tooltip" title="Tooltip using BUTTON tag">
        Button
    </button>

#### Placement

`data-placement="top"`

`data-placement="right"`

`data-placement="bottom"`

`data-placement="left"`

    <!-- TOP -->
    <button type="button" class="btn btn-info mb-2 rounded bs-tooltip" data-placement="top" title="Tooltip on top">
        Tooltip on top
    </button>

    <!-- RIGHT -->
    <button type="button" class="btn btn-danger mb-2 rounded bs-tooltip" data-placement="right" title="Tooltip on right">
        Tooltip on right
    </button>

    <!-- BOTTOM -->
    <button type="button" class="btn btn-warning mb-2 rounded bs-tooltip" data-placement="bottom" title="Tooltip on bottom">
        Tooltip on bottom
    </button>

    <!-- LEFT -->
    <button type="button" class="btn btn-secondary mb-2 rounded bs-tooltip" data-placement="left" title="Tooltip on left">
        Tooltip on left
    </button>

#### HTML

    <button type="button" class="btn btn-dark rounded bs-tooltip" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
        Tooltip with HTML
    </button>

#### Options

`data-trigger="click"`

`Default`

`data-delay="1000"`

`data-animation="false"`

    <!-- On Click -->
    <button type="button" class="mt-1 btn btn-primary bs-tooltip mb-4 ml-2 mr-2 rounded" data-trigger="click" title="On Click">
        On Click
    </button>

    <!-- On Focus -->
    <button type="button" class="mt-1 btn btn-secondary bs-tooltip mb-4 ml-2 mr-2 rounded" title="On Focus">
        On Focus
    </button>

    <!-- Delay -->
    <button type="button" class="mt-1 btn btn-info bs-tooltip mb-4 ml-2 mr-2 rounded" data-delay="1000" title="Delay 1s">
        Delay
    </button>

    <!-- Disabled Animation -->
    <button type="button" class="mt-1 btn btn-dark bs-tooltip mb-4 ml-2 mr-2 rounded" data-animation="false" title="Disable Animation">
        Disabled Animation
    </button>

#### Colors

Change tooltip template html as shown below to add color scheme.

    <!-- Primary -->
    <button type="button" class="mt-1 btn btn-primary primary mb-4 ml-2 mr-2 rounded" data-container="body" data-placement="top" data-html="true"> Primary </button>

    $('.primary').tooltip({
        template: '<div class="tooltip tooltip-primary" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
        title: "Primary"
    });