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

                                                        
                                                            <div class="d-md-flex align-items-center">
                                                                <button type="button" class="me-2 btn btn-light-info text-info d-flex align-items-center font-weight-medium" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                                                    <i data-feather="chevron-up" class="fill-white feather-sm"></i>
                                                                  Popover on top
                                                                </button>

                                                                <button type="button" class="me-2 btn btn-light-primary text-primary d-flex align-items-center font-weight-medium" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                                                    <i data-feather="chevron-right" class="fill-white feather-sm"></i>
                                                                  Popover on right
                                                                </button>

                                                                <button type="button" class="me-2 btn btn-light-success text-success d-flex align-items-center font-weight-medium" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                                                    <i data-feather="chevron-down" class="fill-white feather-sm"></i>
                                                                  Popover on bottom
                                                                </button>

                                                                <button type="button" class="me-2 btn btn-light-danger text-danger d-flex align-items-center font-weight-medium" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                                                    <i data-feather="chevron-left" class="fill-white feather-sm"></i>
                                                                  Popover on left
                                                                </button>
                                                            </div>