Tooltip

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

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://bitbucket.org/empowerteams/empower-display

NPM Package: https://www.npmjs.com/package/empower-display

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git