How To Use Your Tooltip Classes
Default
data-tooltip='Tooltip content'
The default tooltip, requires nothing more than adding data-tooltip="content", shifts to the bottom by 8px showing in box format up to 300px wide. The content can include special entities like unicode characters but not html content directly.
<button class="button mb-2" data-tooltip="Tooltip content">tooltip default</button>With Arrow
class='tooltip-arrow'
By default tooltips do not include arrows, you can add them by simply adding to the class selector. class="tooltip-arrow" An arrow will be added to the appropriate position based on tooltip direction.
<button class="button mb-2 tooltip-arrow" data-tooltip="Tooltip content">tooltip default</button>
Position
class='tooltip-[direction]'
Positioning your tooltips is a breeze, by adding a specific class you can style your tooltips to popout from any of 8 directions.
<button class="button is-small is-fullwidth mb-1 tooltip-arrow tooltip-bottom-right" data-tooltip="bottom-right">bottom-right</button><button class="button is-small is-fullwidth mb-1 tooltip-arrow tooltip-bottom" data-tooltip="bottom">bottom</button><button class="button is-small is-fullwidth mb-1 tooltip-arrow tooltip-bottom-left" data-tooltip="bottom-left">bottom-left</button><button class="button is-small is-fullwidth mb-1 tooltip-arrow tooltip-right" data-tooltip="right">right</button><button class="button is-small is-fullwidth mb-1 tooltip-center" data-tooltip="center">center</button><button class="button is-small is-fullwidth mb-1 tooltip-arrow tooltip-left" data-tooltip="left">left</button><button class="button is-small is-fullwidth mb-1 tooltip-arrow tooltip-top-right" data-tooltip="top-right">top-right</button><button class="button is-small is-fullwidth mb-1 tooltip-arrow tooltip-top" data-tooltip="top">top</button><button class="button is-small is-fullwidth mb-1 tooltip-arrow tooltip-top-left" data-tooltip="top-left">top-left</button>Color Modifiers
class='tooltip-[colortype]'
<a class="button mb-2 tooltip-arrow tooltip-info tooltip-left" data-tooltip="Info Colored">info</a><a class="button mb-2 tooltip-arrow tooltip-success tooltip-bottom-left" data-tooltip="Success Colored">success</a><a class="button mb-2 tooltip-arrow tooltip-warning tooltip-bottom-right" data-tooltip="Warning Colored">warning</a><a class="button mb-2 tooltip-arrow tooltip-error tooltip-right" data-tooltip="Error Colored">error</a><a class="button mb-2 tooltip-arrow tooltip-primary tooltip-left" data-tooltip="Primary Colored">primary</a><a class="button mb-2 tooltip-arrow tooltip-secondary tooltip-bottom" data-tooltip="Secondary Colored">secondary</a><a class="button mb-2 tooltip-arrow tooltip-tertiary tooltip-right" data-tooltip="Tertiary Colored">tertiary</a>Tooltip Sizing
class='tooltip-[size]'
There are four size choices to choose from and by default all tooltips are set to large. Size small is up to 80px, Size medium is up to 150px, and Size Large is up to 300px. Size fit matches the size of the element they are attached to. The tooltip treats this as a maximum size, and by default will only take up as much size as is needed unless it needs to wrap to a second line.
<a class="button tooltip-small tooltip-top" style="width: 80px;" data-tooltip="Small tooltips default to 80px in width and wrap content from there.">Small</a><a class="button tooltip-medium tooltip-top" style="width: 150px;" data-tooltip="Medium tooltips default to 150px in width and wrap content from there.">Medium</a><a class="button tooltip-large tooltip-top" style="width: 300px;" data-tooltip="Large tooltips default to 300px in width and wrap content from there.">Large</a><a class="button tooltip-fit tooltip-top" style="width: 200px;" data-tooltip="Fit tooltips default to the same width of the parent container and wrap content from there.">Fit</a>Extra Modifiers
class='tooltip-[modifier]'
There are special cases where you might want to hide a tooltip via code, you can do so by adding and removing class="tooltip-hidden" You might also want a tooltip to always show, regardless of hover. For that scenario you would use class="tooltip-active" Finally, using a fixed-width tooltip might suit your fancy, but this style is generally used with size and text styles.
<a class="button tooltip-fixed tooltip-text-left tooltip-large" data-tooltip="Left aligned tooltip, must be used with tooltip-fixed">tooltip-text-left</a><a class="button tooltip-fixed tooltip-text-center tooltip-large" data-tooltip="Center aligned tooltip, must be used with tooltip-fixed, however center is default behavior.">tooltip-text-center</a><a class="button tooltip-fixed tooltip-text-right tooltip-large" data-tooltip="Right aligned tooltip, must be used with tooltip-fixed">tooltip-text-right</a><label for="hiddenCbox">Hide Tooltip </label><input type="checkbox" id="hiddenCbox" /><a id="hiddenA" class="button" data-tooltip="hidden when checked">tooltip-hidden</a><a class="button tooltip-active" data-tooltip="always on" >tooltip-active</a>
Hide Tooltip
class='tooltip-hidden-[where]'
tooltip-hidden-mobile
tooltip-hidden-tablet
tooltip-hidden-desktop
Hiding tooltips at certain screen sizes can be useful for responsive designs. For example, you might want to hide tooltips on mobile devices to avoid them taking up too much space on smaller screens, or tablet because they are clunky with touch, or even desktop.
How To Use Your Tooltip Styles
With Advanced Delay Modifiers
style='--tooltip-[show/hide]-delay: [value];'
Hide Delay
By default tooltips have a show delay of 300ms when you hover into the element and a hide delay of 200ms after you hover away before they dissappear. This value is completely customizable by adding a style property to your element. style="--tooltip-show-delay: 1000ms;" would make the tooltip not show up until 1000ms has passed. style="--tooltip-hide-delay: 1000ms;" would make the tooltip linger after you hover away from the element for 1000ms. Any valid delay value will work here (1s, 500ms, etc).
<button class="button mb-2 tooltip-arrow tooltip-left" style="--tooltip-show-delay: 0ms;" data-tooltip="No delay">no delay</button><button class="button mb-2 tooltip-arrow" data-tooltip="Default 200ms delay">default delay</button><button class="button mb-2 tooltip-arrow tooltip-right" style="--tooltip-show-delay: 1s;" data-tooltip="1 second delay">1s delay</button><button class="button mb-2 tooltip-arrow tooltip-left" style="--tooltip-hide-delay: 0ms;" data-tooltip="No delay">no delay</button><button class="button mb-2 tooltip-arrow" data-tooltip="Default 300ms delay">default delay</button><button class="button mb-2 tooltip-arrow tooltip-right" style="--tooltip-hide-delay: 1s;" data-tooltip="1 second delay">1s delay</button>With Other Style Modifiers
Border Radius Custom Color
With added styles tooltips are ridiculously customizable, from setting a custom Z-Index, custom width, or even custom colors you can create special classes that encompass styles.
<button class="button mb-2 tooltip-arrow tooltip-left" style="--tooltip-show-delay: 0ms;" data-tooltip="No delay">no delay</button><button class="button mb-2 tooltip-arrow" data-tooltip="Default 200ms delay">default delay</button><button class="button mb-2 tooltip-arrow tooltip-right" style="--tooltip-show-delay: 1s;" data-tooltip="1 second delay">1s delay</button><button class="button mb-2 tooltip-arrow tooltip-left" style="--tooltip-hide-delay: 0ms;" data-tooltip="No delay">no delay</button><button class="button mb-2 tooltip-arrow" data-tooltip="Default 300ms delay">default delay</button><button class="button mb-2 tooltip-arrow tooltip-right" style="--tooltip-hide-delay: 1s;" data-tooltip="1 second delay">1s delay</button>Custom Classes
class='tooltip-chip'
With an abundance of styles you could make custom classes for often or repeatable styles like: Test
.tooltip-chip {
--tooltip-show-delay: 1000ms;
--tooltip-post-delay: 0ms;
--tooltip-border-radius: 12px;
--tooltip-background-color: blue;
--tooltip-foreground-color: red;
--tooltip-distance: 4px;
}