Layr
⌘K
Ctrl K
Design Systems
Pro
AI Designer
Account
Roadmap
Sign in
Grafana Saga - tooltip
Getting started
Grafana Saga
Grafana UI
Pro
Components
Alert
Badge
Card
Checkbox
Components Status
Field
File Dropzone
Filter Pill
Inline Field
Input
Interactive Table
Modal
Pagination
Plugin Signature
Radio Button
Radio Button Group
Select
Switch
Text
Text Link
Textarea
Toggletip
Tooltip
<div class="demo-section"> <div class="tooltip-container"> <button class="btn" tabindex="0">Hover me for Tooltip</button> <div class="tooltip" role="tooltip" aria-hidden="true">This is a tooltip</div> </div> </div> <h2>Usage</h2> <div class="usage-section"> <div class="do-section"> <h3>Do's</h3> <ul> <li>Provide supportive, explanatory text for icons (i.e. "search" as a label for a magnifying glass icon).</li> <li>Offer concise information about the intended use of an element.</li> <li>Allow tooltips to be triggered by keyboard navigation.</li> <li>Use arrows to indicate which element the tooltip relates to.</li> <li>Use tooltips consistently (i.e., all icon buttons have them, all tooltips are styled the same).</li> <li>Use ARIA tags when building tooltips to ensure they are accessible.</li> </ul> </div> <div class="dont-section"> <h3>Don'ts</h3> <ul> <li>Do not house information critical to a user's task completion in the tooltip.</li> <li>Do not duplicate information such as labels for calls to action, as this creates information pollution.</li> <li>Do not use interactive components within a tooltip.</li> <li>Do not force the user to dismiss the tooltip.</li> </ul> </div> </div> <h2>Variants</h2> <table> <thead> <tr> <th>Variants</th> <th>Purpose</th> </tr> </thead> <tbody> <tr> <td><strong>Info (aka default)</strong></td> <td>Provides contextual supportive information to the user</td> </tr> <tr> <td><strong>info-alt</strong></td> <td>Not sure on what this is</td> </tr> <tr> <td><strong>Error</strong></td> <td>Acts as inline validation</td> </tr> </tbody> </table> <div class="demo-section"> <div style="display: flex; gap: 16px;"> <div class="tooltip-container"> <button class="btn">Info Tooltip</button> <div class="tooltip">This is an info tooltip</div> </div> <div class="tooltip-container"> <button class="btn">Alt Tooltip</button> <div class="tooltip tooltip-alt">This is an alt tooltip</div> </div> <div class="tooltip-container"> <button class="btn">Error Tooltip</button> <div class="tooltip tooltip-error">This is an error tooltip</div> </div> </div> </div> <h2>Accessibility</h2> <ul> <li>Use ARIA tags when building tooltips to ensure they are accessible:</li> <li>Use <code>aria-labelledby</code> if the tooltip acts as a primary label (i.e., to name an IconButton action).</li> <li>Use <code>aria-describedby</code> if the tooltip acts as a supporting label (i.e., to provide additional information on an input).</li> <li>Tooltips must be visible when their trigger is tabbed to or focused on via keyboard navigation.</li> </ul> <h2>Formatting</h2> <h3>Anatomy</h3> <div class="anatomy-section"> <ol class="anatomy-list"> <li><strong>Trigger</strong> - The UI control users interact with to display tooltips.</li> <li><strong>Tip</strong> - The triangle piece that points to the trigger element.</li> <li><strong>Body</strong> - The container that houses the content of the tooltip.</li> </ol> </div> <h3>Placement</h3> <div class="placement-grid"> <div class="placement-item"> <strong>Auto:</strong> Displays tooltip on the side with most space available. <ul> <li>Auto-start: Aligns to the top of the trigger.</li> <li>Auto: Aligns to the center of the trigger.</li> <li>Auto-end: Aligns to the bottom of the trigger.</li> </ul> </div> <div class="placement-item"> <strong>Top:</strong> <ul> <li>Top-Left</li> <li>Top-Center</li> <li>Top-Right</li> </ul> </div> <div class="placement-item"> <strong>Bottom:</strong> <ul> <li>Bottom-Left</li> <li>Bottom-Center</li> <li>Bottom-Right</li> </ul> </div> <div class="placement-item"> <strong>Left:</strong> <ul> <li>Left-Top</li> <li>Left-Center</li> <li>Left-Bottom</li> </ul> </div> <div class="placement-item"> <strong>Right:</strong> <ul> <li>Right-Top</li> <li>Right-Center</li> <li>Right-Bottom</li> </ul> </div> </div> <h2>Content</h2> <h3>Main Elements</h3> <p><strong>Trigger</strong> - The UI control users interact with to display tooltips - standard <strong>info-circle icon</strong></p> <p><strong>Tip</strong> - The triangle piece that points to the trigger element.</p> <p><strong>Body</strong> - The container that houses the content of the tooltip.</p> <h2>Behaviors</h2> <h3>Triggers</h3> <ul> <li>Icons (commonly information icon)</li> <li>Buttons</li> <li>Links</li> </ul> <h3>User Interactions</h3> <p>Tooltips are triggered when the mouse hovers over or focuses on the UI trigger. The tooltip persists as long as the mouse remains over the active container or the UI trigger, or there is focus on the active container or UI trigger. The tooltip is dismissed by hovering away or moving focus to another element.</p> <h2>Related</h2> <p>If interactive elements are needed, consider using a <strong>ToggleTip</strong>.</p> <h3>Further Reading & Sources</h3> <div class="related-links"> <a href="https://inclusive-components.design/tooltips-toggletips/" target="_blank">Inclusive Components; Tooltips and Toggletips</a> <a href="https://www.nngroup.com/articles/tooltip-guidelines/" target="_blank">NNG; Tooltip Guidelines</a> <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1" target="_blank">Using the aria-describedby property</a> <a href="https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/" target="_blank">Providing Accessible Names and Descriptions</a> </div> </div> <script> document.querySelectorAll('.tooltip-container').forEach(container => { const trigger = container.querySelector('.btn'); const tooltip = container.querySelector('.tooltip'); trigger.addEventListener('mouseenter', () => { tooltip.style.opacity = '1'; tooltip.style.visibility = 'visible'; tooltip.setAttribute('aria-hidden', 'false'); }); trigger.addEventListener('mouseleave', () => { tooltip.style.opacity = '0'; tooltip.style.visibility = 'hidden'; tooltip.setAttribute('aria-hidden', 'true'); }); trigger.addEventListener('focus', () => { tooltip.style.opacity = '1'; tooltip.style.visibility = 'visible'; tooltip.setAttribute('aria-hidden', 'false'); }); trigger.addEventListener('blur', () => { tooltip.style.opacity = '0'; tooltip.style.visibility = 'hidden'; tooltip.setAttribute('aria-hidden', 'true'); }); }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">