Tooltip

A popup displaying additional text information.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

How To

Tooltips are popups that can be used to display additional text information related to an element when it is hovered or focused.

If you want to add a tooltip to an element of your page (e.g., a button or a text element), add the js-tooltip-trigger class to that element. The title attribute of the trigger is used as the content of the tooltip.

You can use the data-tooltip-position attribute on the trigger element to change the placement of the tooltip. Possible values are: top, bottom, left, right (default is top).

To add custom classes to the tooltip element, you can use the data-tooltip-class attribute on the trigger element:

<span class="tooltip-trigger js-tooltip-trigger" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit." data-tooltip-class="tooltip--lg">the stars</span>

For example, if you want the tooltip to remain visible when hovering hover the tooltip, you can use the .tooltip--sticky class:

<span class="tooltip-trigger js-tooltip-trigger" title="Lorem ipsum dolor." data-tooltip-class="tooltip--sticky">the stars</span>

You can also pass a list of classes (separated by spaces, for example "tooltip--sticky tooltip--lg").

To change the visibility delay of the tooltip, you can modify the tooltipDelay property inside the tooltip.js file (value in milliseconds).

To change the distance between the tooltip and the trigger, you can modify the tooltipDelta property inside the tooltip.js file (value in px).

Changelog

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Get our monthly recap with the latest CodyHouse news