Biblioteca de información sobre herramientas de CSS pequeña-CSS3-ToolTip

Vista prévia

Descripción

Sólo otra biblioteca de CSS que anexa las descripciones emergentes activadas por Hover a cualquier elemento DOM usando CSS/CSS3 puro.

Funcionamiento

Descargue e inserte la hoja de estilo ToolTip. CSS en el documento.

<link rel="stylesheet" href="tooltip.css">

O puede copiar el formulario CSS a continuación.

*[data-tooltip] { position: relative; }

*[data-tooltip]:hover:after, *[data-tooltip]:hover:before {

opacity: 1;

visibility: visible;
}

*[data-tooltip]:after, *[data-tooltip]:before {

position: absolute;

top: auto;

bottom: 100%;

left: 50%;

opacity: 0;

visibility: hidden;

-webkit-transition: 0.15s ease-in;

transition: 0.15s ease-in;

z-index: 5;
}

*[data-tooltip]:after {

content: attr(data-tooltip);

background: rgba(0, 0, 0, 0.8);

padding: 2px 7px;

text-align: center;

color: #fff;

font-size: 12px;

line-height: 16px;

white-space: nowrap;

border-radius: 4px;

-webkit-transform: translate(-50%, -8px);

transform: translate(-50%, -8px);
}

*[data-tooltip]:before {

content: '';

top: auto;

bottom: 100%;

border: 4px solid transparent;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

border-top-color: rgba(0, 0, 0, 0.8);
}

*[data-tooltip][data-position="bottom"]:after {

top: 100%;

bottom: auto;

-webkit-transform: translate(-50%, 8px);

transform: translate(-50%, 8px);
}

*[data-tooltip][data-position="bottom"]:before {

top: 100%;

bottom: auto;

border-color: transparent;

border-bottom-color: rgba(0, 0, 0, 0.8);
}

*[data-tooltip][data-position="left"]:after {

left: 0;

bottom: auto;

top: 50%;

margin-left: -8px;

-webkit-transform: translate(-100%, -50%);

transform: translate(-100%, -50%);
}

*[data-tooltip][data-position="left"]:before {

left: 0;

bottom: auto;

top: 50%;

-webkit-transform: translate(-100%, -50%);

transform: translate(-100%, -50%);

border-color: transparent;

border-left-color: rgba(0, 0, 0, 0.8);
}

*[data-tooltip][data-position="right"]:after {

left: 100%;

bottom: auto;

top: 50%;

-webkit-transform: translate(8px, -50%);

transform: translate(8px, -50%);
}

*[data-tooltip][data-position="right"]:before {

left: 100%;

top: 50%;

bottom: auto;

-webkit-transform: translate(0, -50%);

transform: translate(0, -50%);

border-color: transparent;

border-right-color: rgba(0, 0, 0, 0.8);
}

Anexar una información sobre herramientas a un elemento que especifique:

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

Cambie la posición de la información de herramientas predeterminada.

<a data-placement="left" data-tooltip="Tooltip on left">Tooltip on left</a>

<a data-placement="top" data-tooltip="Tooltip on top">Tooltip on top</a>

<a data-placement="bottom" data-tooltip="Tooltip on bottom">Tooltip on bottom</a>

<a data-placement="right"
data-tooltip="Tooltip on right">Tooltip on right</a>