Component <Tooltip />

Props

Props	Type	Meaning	Possible values
color	string	Change tootlip background color	white / dark
position	string	Change tootlip position around the elemet	top-left / top / top-right / right-top / right / right-bottom / bottom-left / bottom / bottom-right / left-top / left / left-bottom
tooltipText	string	Set tootlip text status	string
width	string / number	Set max width of the popup	from 0 to any number or string with units

---

Colors

const TooltipColor = ({ color }) => (
  <Tooltip tooltipText="Hint is here" color={color}>
    Open {color.replace('-', ' ')}
  </Tooltip>
)

Open white

Open dark

Positions

const TooltipPos = ({ position }) => (
  <Tooltip tooltipText="Hint is here" position={position}>
    Open {position.replace('-', ' ')}
  </Tooltip>
)

Open top left

Open top

Open top right

Open right top

Open right

Open right bottom

Open bottom left

Open bottom

Open bottom right

Open left top

Open left

Open left bottom

---

Width

const TooltipWidth = ({ width }) => (
  <Tooltip
    tooltipText="Lorem Ipsum is simply dummy text of the printing and typesetting industry"
    width={width}
  >
    Hover here
  </Tooltip>
)

Hover here

Hover here