Tooltip Examples - Form Widgets

1. Basic Usage

Uses the standard title attribute. Hover or focus to see.

HTML

<button class="fw-tooltip" title="Simple text tooltip">Hover Me</button>

2. Positioning

Tooltips can be positioned on any side using data-position.

HTML

<button class="fw-tooltip" data-position="top" title="...">Top</button>
<button class="fw-tooltip" data-position="right" title="...">Right</button>

3. Variants & HTML Content

Use data-variant for styling and data-content for HTML.

HTML

<button class="fw-tooltip" data-variant="error" title="Error...">Error</button>
<button class="fw-tooltip" data-content="<b>Bold</b> content">HTML</button>

4. Dynamic Content (AJAX)

Load content programmatically using setContent().

JavaScript

const btn = document.getElementById('ajax-btn');
const widget = FormWidgets.init(btn, 'Tooltip', {
    content: 'Loading...',
    position: 'right'
});

btn.addEventListener('mouseenter', () => {
    widget.setContent('<i class="fw-icon" data-icon="clock"></i> Loading...');
    
    // Simulate API call
    setTimeout(() => {
        widget.setContent('Data loaded successfully! <i class="fw-icon" data-icon="check"></i>');
        // Re-init icons in the new content
        FormWidgets.autoInit(); 
    }, 1000);
});