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

Bug Report & Feedback

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