Tooltip

Very easy to implement and in any element of the DOM.

Default

To add a tooltip we have the component vs-tooltip

Tooltip Default

Tooltip Default

Tooltip Default

<template lang="html">
  <div class="centerx">
    <vs-tooltip text="Tooltip Default">
       <vs-switch v-model="switch1"/>
    </vs-tooltip>
    <vs-tooltip text="Tooltip Default">
      <vs-input-number v-model="number1"/>
    </vs-tooltip>
    <vs-tooltip text="Tooltip Default">
      <vs-button color="primary" type="border">Button</vs-button>
    </vs-tooltip>
  </div>
</template>

<script>
export default {
  data(){
    return {
      switch1:true,
      number1:10,
    }
  }
}
</script>

Position

You can change the position at which the tooltip appears with the property position.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed velit a ipsum dictum hendrerit in id urna. Aliquam erat volutpat. Nam eleifend id ex at viverra

Tooltip position Top

Tooltip position Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed velit a ipsum dictum hendrerit in id urna. Aliquam erat volutpat. Nam eleifend id ex at viverra

<template lang="html">
  <div class="centerx">
    <vs-tooltip text="Tooltip position Left" position="left" >
      <vs-button type="gradient">Left</vs-button>
    </vs-tooltip>
    <vs-tooltip text="Tooltip position Top" position="top" >
      <vs-button type="gradient">Top</vs-button>
    </vs-tooltip>
    <vs-tooltip text="Tooltip position Bottom" position="bottom" >
      <vs-button type="gradient">Bottom</vs-button>
    </vs-tooltip>
    <vs-tooltip text="Tooltip position Right" position="right" >
      <vs-button type="gradient">Right</vs-button>
    </vs-tooltip>
  </div>
</template>

Delay

You can change the delay in appearing the tooltip with the property delay.

Tooltip default delay

Tooltip delay 0.5s

Tooltip delay 2s

<template lang="html">
  <div class="centerx">
    <vs-tooltip text="Tooltip default delay">
      <vs-button>Delay default</vs-button>
    </vs-tooltip>
    <vs-tooltip delay=".5s" text="Tooltip delay 0.5s">
      <vs-button>Delay 0.5s</vs-button>
    </vs-tooltip>
    <vs-tooltip delay="2s" text="Tooltip delay 2s">
      <vs-button>Delay 2s</vs-button>
    </vs-tooltip>
  </div>
</template>

Color

To change the color of the tooltip, use the property color. You are able to use the Main Colors or RGB and HEX colors.

:::warning Only RGB and HEX colors are supported. :::

Tooltip default delay

Tooltip default delay

Tooltip default delay

Tooltip default delay

Tooltip default delay

Tooltip default delay

Tooltip default delay

Tooltip default delay

<template lang="html">
  <div class="centerx">
    <vs-tooltip text="Tooltip default delay">
      <vs-button type="gradient">Default Color</vs-button>
    </vs-tooltip>
    <vs-tooltip color="primary" text="Tooltip default delay">
      <vs-button type="border">Color primary</vs-button>
    </vs-tooltip>
    <vs-tooltip color="success" text="Tooltip default delay">
      <vs-button color="success" type="border">Color success</vs-button>
    </vs-tooltip>
    <vs-tooltip color="danger" text="Tooltip default delay">
      <vs-button color="danger" type="border">Color danger</vs-button>
    </vs-tooltip>
    <vs-tooltip color="warning" text="Tooltip default delay">
      <vs-button color="warning" type="border">Color warning</vs-button>
    </vs-tooltip>
    <vs-tooltip color="dark" text="Tooltip default delay">
      <vs-button color="dark" type="border">Color dark</vs-button>
    </vs-tooltip>
    <vs-tooltip color="rgb(42, 207, 133)" text="Tooltip default delay">
      <vs-button color="rgb(42, 207, 133)" type="border">Color RGB</vs-button>
    </vs-tooltip>
    <vs-tooltip color="#4a0d6b" text="Tooltip default delay">
      <vs-button color="#4a0d6b" type="border">Color HEX</vs-button>
    </vs-tooltip>
  </div>
</template>

Title

If necessary, you can add a title to the tooltip with the property title

Are you sure?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque non neque sed aliquet.

<template lang="html">
  <div class="centerx">
    <vs-tooltip
      title="Are you sure?"
      color="warning"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque non neque sed aliquet.">
       <vs-button color="warning" type="flat">Title Tooltip</vs-button>
    </vs-tooltip>
  </div>
</template>