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

Usage

<template>
  <ETooltip>
    <template #element>
      <EBtn>Button</EBtn>
    </template>
    <template #content>
      Extra information
    </template>
  </ETooltip>
</template>

Props

For ETooltip component, the following props are available:

Prop	Type	Default	Note
click	Boolean	false	Opens Tooltip only on click
hover	Boolean	false	Opens Tooltip only on hover.
width	String	-	Sets the component's width.
height	String	-	Sets the component's height.
animation	String	"component-pop-out"	The ETooltip element can be animated in four 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.

Slots

The ETooltip component provide following slots that enable you to customize the content.

Slot	Description
element	The slot used for the tooltip's element.
content	The slot used for the tooltip's content.