<!-- Basic tooltip -->
            <button type="button" 
                    class="btn btn-secondary" 
                    data-bs-toggle="tooltip" 
                    data-bs-placement="top" 
                    data-bs-title="Tooltip on top">
            Hover over me
            </button>

            <!-- JavaScript initialization -->
            <script>
            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
            </script>

<!-- Placement options -->
            <button data-bs-placement="top">Top</button>
            <button data-bs-placement="right">Right</button>
            <button data-bs-placement="bottom">Bottom</button>
            <button data-bs-placement="left">Left</button>
            <button data-bs-placement="auto">Auto (default)</button>

<!-- HTML content in tooltip -->
            <button type="button" 
                    class="btn btn-info" 
                    data-bs-toggle="tooltip" 
                    data-bs-html="true" 
                    data-bs-title="<strong>HTML Content</strong><br><small>With multiple lines</small><br><span class='badge bg-success'>New</span>">
            HTML Tooltip
            </button>

            <!-- Using data-bs-template -->
            <button type="button" 
                    class="btn btn-secondary" 
                    data-bs-toggle="tooltip" 
                    data-bs-custom-class="custom-tooltip" 
                    data-bs-title="Custom styled tooltip">
            Custom Template
            </button>

Events

• show.bs.tooltip - Fires immediately when show is called
• shown.bs.tooltip - Fires when tooltip is visible
• hide.bs.tooltip - Fires immediately when hide is called
• hidden.bs.tooltip - Fires when tooltip is hidden
• inserted.bs.tooltip - Fires after tooltip content is added to DOM

// JavaScript initialization and usage

            // Initialize all tooltips
            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

            // Initialize specific tooltip with options
            const myTooltip = new bootstrap.Tooltip(document.getElementById('myTooltip'), {
            title: 'Custom tooltip',
            placement: 'right',
            trigger: 'hover',
            delay: {show: 300, hide: 100},
            html: true,
            customClass: 'custom-tooltip'
            })

            // Programmatic control
            myTooltip.show()     // Show tooltip
            myTooltip.hide()     // Hide tooltip
            myTooltip.toggle()   // Toggle tooltip
            myTooltip.dispose()  // Destroy tooltip

            // Event handling
            document.getElementById('myTooltip').addEventListener('shown.bs.tooltip', function () {
            console.log('Tooltip was shown')
            })

            // Update tooltip content dynamically
            function updateTooltip(elementId, newContent) {
            const tooltip = bootstrap.Tooltip.getInstance(document.getElementById(elementId));
            if (tooltip) {
                tooltip.setContent({'.tooltip-inner': newContent});
                tooltip.update();
            }
            }

            // Create tooltip dynamically
            function addTooltip(element, content, options = {}) {
            const defaultOptions = {
                placement: 'top',
                trigger: 'hover',
                html: true
            };
            
            const mergedOptions = {...defaultOptions, ...options};
            mergedOptions.title = content;
            
            return new bootstrap.Tooltip(element, mergedOptions);
            }