Tooltips

Tooltips are powerful components powered behind the scenes by Popper.js that can be attached to any element.

Note: The container prop is not always necessary and it is required in the following examples just for demo purposes.

Directive

You can also create tooltips using the tooltip directive.

Basic Example


<div>
    <d-button id="example-tooltip-1"/>
    <d-tooltip target="#example-tooltip-1"
        container=".shards-demo--example--tooltip-01">
        😃 Wooo! I am a tooltip!
    </d-tooltip>
</div>

<!-- tooltip-1.vue -->

Placement

The tooltip's position can be changed via the placement prop. The following placement options are available: top, topleft, topright, right, righttop, rightbottom, bottom, bottomleft, bottomright, left, lefttop, and leftbottom.


<div>
    <d-button id="example-tooltip-2"/>
    <d-tooltip target="#example-tooltip-2"
        container=".shards-demo--example--tooltip-02"
        placement="right">
        👈 Wooo! I am on the left!
    </d-tooltip>
</div>

<!-- tooltip-2.vue -->

Triggers

Using the triggers prop you can control on which events the tooltip should be displayed.


<div>
    <d-button id="example-tooltip-3">Click Me</d-button>
    <d-tooltip target="#example-tooltip-3"
        container=".shards-demo--example--tooltip-03"
        :triggers="['click']">
        🖱 You just clicked me!
    </d-tooltip>
</div>

<!-- tooltip-3.vue -->

Props

Prop	Description	Type	Default	Required
:title	Title.	`String`	""	False
:triggers	Triggers.	`String \| Array`	"hover focus"	False
:placement	Placement.	`String`	"top"	False
:target	The target element.	`String \| Object \| Func`		False
:delay	Delay in miliseconds.	`Number \| Object \| String`	0	False
:offset	Offset.	`Number \| String`		False
:no-fade	Disable animations.	`Boolean`	false	False
:container	Wrapping container.	`String`	null	False
:boundary	Instance boundaries.	`String \| Object`	"scrollParent"	False
:show	Show state.	`Boolean`	false	False
:disabled	Disabled state.	`Boolean`	false	False