@UiReact

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiTooltip

Package: @uireact/tooltip

^v3.0.34

Component used to render extra information on top of texts or icons when hovered.

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/tooltip

Warning: Using tooltips that render content on hover aren't easily accessible, so use with care and make sure that any important information is also repeated to the user in a different way.

Usage


<>
  <UiTooltip text="Tooltip! 🐣">
    <UiText>Tooltip on top</UiText>
  </UiTooltip>
  <br />
  <UiTooltip text="Tooltip! 💋" position="bottom" category="secondary">
    <UiText>Tooltip on bottom</UiText>
  </UiTooltip>
  <br />
  <UiTooltip text="Tooltip! 🫶" position="left" category="tertiary">
    <UiText>Tooltip on left</UiText>
  </UiTooltip>
  <br />
  <UiTooltip text="Tooltip! 🌶️" position="right" category="positive" inverse={false}>
    <UiText>Tooltip on right</UiText>
  </UiTooltip>
</>