Tooltip

ETooltip Tooltips are a useful tool to display additional details about an element when the user hovers over or clicks on it. Demo Here

Import

import ETooltip from "@components/Elements/ETooltip";

Usage

<ETooltip content="More info">
    <EBtn>Button</EBtn>
</ETooltip>

Props

For ETooltip component, the following props are available:

Prop	Type	Default	Note
content	String	-	The tooltip's content.
click	Boolean	false	Opens Tooltip only on click
hover	Boolean	false	Opens Tooltip only on hover.
width	[String, Number]	-	Sets the tooltip's width. Default unit is px.
height	[String, Number]	-	Sets the tooltip's height. Default unit is px.
className	String	-	Overrides or extends the component's wrapper styles.
animation	String	"component-pop-out"	The ETooltip element can be animated in many ways. Defined animations here.
position	String	"top"	The position prop allows the tooltip to be position relative to the element.The tooltip can appear from the left, right, top or bottom edge of the element.
square	Boolean	false	Removes rounded corners of the element.
arrow	Boolean	false	Adds an arrow to the tooltip.

NOTE

If both hover and click props are true, the tooltip will be displayed on hover and will persist on the page with a click on the element.

The tooltip will disappear again when the user clicks somewhere else on the page.

Children

The ETooltip component provides a children props that enable you to indicate a tooltip on a certain element.

Children	Description
✔️	Tooltip's element.