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.
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.
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.
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 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.
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
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.