Fácil animado ToolTip biblioteca CSS-Tootik

Vista prévia

Descripción

Tootik es una librería CSS pura que te permite crear descripciones emergentes de HTML5 animadas con posiciones variables, tipos y apariencias.

Funcionamiento

Sólo tiene que incluir la hoja de estilo principal tootik. CSS en la página web y listo.

<link href="css/tootik.css" rel="stylesheet">

Defina el contenido que se mostrará en la información sobre herramientas utilizando atributo Data-tootik:

<a href="#" data-tootik="I am a tooltip">Hover me</a>

Cambie la posición predeterminada.

<a href="javascript:;" data-tootik="Right" data-tootik-conf="right">right</a>
<a href="javascript:;" data-tootik="Bottom" data-tootik-conf="bottom">bottom</a>
<a href="javascript:;" data-tootik="Left" data-tootik-conf="left">left</a>

Cambie el tema de información de herramientas predeterminado.

<a href="javascript:;" data-tootik="Invert" data-tootik-conf="invert">invert</a>
<a href="javascript:;" data-tootik="Success" data-tootik-conf="success">success</a>
<a href="javascript:;" data-tootik="Info" data-tootik-conf="info">info</a>
<a href="javascript:;" data-tootik="Warning" data-tootik-conf="warning">warning</a>
<a href="javascript:;" data-tootik="Danger" data-tootik-conf="danger">danger</a>

Más opciones de configuración que se pueden pasar a través del atributo Data-tootik-conf .

<a href="#" data-tootik="Delay" data-tootik-conf="delay">delay</a>
<a href="#" data-tootik="No Fading" data-tootik-conf="no-fading">no-fading</a>
<a href="#" data-tootik="Shadow" data-tootik-conf="shadow">shadow</a>
<a href="#" data-tootik="A pure CSS Tooltip library." data-tootik-conf="multiline">multiline</a>
<a href="#" data-tootik="No Arrow" data-tootik-conf="no-arrow">no-arrow</a>
<a href="#" data-tootik="Square" data-tootik-conf="square">square</a>

Modifique o reemplace las variables predeterminadas en el SCSS.

// Misc
$font-size: 13px;
$transition-style: cubic-bezier(0.73, 0.01, 0, 1);
$border-width: 4px;
// Colors
$color-default: #000000;
$color-invert: #ffffff;
$tootik-default: $color-default;
$tootik-invert: $color-invert;
$tootik-success: #8bc34a;
$tootik-info: #29D2E4;
$tootik-warning: #F87D09;
$tootik-danger: #e91e63;