aConic Admin Documentation - v1.0

Version - 1.0.0 Help

Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.
Bootstrap Tooltips documentation

Examples

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

                                          
    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
        Tooltip on top
    </button>
    
    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
        Tooltip on right
    </button>

    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
        Tooltip on bottom
    </button>

    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
        Tooltip on left
    </button> 
                                      
                                          
    // INITIALIZATION POPOVER
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    }) 
                                      

And with custom HTML added:

                            
    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-html="true" title="Tooltip with HTML">
        Tooltip with HTML
    </button>