@clayui/tooltip

---

title: 'Tooltip' description: 'Tooltips are brief pieces of information that appear on hover state over an element to clarify its meaning or use for the user.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/popovers-tooltips/' packageNpm: '@clayui/tooltip'

import { Tooltip, TooltipProvider, TooltipProviderRenderer, } from '$packages/clay-tooltip/docs/index';

• TooltipProvider
  • contentRenderer

Simplest way of using Tooltip is by leveraging it's show prop and specifying alignPosition to determine it's position relative to the element it's aligned to.

If you have multiple Tooltips on the page, TooltipProvider allows you to only have to instantiate the component once and simply provide html attributes to the elements that need tooltips.

TooltipProvider

By using the <TooltipProvider> it allows you to add the desired tooltip content on each element as a data attribute.

Here's a list of html attributes that you can provide to children elements of the TooltipProvider:

• title is for the tooltip content.
• data-tooltip-align is for alignment direction.
• data-tooltip-delay is for the delay(ms) before showing the tooltip.

contentRenderer

contentRenderer prop gives you the ability to format the content passed to the Tooltip via the title attribute to meet your requirements.

Changelog

3.38.0 (2021-10-22)

Bug Fixes

• @clayui/button: add missing displayTypes from the Button (1cb8849)
• @clayui/core: fix formatting error (d79f5a6)
• @clayui/core: fix the indentation of TreeView nodes when the item is a leaf (6c44389)
• @clayui/css: Alert convert components to use clay-css mixin pattern (adbc3ed)
• @clayui/css: Alerts allow customizing .btn-group inside .alert-inline and increase space between alert-inline buttons and close (48px) (1fb3075)
• @clayui/css: Alerts and Cadmin Alerts tweak position of .alert-inline .alert-indicator so it's more centered with the text (6991050)
• @clayui/css: Atlas / Base variables and components use Clay Color functions instead of Sass color functions for better CSS Custom Property support (bd72797)
• @clayui/css: Atlas Alerts and Cadmin Alerts spacing between alert-indicator and text should be 8px (abb1ad9)
• @clayui/css: Atlas Alerts use $alert-indicator-font-size instead of $alert-font-size when calculating spacing for the .alert-indicator (10809da)
• @clayui/css: Badge updates $badge-close Sass map to use newer keys for hover and focus (485862c)
• @clayui/css: Border utilities border-color is the wrong value. Table Row Variants scoped $border-color variable was overwriting global $border-color variable (834209a)
• @clayui/css: Cadmin Alert convert components to use clay-css mixin pattern (915c748)
• @clayui/css: Cadmin Alerts allow customizing .btn-group inside .alert-inline and increase space between alert-inline buttons and close (48px) (f6c7a02)
• @clayui/css: Cadmin Modals modal-body should have border-top to create separation when components are inserted between modal-header and modal-body (b5b33c0)
• @clayui/css: Cadmin variables and components use Clay Color functions instead of Sass color functions for better CSS Custom Property support (2c77b7b)
• @clayui/css: cleanup build script (60be3dd)
• @clayui/css: Global Color Functions adds aliases for Sass color functions clay-darken, clay-lighten, clay-adjust-hue, clay-desaturate, clay-saturate, clay-mix, clay-blue, clay-green, clay-red. It converts CSS Custom Property fallback values to the correct type before running them through the Sass functions. (189e281)
• @clayui/css: Global Functions math-sign uses deprecated [@elseif](https://github.com/elseif) syntax, changed to [@else](https://github.com/else) if (bd22a48), closes #4353
• @clayui/css: Global Functions use Clay Color Functions that support CSS Custom Properties with fallback value (e7b1abf)
• @clayui/css: Mixins use Clay Color Functions instead of Sass color functions (baaddfc)
• @clayui/css: Modals modal-body should have border-top to create separation when components are inserted between modal-header and modal-body (b3f648e)
• @clayui/css: Modals modal-header increase z-index so it appears on top of modal-body. modal-header border gets hidden by modal-body border due to last commit. (fd3ae71)
• @clayui/css: remove node-sass and add new build file (80f6ec2)

Features

• @clayui/alert: adds inline alert variation and actions API (d146d49)
• @clayui/core: adds onLoadMore API to TreeView (ff972d7)
• @clayui/core: implement "load more" to aggregate the state (1fd9b62)
• @clayui/css: Alerts and Cadmin Alerts use Sass placeholders for alert variants for cleaner extends (2c34258)
• @clayui/css: Badge converts .badge, .badge-pill, and badge variants to use clay-badge-variant mixin (8c9d4eb)
• @clayui/css: Cadmin Badge converts .badge and badge variants to use clay-badge-variant mixin (a2b04b2)
• @clayui/css: Globals and Cadmin Globals adds $enable-clay-color-functions-process-fallback and $cadmin-enable-clay-color-functions-process-fallback variables. This forces Clay color functions to return the CSS Custom Property instead of processing the fallback color and returning a hex value. (15a6bc1)
• @clayui/css: Mixins clay-alert-variant adds option to configure .alert-indicator (0c9f913)
• @clayui/css: Mixins clay-alert-variant adds option to pass in styles to .alert-indicator + .lead (ff5146b)
• @clayui/css: Mixins adds clay-badge-variant (dc52ed1)
• @clayui/modal: add the preventAutoClose prop (af7b12f), closes #4355
• clayui.com: update gatsby and its dependencies to v3.14 (bf79081)