Top
Tooltip - Styling & Theming
Tooltip
To style and customize the appearance of the <Tooltip />, you can use one of the following strategies:
  • Specify a style prop with the desired values.
  • Specify a className - note that this will not override the default className which is zippy-react-toolkit-tooltip, but rather will be appended to the classNames that the <Tooltip /> already has.
The component is made of three elements. The wrapper, a div to hold the content and an arrow. The arrow sits between the wrapper and the content div. The wrapper has only a border, the same border that is applied on the arrow. To add border radius, add both border radius value on content and on wrapper.
ClassNameDescription
zippy-react-toolkit-tooltip
This is the block className for any <Tooltip />. Always applied.
zippy-react-toolkit-tooltip--visible
Applied when visible=true.
zippy-react-toolkit-tooltip--invisible
Applied when visible=false.
zippy-react-toolkit-tooltip--position-fixed
zippy-react-toolkit-tooltip--has-transition
Applied when fade=false.
zippy-react-toolkit-tooltip--transition-enter
Applied when fadein transition starts.
zippy-react-toolkit-tooltip--transition-enter-active
Applied when fadein transition ends.
zippy-react-toolkit-tooltip--transition-leave
Applied when fadeout transition starts.
zippy-react-toolkit-tooltip--transition-leave-active
Applied when fadeout transition ends.
zippy-react-toolkit-tooltip__content
Applied on wrapper that holds the tooltip's content.
zippy-react-toolkit-tooltip__arrow
Applied on arrow.
zippy-react-toolkit-tooltip__arrow--[LOCATION]
Applied on arrow. Location is one of the following strings: "top", "left", "right" and "bottom".
zippy-react-toolkit-tooltip__arrow-wrapper
Applied on arrow wrapper.
zippy-react-toolkit-tooltip__arrow-wrapper--[LOCATION]
Applied on arrow wrapper. Location is one of the following strings: "top", "left", "right" and "bottom".