<!-- Tooltips -->
<div class="col-lg-12">
    <div class="card">
        <h5 class="card-header">Tooltips</h5>
        <div class="card-body">
            <div class="small fw-medium">Directions</div>
            <div class="row demo-vertical-spacing">

                <div class="col">
                    <button type="button" class="btn btn-outline-secondary"
                            data-bs-toggle="tooltip"
                            data-bs-placement="right"
                            data-bs-html="true"
                            title="<i class='icon-base bx bx-trending-up icon-xs'></i> Tooltip on right">
                        Right
                    </button>
                </div>

                <div class="col">
                    <button type="button" class="btn btn-outline-secondary"
                            data-bs-toggle="tooltip"
                            data-bs-placement="top"
                            data-bs-html="true"
                            title="<i class='icon-base bx bx-bell icon-xs'></i> Tooltip on top">
                        Top
                    </button>
                </div>

                <div class="col">
                    <button type="button" class="btn btn-outline-secondary"
                            data-bs-toggle="tooltip"
                            data-bs-placement="bottom"
                            data-bs-html="true"
                            title="<i class='icon-base bx bx-heart icon-xs'></i> Tooltip on bottom">
                        Bottom
                    </button>
                </div>

                <div class="col">
                    <button type="button" class="btn btn-outline-secondary"
                            data-bs-toggle="tooltip"
                            data-bs-placement="left"
                            data-bs-html="true"
                            title="<i class='icon-base bx bx-dollar icon-xs'></i> Tooltip on left">
                        Left
                    </button>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- /Tooltips -->

            

<!-- Popovers -->
<div class="col-lg-12">
    <div class="card">
        <h5 class="card-header">Popovers</h5>
        <div class="card-body">
            <div class="small fw-medium">Directions</div>
            <div class="row demo-vertical-spacing">

                <div class="col">
                    <button type="button" class="btn btn-outline-secondary text-nowrap"
                            data-bs-toggle="popover"
                            data-bs-placement="right"
                            data-bs-html="true"
                            title="Popover Title"
                            data-bs-content="<p>This is a very beautiful popover, show some love.</p>
                            <div class='d-flex justify-content-between'>
                                <button type='button' class='btn btn-sm btn-label-secondary'>Skip</button>
                                <button type='button' class='btn btn-sm btn-outline-secondary'>Read More</button>
                            </div>">
                        Popover on right
                    </button>
                </div>

                <!-- Repeat for top / bottom / left -->

            </div>
        </div>
    </div>
</div>
<!-- /Popovers -->