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

Agrega un tooltip fácilmente con el componente vs-tooltip el contenido dentro de el slot default es el elemento padre de el tooltip y el que dispara el mostrarlo o ocultarlo

El slot tooltip es el contenido dentro de el tooltip

Code copied

# Position

Cambia la posición de el tooltip con las propiedades

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

# Color

Usa la propiedad color para cambiar el color base del componente y algunos de los componentes hijos, para entender mejor el manejo de los colores y temas puedes verlo aqui

los valores permitidos son:

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

# Border

Cambia el estilo de el tooltip agregando un borde y cambiando el color de el fondo con la propiedad border o border-thick

Ahora la propiedad color cambiaría el color de el borde

Code copied

# Square

Cambia el border-radius de el tooltip para que sea totalmente un rectángulo

Code copied

# Circle

Cambia el border-radius de el tooltip para que sea mas circular

Esta propiedad solo aplica cuando el tooltip tiene menos de una linea de texto

Code copied

# Shadow

Cambia el estilo de el tooltip a tener un shadow y el color de fondo

Code copied

# Not Arrow

Puede que en algunos casos necesites eliminar la flecha de el tooltip para ello puedes usar la propiedad not-arrow

Code copied

# Loading

Agrega una animación y estilo de cargando al tooltip

Code copied

# Content

Creamos el componente tooltip de tal manera que tengas mucha libertad de agregar cualquier cosa y crear todo tipo de interfaz adentro de el

Code copied

# API

props

Property Type Values Description default Example More
v-model boolean truefalse Determina si el componente se encuentra activo (visible). false Usage
color String Vuesax colors RGB HEX Cambia el color de el 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 Cambia la position de el 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 Cambia el estilo de el tooltip agregando un borde. 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 Cambia el estilo de el tooltip agregando un borde grueso solo en la posición de la flecha. 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 Determina si el tooltip es rectangular sin 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 Cambia el border radius a 20px haciendo que si es una sola linea de texto sea circular las esquinas. 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 Cambia el estilo de el tooltip agregando un shadow y cambiando el fondo. 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 Elimina la flecha de el 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 El tooltip por defecto se genera el hacer hover en el elemento padre, esa funcionalidad se elimina y ya no aparece o desaparece al hacer 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 Determina si el tooltip es interactivo y hace que puedas hacer click sin que se oculte automáticamente. 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 Determina si el tooltip tiene un estilo y animación de loading. 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 Agrega el elemento disparador de el 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 Es el contenido que va a ir dentro de el 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

Dialog