Vue Component Development Kit

# Tooltip

You can use @vue-cdk/tooltip to attach tooltips to any element/component. You simply wrap whatever you want with CTooltip and et voilà: A tooltip appears when the user hovers over the enclosed child.

# Installation

npm install @vue-cdk/tooltip --save

# Usage

@vue-cdk/tooltip exposes a Vue plugin that you can use like this:

import Vue from 'vue'
import Tooltip from '@vue-cdk/tooltip'

Vue.use(Tooltip)

The plugin exposes two components:

  • CTooltip: You can use it to wrap any component and element. CTooltip attaches a tooltip to anything that is enclosed by it. In most circumstances you will wrap something like a button. Use the text–prop to set the text of the tooltip.
  • CTooltipContent: If you want to render custom content inside the tooltip you have to provide a content–slot inside CTooltip. Inside the content–slot you should use CTooltipContent. Otherwise the tooltip might not work properly. This also allows you to customize almost any aspect of the tooltip.

# Examples

# Default

The default tooltip is unstyled. Use the text-prop to set the text of the tooltip.

Show Code
 
<template>
  <CTooltip text="I am a Tooltip" placement="bottom">
    <button>Hover</button>
  </CTooltip>
</template>

# Placement Options

Use placement to set a different placement. The default is top

Show Code
 
<template>
  <div>
    <div class="container">
      <CTooltip :theme="theme" placement="left" text="I am a Tooltip">
        <button>Left</button>
      </CTooltip>

      <CTooltip :theme="theme" placement="top" text="I am a Tooltip">
        <button>Top</button>
      </CTooltip>

      <CTooltip :theme="theme" placement="bottom" text="I am a Tooltip">
        <button>Bottom</button>
      </CTooltip>

      <CTooltip :theme="theme" text="I am a Tooltip">
        <button>Default</button>
      </CTooltip>

      <CTooltip :theme="theme" placement="right" text="I am a Tooltip">
        <button>Right</button>
      </CTooltip>
    </div>

    <label for="examples-tooltip-placement-theme-picker">Theme:</label>
    <select id="examples-tooltip-placement-theme-picker" v-model="theme">
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>
  </div>
</template>

<script>
import '@vue-cdk/tooltip/themes/light.css'
import '@vue-cdk/tooltip/themes/dark.css'
export default {
  data() {
    return {
      theme: 'dark',
    }
  },
}
</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.container > button {
  cursor: pointer;
  margin-right: 2px;
  margin-left: 2px;
}
</style>

# Default with custom Content

Instead of setting the text-prop you can also render anything inside a tooltip by providing a custom content-template.

Show Code
 
<template>
  <CTooltip placement="bottom">
    <button>Hover</button>
    <template #content>
      <CTooltipContent class="content">
        <p>I am a Tooltip with <strong>custom</strong> content.</p>
        <p>I can display <strong>multiple</strong> lines of text…</p>
        <p>…and anything else.</p>
      </CTooltipContent>
    </template>
  </CTooltip>
</template>

<style scoped>
.content {
  border: 1px solid red;
  background-color: white;
  z-index: 19;
  padding: 10px;
}
.content > p {
  margin: 0;
  font-size: 0.75rem;
}
</style>

# Themes

# Default

If you don't set a theme then the tooltip is rendered without any styling.

Show Code
 
<template>
  <CTooltip placement="bottom">
    <button>Hover to show Tooltip</button>
    <template #content>
      <CTooltipContent>I am a tooltip</CTooltipContent>
    </template>
  </CTooltip>
</template>

# Light

Set theme to light in order to get dark tooltips.

Show Code
 
<template>
  <CTooltip theme="light" placement="bottom">
    <button>Hover to show Tooltip</button>
    <template #content>
      <CTooltipContent>I am a tooltip</CTooltipContent>
    </template>
  </CTooltip>
</template>

<script>
import '@vue-cdk/tooltip/themes/light.css'
export default {}
</script>

You can also set a theme and render custom content.

Show Code
 
<template>
  <CTooltip theme="light" placement="bottom">
    <button>Hover to show Tooltip</button>
    <template #content>
      <CTooltipContent>
        <img src="./../logo-small@1x.png" width="100" height="100" />
      </CTooltipContent>
    </template>
  </CTooltip>
</template>

<script>
import '@vue-cdk/tooltip/themes/light.css'
export default {}
</script>

This is how the light theme looks like without an arrow:

Show Code
 
<template>
  <CTooltip no-arrow placement="bottom" theme="light">
    <button>Hover to show Tooltip</button>
    <template #content>
      <CTooltipContent>I am a tooltip</CTooltipContent>
    </template>
  </CTooltip>
</template>

<script>
import '@vue-cdk/tooltip/themes/light.css'
export default {}
</script>

# Dark

Set theme to dark in order to get dark tooltips.

Show Code
 
<template>
  <CTooltip theme="dark" placement="bottom">
    <button>Hover to show Tooltip</button>
    <template #content>
      <CTooltipContent>I am a tooltip</CTooltipContent>
    </template>
  </CTooltip>
</template>

<script>
import '@vue-cdk/tooltip/themes/dark.css'
export default {}
</script>

You can also set a theme and render custom content.

Show Code
 
<template>
  <CTooltip theme="dark" placement="bottom">
    <button>Hover to show Tooltip</button>
    <template #content>
      <CTooltipContent>
        <img src="./../logo-small@1x.png" width="100" height="100" />
      </CTooltipContent>
    </template>
  </CTooltip>
</template>

<script>
import '@vue-cdk/tooltip/themes/dark.css'
export default {}
</script>

This is how the dark theme looks like without an arrow:

Show Code
 
<template>
  <CTooltip no-arrow placement="bottom" theme="dark">
    <button>Hover to show Tooltip</button>
    <template #content>
      <CTooltipContent>I am a tooltip</CTooltipContent>
    </template>
  </CTooltip>
</template>

<script>
import '@vue-cdk/tooltip/themes/dark.css'
export default {}
</script>

# Controlling the Tooltip

You can manually show and hide the tooltip by setting the visible–prop.

Show Code
 
<template>
  <div class="container">
    <button @click="visible = true">Show Tooltip of 'Button'</button>
    <button @click="visible = false">Hide Tooltip of 'Button'</button>

    <CTooltip theme="dark" :visible="visible" text="I am a Tooltip">
      <button>Button</button>
    </CTooltip>
  </div>
</template>
<script>
import '@vue-cdk/tooltip/themes/dark.css'
export default {
  data() {
    return {
      visible: false,
    }
  },
}
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
}
.container > button {
  margin-top: 10px;
}
</style>

# API

Playground