🔹 Description
A component that gives an informative message and appears when the user hovers with the item that has a tooltip enabled..
🔹System Dependencies
🔹 Installation
The package can be installed via npm:
npm install empower-display --save
🔹 Standard Tooltip
Configuration
import { Tooltip } from 'empower-display';
..............
const configToolTipTop = {
delay:600,
direction: 'top',
content:'This is the content for tooltop'
}
..............
return (
<>
<Tooltip {...configToolTipTop}>
Sample Tooltip
<span className="example-emoji " role="img" aria-label="cowboy emoji ">
🤠
</span>
</Tooltip>
</>
)
🔹 Properties
Parameter | Data Type | Constraint | Description |
|---|---|---|---|
delay | Integer | Optional | Delay in milliseconds before the displaying of tool tip. The default delay value is 400. |
direction | String | Optional | It is the direction where the tool tip will display. It can be top, right, left or bottom. |
content | String | Required | The text displayed inside the tool tip. |
🔹 References
Repository Link: https://gitlab.com/empowerteams/empower-display.git
NPM Package: https://www.npmjs.com/package/empower-display
Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git