@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.40.0 (2021-11-17)

Bug Fixes

• @clayui/css: atlas-variables.scss and base-variables.scss should be Sass partials. The CSS equivalent shouldn't be created since these files are only meant to be consumed by .scss files. (5aaa87e)
• @clayui/css: C Kbd and Cadmin C Kbd allow passing in properties to .c-kbd-group > .c-kbd, .c-kbd-group-sm > .c-kbd, and .c-kbd-group-lg > .c-kbd from their respective Sass map variables (5a9ad67), closes #4367
• @clayui/css: Cadmin Cards use the mixin clay-card-variant instead of deprecated mixins to generate styles for .card-type-asset, .image-card, .user-card , .card-type-directory (7a8b6f7)
• @clayui/css: Cadmin Input Group move .btn and .form-control z-index styles to input-group-prepend and input-group-append. Input Groups input disappears when focused inside a modal with iframe. (07f17ce)
• @clayui/css: Cards use the mixin clay-card-variant instead of deprecated mixins to generate styles for .card-type-asset, .image-card, .user-card , .card-type-directory (e244162)
• @clayui/css: Icons make them more configurable via $lexicon-icon, $lexicon-icon-sm, $lexicon-icon-lg, $lexicon-icon-xl Sass maps (efe1b80)
• @clayui/css: Input Group move .btn and .form-control z-index styles to input-group-prepend and input-group-append. Input Groups input disappears when focused inside a modal with iframe. (64bd8c8)
• @clayui/css: Labels and Cadmin Labels Sass maps that are used for clay-label-variant hover and focus keys should be nested in href. The values are output for the selectors .label[href], .label[type], and .label[tabindex]. (c9e6442), closes #4383
• @clayui/css: Mixins clay-card-variant adds option to output styles for: (c3e4149)
• @clayui/css: Mixins clay-card-variant adds options to configure &.hover, &.focus, and &:disabled, &.disabled (16affad)
• @clayui/css: Mixins clay-card-variant inlines the setter's that aren't providing any mapping from old keys to new keys (f0627a8)
• @clayui/css: Mixins clay-card-variant moves the selector &.card, .card (b2f0f19)
• @clayui/css: Mixins clay-card-variant should be able to output selectors for clay-card-type-asset-variant, but removes the default values generated in clay-card-type-asset-variant so it doesn't pollute the final CSS with unused rule-sets. (7bb6050)
• @clayui/css: Mixins clay-card-variant should be able to output selectors for clay-card-type-asset, but removes the default values generated in clay-card-type-asset so it doesn't pollute the final CSS with unused rule-sets. (0a3bba0)
• @clayui/css: Mixins clay-css should generate will-change property (b176c5b)
• @clayui/css: Mixins clay-dropdown-item-variant adds option to output styles for ::before and ::after pseudo elements for default, hover, focus, active, .active, and disabled states (8369276), closes #4403
• @clayui/css: Mixins clay-label-variant target [tabindex] instead of [tabindex="0"] so styles still apply when an element is disabled with negative tabindex (734470e)
• @clayui/css: Mixins clay-link changes [@at-root](https://github.com/at-root) { button#{&} { :focus {} } } to &[type]:focus this causes issues for compound selectors. It will generate button.a .compound-selector instead of .a button.compound-selector. This fix targets the type attribute which should be on every button element. (5ca9e6d)
• @clayui/css: Update map keys that are used in clay-link to use newer property names and nesting (d6a25df)
• @clayui/drop-down: Provide a default on submit function to avoid form navigation (60a37aa)
• @clayui/provider: removes dependency from ClayModal to avoid circular dependency issues (0b8eade)
• @clayui/shared: fixes error when considering an element with negative tabIndex (da143f0)
• @clayui/shared: fixes error when considering an element with negative tabIndex (9e40c0f)

Features

• @clayui/core: add an onRenameItem callback (779f3da)
• @clayui/core: add an onRenameItem callback (add2796)
• @clayui/core: make it possible to enable or disable drag and drop (5367061)
• @clayui/css: Alerts convert .alert-fluid to use clay-alert-variant mixin (15f9355)
• @clayui/css: Cadmin Alerts convert .alert-fluid to use clay-alert-variant mixin (3f3f34e)
• @clayui/css: Cadmin Dropdowns add Sass map $cadmin-dropdown-menu and generate styles for .dropdown-menu using clay-dropdown-menu-variant (bbc031a)
• @clayui/css: Cadmin Dropdowns convert .dropdown-toggle, .dropdown-subheader, .dropdown-caption, .dropdown-item-text, .dropdown-section, .dropdown-divider, .dropdown-action, and dropdown-menu positional utilities to use Sass maps instead of variables (1f11eba)
• @clayui/css: Dropdowns add $dropdown-menu Sass map and generate properties using it (a0d2382)
• @clayui/css: Dropdowns convert .dropdown-toggle, .dropdown-subheader, .dropdown-caption, .dropdown-item-text, .dropdown-section, .dropdown-divider, .dropdown-action, and dropdown-menu positional utilities to use Sass maps instead of variables (0cb1ce7)
• @clayui/css: Forms adds .form-fieldset and .form-legend to provide alternative fieldset and legend styles without overriding all fieldset and legend elements (3fc7449)
• @clayui/css: Mixins clay-alert-variant adds option to pass in styles to &.alert-dismissible, &.alert-dismissible .container-fluid, .alert-indicator .lexicon-icon, and .container-fluid (807c612)
• @clayui/css: Mixins clay-css if parameter is not type map don't do anything (b994e78)
• @clayui/css: Mixins clay-dropdown-menu-variant add customizing &::before, &::after, and &.show (57903de)
• @clayui/css: Mixins clay-link and clay-button-variant adds option to customize inline-item, inline-item-before, inline-item-middle and inline-item-after in default, hover, focus, active, active-class, and disabled states. (84fb0d0), closes #4413
• @clayui/css: Reboot put fieldset and legend styles in Sass maps $fieldset and $legend (92e8254)