Easy Animated Tooltip CSS Library – Tootik

Preview:

Description:

Tootik is a pure CSS library which lets you create animated, HTML5 pop-up tooltips with variable positions, types and appearances.

How to use it:

Just include the core stylesheet tootik.css on the webpage and done.

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

Define the content to be displayed in the tooltip using data-tootik attribute:

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

Change the default position.

<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>

Change the default tooltip theme.

<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>

More configuration options which can be passed via data-tootik-conf attribute.

<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>

Modify or override the default variables in the 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;