Tooltip

# Tooltip

# Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

Easily add a tooltip with the vs-tooltip component, the content within the default slot is the parent element of the tooltip and the one that triggers to show or hide it

The tooltip slot is the content inside the tooltip

Code copied

# Position

Change the position of the tooltip with the properties

  • top (default)
  • bottom
  • left
  • right
Code copied

# Color

Use the color property to change the base color of the component and some of the child components, to better understand the handling of colors and themes you can see ithere

Allowed values ​​are:

  • primary
  • success
  • danger
  • warning
  • dark
  • RGB
  • HEX
Code copied

# Border

Change the style of the tooltip by adding a border and changing the color of the background with the border or border-thick property

Now the color property would change the color of the border

Code copied

# Square

Change the border-radius of the tooltip so that it is completely a rectangle

Code copied

# Circle

Change the border-radius of the tooltip to make it more circular

This property only applies when the tooltip has less than one line of text.

Code copied

# Shadow

Change the style of the tooltip to have a shadow and the background color

Code copied

# Not Arrow

In some cases you may need to remove the arrow from the tooltip for this you can use the not-arrow property

Code copied

# Loading

Add an animation and loading style to the tooltip

Code copied

# Content

We create the tooltip component in such a way that you have a lot of freedom to add anything and create all kinds of interface inside it.

Code copied

# API

props

Property Type Values Description default Example More
v-model boolean truefalse Determination if the component is active (visible). false Usage
color String Vuesax colors RGB HEX Change the color of the tooltip. text Usage Open Close 
<vs-tooltip primary>
  <vs-button flat>
    Primary
  </vs-button>
  <template #tooltip>
    This is a beautiful button
  </template>
</vs-tooltip>
left, right, bottom Boolean truefalse Change the position of the tooltip. top Usage Open Close 
<vs-tooltip left>
  <vs-button border>
    left
  </vs-button>
  <template #tooltip>
    This is a beautiful button
  </template>
</vs-tooltip>
border Boolean truefalse Change the style of the tooltip by adding a border. primary Usage Open Close 
<vs-tooltip border>
  <vs-button transparent>
    Do hover here
  </vs-button>
  <template #tooltip>
    This is a beautiful button
  </template>
</vs-tooltip>
border-thick Boolean truefalse Change the style of the tooltip by adding a thick border only at the arrow position. false Usage Open Close 
<vs-tooltip color="#7d33ff" border-thick>
  <vs-button color="#7d33ff" transparent>
    Do hover here
  </vs-button>
  <template #tooltip>
    This is a beautiful button
  </template>
</vs-tooltip>
square Boolean triefalse Determine if the tooltip is rectangular without border-radius. false Usage Open Close 
<vs-tooltip square>
  <vs-button square flat>
    Do hover here
  </vs-button>
  <template #tooltip>
    This is a beautiful button
  </template>
</vs-tooltip>
circle boolean truefalse Change the border radius to 20px so that if it is a single line of text the corners are circular. false Usage Open Close 
<vs-tooltip circle>
  <vs-button circle flat>
    Do hover here
  </vs-button>
  <template #tooltip>
    This is a beautiful button
  </template>
</vs-tooltip>
shadow boolean truefalse Change the style of the tooltip by adding a shadow and changing the background. false Usage Open Close 
<vs-tooltip shadow>
  <vs-button flat>
    Do hover here
  </vs-button>
  <template #tooltip>
    This is a beautiful button
  </template>
</vs-tooltip>
not-arrow boolean truefalse Remove the arrow from the tooltip. false Usage Open Close 
<vs-tooltip not-arrow left>
  <vs-button border>
    left not-arrow
  </vs-button>
  <template #tooltip>
    This is a beautiful button
  </template>
</vs-tooltip>
not-hover boolean truefalse The default tooltip is generated by doing hover on the parent element, that functionality is removed and no longer appears or disappears when doing hover. false Usage Open Close 
<vs-tooltip bottom shadow not-hover v-model="activeTooltip1">
  <vs-button danger @click="activeTooltip1=!activeTooltip1">
    Click Delete User
  </vs-button>
  <template #tooltip>
    <div class="content-tooltip">
      <h4 class="center">
        Confirm
      </h4>
      <p>
        You are sure to delete this user, by doing so you cannot recover the data
      </p>
      <footer>
        <vs-button @click="activeTooltip1=false" danger block>
          Delete
        </vs-button>
        <vs-button @click="activeTooltip1=false" transparent dark block>
          Cancel
        </vs-button>
      </footer>
    </div>
  </template>
</vs-tooltip>
interactivity boolean truefalse Determine if the tooltip is interactive and makes it possible to click without automatically hiding. false Usage Open Close 
<vs-tooltip shadow interactivity>
  <vs-avatar>
    <img src="/avatars/avatar-5.png" alt="">
  </vs-avatar>
  <template #tooltip>
    <div class="content-tooltip">
      <div class="body">
        <div class="text">
            Cosed Tasks
          <span>
          89
          </span>
        </div>
        <vs-avatar circle size="80" @click="activeTooltip1=!activeTooltip1">
          <img src="/avatars/avatar-5.png" alt="">
        </vs-avatar>
        <div class="text">
            Open Tasks
          <span>
          8
          </span>
        </div>
      </div>
      <footer>
        <vs-button circle icon border>
          <i class='bx bxs-share-alt'></i>
        </vs-button>
        <vs-button circle>
          Message
        </vs-button>
        <vs-button circle icon border>
          <i class='bx bx-like' ></i>
        </vs-button>
      </footer>
    </div>
  </template>
</vs-tooltip>
loading boolean truefalse Determine if the tooltip has a loading style and animation. false Usage Open Close 
<template>
  <div class="center">
    <vs-tooltip loading>
      <vs-button flat>
        Do hover here loading
      </vs-button>
      <template #tooltip>
        This is a beautiful button
      </template>
    </vs-tooltip>
    <vs-tooltip loading>
      <vs-button flat>
        Do hover here loading
      </vs-button>
      <template #tooltip></template>
    </vs-tooltip>
  </div>
</template>

slots

Property Type Values Description default Example More
default slot Add the trigger element of the tooltip. Usage Open Close 
<vs-tooltip>
  <vs-button flat>
    Do hover here
  </vs-button>
  <template #tooltip>
    This is a beautiful button
  </template>
</vs-tooltip>
tooltip slot It is the content that will go inside the tooltip. Usage Open Close 
<vs-tooltip>
  <vs-button flat>
    Do hover here
  </vs-button>
  <template #tooltip>
    This is a beautiful button
  </template>
</vs-tooltip>
Last Updated: 3/3/2020, 3:21:13 AM

Dialog