Ctrl + k


Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software.

Default slot is used to display the text label. The text label is displayed when the user hovers over the element with the mouse cursor.

Tooltip content
Tooltip content

You can decide where the text label is to be displayed - at the top, bottom or on either side of the element. To change the placement of the tooltip, use the placement prop.

Tooltip on top
Tooltip on top-start
Tooltip on top-end
Tooltip on right
Tooltip on right-start
Tooltip on right-end
Tooltip on bottom
Tooltip on bottom-start
Tooltip on bottom-end
Tooltip on left
Tooltip on left-start
Tooltip on left-end

you can set target element using target prop.

Tooltip content 1
Tooltip content 2
Tooltip content 3

You can insert HTML to other components code inside Tooltip's default slot to highlight particular bits of information and make the content more attractive.

Tooltip with HTML
© 2024 YeSvelte. All Rights Reserved