LUCI Design System


Tooltips Sink

The pink underline on the tooltip text in the paragraph is just for illustration purposes on this sink page. It is NOT part of the component. Any element can trigger a tooltip.

The tooltip is absolutely positioned relative to its trigger. This removes a need for Javascript to calculate absolute positions every time the window is resized. At this time there is no edge-detection for tooltips. They will appear offscreen if the trigger is too close to the viewport edge.

Default Tooltip, top center

This is a paragraph of text and this word Tool tip text goes here and here and some text here and maybe just maybe here. Link to google is the tooltip trigger.

This is a paragraph of text and this word short is the tooltip trigger.

Multiple Tooltips in paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem soluta saepe, tooltip 1 trigger This is the first tooltip aliquid corrupti deleniti consectetur est, quaerat impedit mollitia? Incidunt fugit, sequi corrupti. Exercitationem quas doloremque nihil at? Lorem ipsum dolor tooltip 2 trigger This is the second tooltip sit amet, consectetur adipisicing elit. Dignissimos et saepe eum iste assumenda maiores quae magnam ad aliquam laudantium veniam aliquid incidunt omnis aspernatur, sapiente doloribus sint esse corporis.

Button as trigger

Text Input as trigger

This is a tooltip on a form input

Icon as trigger

This is a tooltip on an icon

Icon as trigger, tooltip only appears on click

Tooltips appear on hover AND on click (to support touch screens) by default. The modifier class luci-tooltip--hidden-on-hover removes the "appear on hover" behavior and only allows the tooltip to be shown on click.

This is a tooltip on an icon

Bottom Center

This is a paragraph of text and this word Tool tip text goes here and here and some text here and maybe just maybe here. Link to google is the tooltip trigger.

This is a paragraph of text and this word short is the tooltip trigger.

Position Examples

The tooltip has 12 different position modifier classes.

top center Top Center (Default)

top left longer trigger to show tail position Top Left

top right longer trigger to show tail position Top Right

bottom center Bottom Center

bottom left Bottom Left

bottom right Bottom Right

left top Left Top Really long to make this wrap when it hits the max width

left center Left Center Really long to make this wrap when it hits the max width

left bottom Left Bottom Really long to make this wrap when it hits the max width

right top Left Top Really long to make this wrap when it hits the max width

right center Left Center Really long to make this wrap when it hits the max width

right bottom Left Bottom Really long to make this wrap when it hits the max width

Additional Static Examples

right center Right Center Really long to make this wrap when it hits the max width

tall trigger to
test vertical
centering
Left Center

tall trigger to
test vertical
centering
Right Center

a a

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt aut optio delectus voluptatibus omnis, nam minima vel. Nisi, atque sit! Error obcaecati cumque inventore rem commodi eligendi autem praesentium odit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos voluptate, doloremque non quaerat hic provident sequi, perspiciatis ratione sint nostrum aspernatur error, dolorum iure alias cupiditate sit, enim rem? Inventore.