Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - tooltip
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
<div class="do-dont-grid"> <div class="do-card"> <div class="do-title">Do</div> <p>Use Tooltips to provide additional helpful information or guidance.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use Tooltips for information essential to task completion.</p> </div> </div> <div class="do-dont-grid"> <div class="do-card"> <div class="do-title">Do</div> <p>Use Tooltips only on focusable elements.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use Tooltips on non-focusable elements, like icons and disabled buttons.</p> </div> </div> <div class="do-dont-grid"> <div class="do-card"> <div class="do-title">Do</div> <p>Include only text in Tooltip content.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't include links in Tooltip content.</p> </div> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div> <script> // Wait for components to load window.addEventListener('load', function() { const { Tooltip, Button, Box, Anchor, Text, Stack, InformationIcon, useTooltipState } = window.PasteComponents; // Basic Tooltip Example const basicTooltipContainer = document.getElementById('basic-tooltip'); if (basicTooltipContainer) { const button = document.createElement('button'); button.textContent = '✊ Action'; button.className = 'twilio-paste-button twilio-paste-button--primary'; button.setAttribute('data-tooltip', 'Black Lives Matter. We stand with the Black community.'); button.addEventListener('mouseenter', showTooltip); button.addEventListener('mouseleave', hideTooltip); button.addEventListener('focus', showTooltip); button.addEventListener('blur', hideTooltip); basicTooltipContainer.appendChild(button); } // Placement Tooltip Example const placementTooltipContainer = document.getElementById('placement-tooltip'); if (placementTooltipContainer) { const button = document.createElement('button'); button.textContent = 'Open Tooltip'; button.className = 'twilio-paste-button twilio-paste-button--primary'; button.setAttribute('data-tooltip', 'Welcome to Paste!'); button.setAttribute('data-placement', 'right'); button.addEventListener('mouseenter', showTooltip); button.addEventListener('mouseleave', hideTooltip); button.addEventListener('focus', showTooltip); button.addEventListener('blur', hideTooltip); placementTooltipContainer.appendChild(button); } // Focusable Element Example const focusableTooltipContainer = document.getElementById('focusable-tooltip'); if (focusableTooltipContainer) { const container = document.createElement('div'); container.className = 'flex-container'; const text = document.createElement('span'); text.textContent = 'Social Security Number'; const anchor = document.createElement('a'); anchor.href = 'https://paste.twilio.design'; anchor.setAttribute('data-tooltip', 'Your nine-digit Social Security number is your first and continuous connection with Social Security.'); anchor.innerHTML = 'ℹ'; // Info icon anchor.style.marginLeft = '8px'; anchor.addEventListener('mouseenter', showTooltip); anchor.addEventListener('mouseleave', hideTooltip); anchor.addEventListener('focus', showTooltip); anchor.addEventListener('blur', hideTooltip); container.appendChild(text); container.appendChild(anchor); focusableTooltipContainer.appendChild(container); } // State Hook Example const stateHookContainer = document.getElementById('state-hook-tooltip'); if (stateHookContainer) { const container = document.createElement('div'); container.style.display = 'flex'; container.style.gap = '12px'; container.style.alignItems = 'center'; const targetButton = document.createElement('button'); targetButton.textContent = 'Hover me'; targetButton.className = 'twilio-paste-button twilio-paste-button--primary'; targetButton.id = 'target-button'; const showButton = document.createElement('button'); showButton.textContent = 'Show tooltip'; showButton.className = 'twilio-paste-button twilio-paste-button--secondary'; showButton.onclick = () => showTooltipProgrammatically('target-button'); const hideButton = document.createElement('button'); hideButton.textContent = 'Hide tooltip'; hideButton.className = 'twilio-paste-button twilio-paste-button--secondary'; hideButton.onclick = () => hideTooltipProgrammatically('target-button'); container.appendChild(targetButton); container.appendChild(showButton); container.appendChild(hideButton); stateHookContainer.appendChild(container); } // Tooltip functionality let currentTooltip = null; function showTooltip(event) { const element = event.target; const tooltipText = element.getAttribute('data-tooltip'); const placement = element.getAttribute('data-placement') || 'top'; if (!tooltipText) return; hideTooltip(); const tooltip = document.createElement('div'); tooltip.className = 'twilio-paste-tooltip'; tooltip.textContent = tooltipText; tooltip.style.cssText = ` position: absolute; background: #121C2D; color: white; padding: 8px 12px; border-radius: 4px; font-size: 14px; z-index: 1000; max-width: 200px; word-wrap: break-word; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); `; document.body.appendChild(tooltip); const rect = element.getBoundingClientRect(); const tooltipRect = tooltip.getBoundingClientRect(); let top, left; switch (placement) { case 'right': top = rect.top + (rect.height - tooltipRect.height) / 2; left = rect.right + 8; break; case 'bottom': top = rect.bottom + 8; left = rect.left + (rect.width - tooltipRect.width) / 2; break; case 'left': top = rect.top + (rect.height - tooltipRect.height) / 2; left = rect.left - tooltipRect.width - 8; break; default: // top top = rect.top - tooltipRect.height - 8; left = rect.left + (rect.width - tooltipRect.width) / 2; } tooltip.style.top = Math.max(8, top) + 'px'; tooltip.style.left = Math.max(8, Math.min(window.innerWidth - tooltipRect.width - 8, left)) + 'px'; currentTooltip = tooltip; } function hideTooltip() { if (currentTooltip) { currentTooltip.remove(); currentTooltip = null; } } function showTooltipProgrammatically(targetId) { const element = document.getElementById(targetId); if (element) { element.setAttribute('data-tooltip', 'This tooltip was shown programmatically!'); showTooltip({ target: element }); } } function hideTooltipProgrammatically(targetId) { hideTooltip(); } }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">