Tooltip

A RhTooltip is a graphical user interface element that displays informative text when a user hovers over, focuses on, or taps an element, without requiring a click or any other action to trigger it.

copy

<RhTooltip title="Tooltip">
  <RhButton>Show tooltip</RhButton>
</RhTooltip>

Tooltip Props

Name	Type	Default	Description
title	any		Title for tooltip
position	"top" \| "bottom" \| "left" \| "right"	top	It have 'top' \| 'bottom' \| 'left' \| 'right' options to specify the position of tooltip
children	React.ReactNode		React Node
dangerouslySetClassName	string		Used to specify the CSS class or classes that should be applied to a JSX element.

Position

The tooltip has options that allow for the specification of its position.

copy

<div className={"flex gap-4"}>
  <RhTooltip title="A top aligned tooltip" position="top">
    <RhButton>Show tooltip</RhButton>
  </RhTooltip>
  <RhTooltip title="A left aligned tooltip" position="left">
    <RhButton>Left tooltip</RhButton>
  </RhTooltip>
  <RhTooltip title="A bottom aligned tooltip" position="bottom">
    <RhButton>Bottom tooltip</RhButton>
  </RhTooltip>
  <RhTooltip title="A right aligned tooltip" position="right">
    <RhButton>Right tooltip</RhButton>
  </RhTooltip>
</div>