ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Menubar (Vertical Navigation)
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
      • Text
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Tooltip

yarn add @clayui/tooltip

Tooltips are brief pieces of information that appear on hover state over an element to clarify its meaning or use for the user.

  • Examples
  • Markup
  • API

Stable3.58.0View in LexiconCHANGELOGstorybook demos

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

Copied!
Code Sample (expand to see it)

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.
Copied!
Code Sample (expand to see it)

contentRenderer

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

Copied!
Code Sample (expand to see it)

How can this be improved? Create an issue!