wovoui

Tooltip

Tooltips are replacement of title attributes.

target

<Tooltip> component should have target property. target prop's value should be the id of the element on which the tooltip should be shown.


<Button id="one">Show Tooltip on Hover</Button>
<Tooltip target="one">
    <em>Tooltip</em> <u>with</u> <b>HTML</b>
</Tooltip>
1
2
3
4
5

Placement

Tooltips can be shown in four directions. Supported values are top, right, bottom and left. These values can be set using placement prop.


<template v-for="dir in ['top','right','bottom','left']">
    <Button :id="dir" class="m-2">Show Tooltip on Hover</Button>
    <Tooltip :target="dir" :placement="dir">
        <em>Tooltip</em> <u>with</u> <b>HTML</b>
    </Tooltip>
</template>
1
2
3
4
5
6
7

content prop

<Tooltip> components inner text can be set using content attribute too.


<Button id="content">Show Tooltip on Hover</Button>
<Tooltip placement="bottom" target="content" content="Hello Tooltip with content"/>
1
2
3