Vuersatile Components

Appearance

On this page

Tooltip ​

Component Tooltip.

html
<Card>
    <Tooltip text="Required checkbox" position="top">
        <Checkbox name="conditions" label="I accept all the terms and conditions" />
    </Tooltip>
</Card>

Props ​

  • title.
html
<Card>
    <Tooltip title="Image" text="An image icon" position="top">
        <Icon icon="image" size="m" />
    </Tooltip>
</Card>
  • text.
html
<Card>
    <Tooltip title="Image" text="An image icon" position="top">
        <Icon icon="image" size="m" />
    </Tooltip>
</Card>
  • image.
html
<Card>
    <Tooltip title="Music" img="https://i.blogs.es/89ae35/apple-music-note/1366_2000.webp" position="top">
        <Icon icon="imagmusice" size="m" />
    </Tooltip>
</Card>
  • position (default top), (left, top, right, bottom).
html
<Card>
    <Tooltip text="Required checkbox" position="right">
        <Checkbox name="conditions" label="I accept all the terms and conditions" />
    </Tooltip>
</Card>
  • showTooltip.
html
<Card>
    <Tooltip text="Required checkbox" :showTooltip="false" position="top">
        <Checkbox name="conditions" label="I accept all the terms and conditions" />
    </Tooltip>
</Card>
  • openOnClick: keeps showing icon if we click, not only on hover.
html
<Card>
    <Tooltip title="Image" text="An image icon" :openOnClick="true" position="top">
        <Icon icon="image" size="m" />
    </Tooltip>
</Card>