Tooltip
Displays a tooltip that appears when hovering over an element.
Install
Run the following command to install the tooltip component:
npx acc-nuxt add TooltipDirections
Top
Right
Bottom
Left
Top Left
Top Right
Bottom Left
Bottom Right
Top Start
Top End
Bottom Start
Bottom End
Follow cursor
Hover me
Disabled
Allow content hover
Custom styles
Slots
The tooltip component provides the following slots for customization.
#trigger
The element that triggers the tooltip on hover. This is typically a button or any interactive element.
#content
The content displayed inside the tooltip popup.
Props
direction:string— optional
default:top
The direction in which the tooltip should appear. Can be "top", "right", "bottom", "left", "top-left", "top-right", "bottom-left", "bottom-right", "top-start", "top-end", "bottom-start", "bottom-end".
resize:boolean— optional
default:true
Whether the tooltip should adjust its position to stay within the viewport.
openDelay:number— optional
default:200
The delay in milliseconds before the tooltip appears when hovering over the trigger.
closeDelay:number— optional
default:100
The delay in milliseconds before the tooltip disappears when hovering over the trigger.
gap:number— optional
default:8
The gap in pixels between the tooltip and the trigger.
followCursor:boolean— optional
default:false
Whether the tooltip should follow the cursor position.
disabled:boolean— optional
default:false
Whether the tooltip should be disabled.
allowContentHover:boolean— optional
default:false
Whether the tooltip will close if the content is hovered over.
tooltipClass:string— optional
default:undefined
Custom CSS class to apply to the tooltip content container.
CSS Variables
The tooltip component can be customized using the following CSS variables.
--lev-tooltip-bg
default:#ffffff
Background color of the tooltip.
--lev-tooltip-color
default:#111827
Text color of the tooltip content.
--lev-tooltip-border
default:1px solid #d1d5db
Border style of the tooltip.
--lev-tooltip-shadow
default:0 1px 3px rgba(0, 0, 0, 0.1)
Box shadow applied to the tooltip.
--lev-tooltip-padding
default:8px 12px
Padding inside the tooltip content.
--lev-tooltip-border-radius
default:4px
Border radius of the tooltip corners.
--lev-tooltip-z-index
default:1000
Z-index of the tooltip to control stacking order.
--lev-tooltip-bg-dark
default:#111827
Background color of the tooltip in dark theme.
--lev-tooltip-color-dark
default:#ffffff
Text color of the tooltip content in dark theme.
--lev-tooltip-border-dark
default:1px solid #111827
Border style of the tooltip in dark theme.
--lev-tooltip-shadow-dark
default:0 1px 3px rgba(0, 0, 0, 0.1)
Box shadow applied to the tooltip in dark theme.