Skip to content

ExTooltip

html
<ExTooltip top :nudge="{ top: 10 }">
    <ExTooltipTrigger>
        <p>Tooltip Trigger</p>
    </ExTooltipTrigger>
    <ExTooltipContent>
        <div>Tooltip Content</div>
    </ExTooltipContent>
</ExTooltip>

Interact

Props: ExTooltip

as

TypeDefaultRequired
string componenttemplatefalse

Description: Sets the element type of ex-dialog-close. Any custom vue component can also be passed.


disabled

TypeDefaultRequired
booleanfalsefalse

Description: Enable / Disable tooltip


delay

TypeDefaultRequired
number string200false

Description: Adds a delay before displaying tooltip


nudge

TypeDefaultRequired

number string

Nudges the tooltip content based on the mentioned position.

js
{
    top: number | string,
    bottom: number | string,
    left: number | string,
    right: number | string,
 }

false


top

TypeDefaultRequired
booleanfalsefalse

Description: Positions tooltip content to the top of the trigger


bottom

TypeDefaultRequired
booleanfalsefalse

Description: Positions tooltip content to the bottom of the trigger


left

TypeDefaultRequired
booleanfalsefalse

Description: Positions tooltip content to the left of the trigger


TypeDefaultRequired
booleanfalsefalse

Description: Positions tooltip content to the right of the trigger


Slots

NameDescription

default

The default Vue slot.

js
{ isOpen: boolean } // tooltip visibility

Props: ExTooltipTrigger

as

TypeDefaultRequired
string componenttemplatefalse

Description: Sets the element type of ex-dialog-close. Any custom vue component can also be passed.


Slots

NameDescription

default

The default Vue slot.

js
{ isActive: boolean }

Props: ExTooltipContent

as

TypeDefaultRequired
string componenttemplatefalse

Description: Sets the element type of ex-dialog-close. Any custom vue component can also be passed.


Slots

NameDescription

default

The default Vue slot.

Released under the MIT License.