Tooltip
OrganismShort hint shown on hover and focus. Accessible via role="tooltip" + aria-describedby. Supports 4 placements, 3 themes, optional arrow, and configurable delay.
<%- include('modules/ui/Tooltip', { content: 'Top tooltip', placement: 'top', children: '' }) %>
<%- include('modules/ui/Tooltip', { content: 'Bottom tooltip', placement: 'bottom', children: '' }) %>
<%- include('modules/ui/Tooltip', { content: 'Right tooltip', placement: 'right', children: '' }) %>
Dark theme
Light theme
<%- include('modules/ui/Tooltip', { content: 'Default theme', theme: 'default', children: '' }) %>
<%- include('modules/ui/Tooltip', { content: 'Dark theme', theme: 'dark', children: '' }) %>
<%- include('modules/ui/Tooltip', { content: 'Light theme', theme: 'light', children: '' }) %><%- include('modules/ui/Tooltip', {
content: 'Has an arrow',
placement: 'top',
arrow: true,
children: ''
}) %>
Open settings
<%- include('modules/ui/Tooltip', {
content: 'Open settings',
placement: 'top',
theme: 'dark',
children: ''
}) %><%
var _id = locals.id || 'tooltip-' + Math.random().toString(36).substr(2, 9);
var _content = locals.content || '';
var _placement = locals.placement || 'top';
var _theme = locals.theme || 'default';
var _arrow = !!locals.arrow;
var _delay = typeof locals.delay === 'number' ? locals.delay : 0;
var _className = locals.className || '';
var themeClass = {
'default': 'bg-surface-overlay text-text-primary border border-border',
'dark': 'bg-gray-900 text-white border-transparent',
'light': 'bg-white text-gray-900 border border-border shadow-md',
}[_theme] || 'bg-surface-overlay text-text-primary border border-border';
var placementClass = {
top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
left: 'right-full top-1/2 -translate-y-1/2 mr-2',
right: 'left-full top-1/2 -translate-y-1/2 ml-2',
}[_placement] || 'bottom-full left-1/2 -translate-x-1/2 mb-2';
var arrowPlacementClass = {
top: 'bottom-[-5px] left-1/2 -translate-x-1/2 border-t-0 border-l-0',
bottom: 'top-[-5px] left-1/2 -translate-x-1/2 border-b-0 border-r-0',
left: 'right-[-5px] top-1/2 -translate-y-1/2 border-l-0 border-b-0',
right: 'left-[-5px] top-1/2 -translate-y-1/2 border-r-0 border-t-0',
}[_placement] || 'bottom-[-5px] left-1/2 -translate-x-1/2 border-t-0 border-l-0';
var arrowThemeClass = {
'default': 'bg-surface-overlay',
'dark': 'bg-gray-900 border-transparent',
'light': 'bg-white',
}[_theme] || 'bg-surface-overlay';
%>
<%- locals.children || '' %>
<%- _content %>
<% if (_arrow) { %>
<% } %>