Tooltip

The Tooltip component is an icon which shows explanatory information about something on hover.

Text

Use the text prop to add text to your tooltip shown on hover.

<template>
  <ci-tooltip text="Tooltip text" />
</template>

Container

Use the container prop to create tooltip as child of specified element. Set to body by default.

<template>
  <ci-tooltip
    text="Tooltip text"
    container="#app"
  />
</template>

Variant

Use variant to change the style and appearance of your tooltip.

<template>
  <DemoGrid>
    <div>
      <span>Normal style</span>
      <ci-tooltip text="Normal style" />
    </div>
    <div>
      <span>Dark style</span>
      <ci-tooltip
        variant="dark"
        text="Dark style"
      />
    </div>
    <div>
      <span>Light style</span>
      <ci-tooltip
        variant="light"
        text="Light style"
      />
    </div>
  </DemoGrid>
</template>

Placement

Use placement to change the placement position of your tooltip.

<template>
  <DemoGrid>
    <div>
      <span>Auto</span>
      <ci-tooltip text="Auto placement" />
    </div>
    <div>
      <span>Right</span>
      <ci-tooltip
        text="Right placement"
        placement="right"
      />
    </div>
    <div>
      <span>Left</span>
      <ci-tooltip
        text="Left placement"
        placement="left"
      />
    </div>
    <div>
      <span>Top</span>
      <ci-tooltip
        text="Top placement"
        placement="top"
      />
    </div>
    <div>
      <span>Bottom</span>
      <ci-tooltip
        text="Bottom placement"
        placement="bottom"
      />
    </div>
  </DemoGrid>
</template>

Tooltip Directive

Tooltip can be added to anything using directive v-tooltip. See docs for more information.