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>

Reactivity

Tooltips are fully reactive and respond to changes.

<template>
<div>
  <ci-tooltip :text="isOn ? 'Tooltip' + counter : null" />
  <br><br>
  <ci-button @click="toggleVisibility">
    Toggle visibility
  </ci-button>
  <ci-button @click="counter++">
    Change content
  </ci-button>
</div>
</template>

<script>
export default {
  data() {
    return {
      isOn: true,
      counter: 0
    }
  },
  methods: {
    toggleVisibility() {
      this.isOn = !this.isOn
    }
  }
}
</script>

Action

Use action-text and action-link props to display action after tooltip text. action-link can be undefined, RawLocation or string.

<template>
<div>
  <ci-tooltip 
    text="This is my tooltip" 
    :action-text="text" 
    :action-link="link" 
    action-target="_blank"
  />
  <br><br>
  <ci-button @click="toggleLink">
    Change link
  </ci-button>
</div>
</template>

<script>
export default {
  data() {
    return {
      isOn: true,
      link: 'https://cirrusinsight.com',
      text: 'Learn More'
    }
  },
  methods: {
    toggleLink () {
      this.isOn = !this.isOn
      this.link = this.isOn ? 'https://cirrusinsight.com' : undefined
      this.text = this.isOn ? 'Learn More' : undefined
    }
  }
}
</script>

Tooltip Directive

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