Basecoat UI MCP

# Tooltip Component Usage ## Overview The tooltip component displays informative text when users hover over, focus on, or tap an element. Tooltips provide additional context without cluttering the interface. They use the `data-tooltip` attribute and JavaScript for positioning and display. ## JavaScript Requirements ### Required Scripts ```html <!-- Include Basecoat CSS and JavaScript --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@latest/dist/basecoat.cdn.min.css"> <script src="https://cdn.jsdelivr.net/npm/basecoat-css@latest/dist/js/basecoat.min.js" defer></script> <script src="https://cdn.jsdelivr.net/npm/basecoat-css@latest/dist/js/tooltip.min.js" defer></script> ``` ## HTML Structure ### Basic Tooltip ```html <button class="btn" data-tooltip="This is a tooltip"> Hover me </button> ``` ### Tooltip Positions ```html <!-- Top (default) --> <button class="btn" data-tooltip="Top tooltip">Top</button> <!-- Bottom --> <button class="btn" data-tooltip="Bottom tooltip" data-side="bottom">Bottom</button> <!-- Left --> <button class="btn" data-tooltip="Left tooltip" data-side="left">Left</button> <!-- Right --> <button class="btn" data-tooltip="Right tooltip" data-side="right">Right</button> ``` ### Tooltip Alignment ```html <!-- Start aligned --> <button class="btn" data-tooltip="Start aligned tooltip" data-align="start">Start</button> <!-- Center aligned (default) --> <button class="btn" data-tooltip="Center aligned tooltip" data-align="center">Center</button> <!-- End aligned --> <button class="btn" data-tooltip="End aligned tooltip" data-align="end">End</button> ``` ## Implementation Examples ### Icon with Tooltip ```html <button class="btn-icon-outline" data-tooltip="Settings" aria-label="Settings"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path> <circle cx="12" cy="12" r="3"></circle> </svg> </button> ``` ### Toolbar with Tooltips ```html <div class="flex gap-1 p-1 border rounded-lg" role="toolbar" aria-label="Text formatting"> <button class="btn-icon-ghost" data-tooltip="Bold (Ctrl+B)" aria-label="Bold"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"></path> </svg> </button> <button class="btn-icon-ghost" data-tooltip="Italic (Ctrl+I)" aria-label="Italic"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <line x1="19" x2="10" y1="4" y2="4"></line> <line x1="14" x2="5" y1="20" y2="20"></line> <line x1="15" x2="9" y1="4" y2="20"></line> </svg> </button> <button class="btn-icon-ghost" data-tooltip="Underline (Ctrl+U)" aria-label="Underline"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M6 4v6a6 6 0 0 0 12 0V4"></path> <line x1="4" x2="20" y1="20" y2="20"></line> </svg> </button> <div class="w-px h-6 bg-border mx-1 self-center"></div> <button class="btn-icon-ghost" data-tooltip="Align left" aria-label="Align left"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <line x1="21" x2="3" y1="6" y2="6"></line> <line x1="15" x2="3" y1="12" y2="12"></line> <line x1="17" x2="3" y1="18" y2="18"></line> </svg> </button> <button class="btn-icon-ghost" data-tooltip="Align center" aria-label="Align center"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <line x1="21" x2="3" y1="6" y2="6"></line> <line x1="18" x2="6" y1="12" y2="12"></line> <line x1="19" x2="5" y1="18" y2="18"></line> </svg> </button> <button class="btn-icon-ghost" data-tooltip="Align right" aria-label="Align right"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <line x1="21" x2="3" y1="6" y2="6"></line> <line x1="21" x2="9" y1="12" y2="12"></line> <line x1="21" x2="7" y1="18" y2="18"></line> </svg> </button> </div> ``` ### Form Field Help Tooltip ```html <div class="grid gap-3"> <div class="flex items-center gap-2"> <label for="username" class="label">Username</label> <span class="text-muted-foreground cursor-help" data-tooltip="Username must be 3-20 characters and contain only letters, numbers, and underscores" data-side="right" > <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="12" cy="12" r="10"></circle> <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path> <path d="M12 17h.01"></path> </svg> </span> </div> <input type="text" id="username" class="input" placeholder="Enter username"> </div> ``` ### Navigation with Tooltips ```html <nav class="flex flex-col gap-1 p-2 border rounded-lg w-fit"> <a href="/home" class="btn-icon-ghost" data-tooltip="Home" data-side="right" aria-label="Home"> <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> </svg> </a> <a href="/search" class="btn-icon-ghost" data-tooltip="Search" data-side="right" aria-label="Search"> <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="11" cy="11" r="8"></circle> <path d="m21 21-4.3-4.3"></path> </svg> </a> <a href="/messages" class="btn-icon-ghost" data-tooltip="Messages" data-side="right" aria-label="Messages"> <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> </svg> </a> <a href="/settings" class="btn-icon-ghost" data-tooltip="Settings" data-side="right" aria-label="Settings"> <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path> <circle cx="12" cy="12" r="3"></circle> </svg> </a> </nav> ``` ### Disabled Button with Tooltip ```html <span data-tooltip="You don't have permission to perform this action" data-side="bottom"> <button class="btn" disabled> Submit </button> </span> ``` ### Truncated Text with Tooltip ```html <div class="max-w-[200px] truncate" data-tooltip="This is a very long text that gets truncated and needs a tooltip to show the full content" > This is a very long text that gets truncated and needs a tooltip to show the full content </div> ``` ## JavaScript Events ### Initialization Event ```javascript document.addEventListener('basecoat:initialized', function(e) { if (e.target.matches('[data-tooltip]')) { console.log('Tooltip initialized'); } }); ``` ### Dynamic Tooltips ```javascript // Add tooltip dynamically function addTooltip(element, text, options = {}) { element.setAttribute('data-tooltip', text); if (options.side) { element.setAttribute('data-side', options.side); } if (options.align) { element.setAttribute('data-align', options.align); } } // Update tooltip text function updateTooltip(element, text) { element.setAttribute('data-tooltip', text); } // Remove tooltip function removeTooltip(element) { element.removeAttribute('data-tooltip'); element.removeAttribute('data-side'); element.removeAttribute('data-align'); } ``` ### Conditional Tooltips ```javascript // Show tooltip only when text is truncated document.querySelectorAll('.truncate').forEach(element => { if (element.scrollWidth > element.clientWidth) { element.setAttribute('data-tooltip', element.textContent); } }); ``` ## Accessibility Guidelines ### ARIA Requirements - Always provide an `aria-label` for icon-only buttons - Use tooltips to supplement, not replace, accessible labels - Don't use tooltips for essential information ### Keyboard Accessibility - Tooltips should appear on focus, not just hover - The tooltip JavaScript handles this automatically ### Example with Proper Accessibility ```html <!-- Icon button with tooltip AND aria-label --> <button class="btn-icon-outline" data-tooltip="Delete item" aria-label="Delete item" > <svg class="size-4" aria-hidden="true"><!-- trash icon --></svg> </button> <!-- Info icon with tooltip --> <button class="inline-flex items-center justify-center text-muted-foreground" data-tooltip="Additional information about this field" aria-label="Help" > <svg class="size-4" aria-hidden="true"><!-- info icon --></svg> </button> ``` ## Best Practices ### When to Use Tooltips - Explain icon-only buttons - Provide keyboard shortcuts - Show full text for truncated content - Add context to form fields - Explain why something is disabled ### When to Avoid Tooltips - For essential information (users might miss it) - For long content (use a popover instead) - On touch-only devices without hover - For frequently accessed information ### Content Guidelines - Keep text short (1-2 sentences max) - Use action-oriented language - Include keyboard shortcuts when relevant - Avoid redundant information ### Visual Guidelines - Position tooltips to avoid obscuring related content - Ensure adequate contrast - Don't trigger tooltips too quickly (avoid flashing) - Consider mobile alternatives ## Input Group Integration ```html <div class="relative"> <input type="password" class="input pr-9" placeholder="Enter password"> <div class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4" data-tooltip="Password must be at least 8 characters long" > <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 16v-4"></path> <path d="M12 8h.01"></path> </svg> </div> </div> ``` ## Common Patterns ### Copy Button with Status Tooltip ```html <button class="btn-icon-ghost" data-tooltip="Copy to clipboard" aria-label="Copy to clipboard" onclick="copyToClipboard(this)" > <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect> <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path> </svg> </button> <script> async function copyToClipboard(button) { const text = '...'; // text to copy await navigator.clipboard.writeText(text); const originalTooltip = button.getAttribute('data-tooltip'); button.setAttribute('data-tooltip', 'Copied!'); setTimeout(() => { button.setAttribute('data-tooltip', originalTooltip); }, 2000); } </script> ``` ### Keyboard Shortcut Hints ```html <button class="btn" data-tooltip="Save (Ctrl+S)"> Save </button> <button class="btn-outline" data-tooltip="Cancel (Esc)"> Cancel </button> <button class="btn-icon-ghost" data-tooltip="Search (Ctrl+K)" aria-label="Search"> <svg class="size-4"><!-- search icon --></svg> </button> ```