Interactive demo

Just put this to any tag data-toggle="tooltip" title="Default tooltip"
                                        
                                            <button type="button" class="btn btn-secondary btn-outline" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
                                            <button type="button" class="btn btn-secondary btn-outline" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</button>
                                            <button type="button" class="btn btn-secondary btn-outline" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</button>
                                            <button type="button" class="btn btn-secondary btn-outline" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>                                            
                                        
                                    

Interactive demo

Just put this to any tag data-container="body" title="Popover title" data-toggle="popover" data-placement="top" data-content="..."
                                    
                                        <button type="button" class="btn btn-secondary" data-container="body" title="Popover title" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                            Popover on top
                                        </button>
                                        <button type="button" class="btn btn-secondary" data-container="body" title="Popover title" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                            Popover on right
                                        </button>
                                        <button type="button" class="btn btn-secondary" data-container="body" title="Popover title" data-toggle="popover" data-placement="bottom" data-content="Vivamus
                                            sagittis lacus vel augue laoreet rutrum faucibus.">
                                            Popover on bottom
                                        </button>
                                        <button type="button" class="btn btn-secondary" data-container="body" title="Popover title" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                            Popover on left
                                        </button>                                        
                                    
                                
All Rights Reserved by Ample admin. Designed and Developed by WrapPixel.