Biblioteca de información sobre herramientas minimalista con CSS puro/CSS3-Tipme

Vista prévia

Descripción

Tipme proporciona una forma sencilla de adjuntar información sobre herramientas a cualquier elemento DOM con clases CSS. Construido usando CSS, CSS3 y SCSS.

Funcionamiento

Agregue los siguientes fragmentos de código CSS a su archivo CSS.

.tipmes {

list-style: none;

padding: 0;

margin: 0;

display: flex;

flex-wrap: wrap;
}

.tipmes li {

margin-right: 30px;

margin-bottom: 30px;

border: 2px solid #fff;

text-align: center;

padding: 1rem;

flex: 1 1 300px;
}

.tipmes li:nth-child(3n) { margin-right: 0; }

.tipme {

display: inline-block;

position: relative;
}

.tipme:before {

content: '';

opacity: 0;

visibility: hidden;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-ms-transtion: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;
}

.tipme:after {

content: attr(data-tipme);

position: absolute;

background-color: #fff;

color: #000;

white-space: nowrap;

padding: 3px 8px;

border-radius: 4px;

opacity: 0;

visibility: hidden;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-ms-transtion: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;
}

.tipme:hover:before, .tipme:hover:after {

opacity: 1;

visibility: visible;
}

.tipme.tipme-tl:after {

bottom: 115%;

right: 50%;
}

.tipme.tipme-tc:after {

bottom: 115%;

left: 50%;

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

transform: translateX(-50%);
}

.tipme.tipme-tr:after {

bottom: 115%;

left: 50%;
}

.tipme.tipme-ml:after {

top: 50%;

right: 115%;

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

transform: translateY(-50%);
}

.tipme.tipme-mr:after {

top: 50%;

left: 115%;

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

transform: translateY(-50%);
}

.tipme.tipme-bl:after {

top: 115%;

right: 50%;
}

.tipme.tipme-bm:after {

top: 115%;

left: 50%;

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

transform: translateX(-50%);
}

.tipme.tipme-br:after {

top: 115%;

left: 50%;
}

Al agregar las clases CSS ' tipme tipme-TL ' a un elemento se mostrará una descripción emergente ' superior izquierda ' en el desplazamiento del mouse. Use Data-tipme para especificar el contenido personalizado que se muestra en la información sobre herramientas.

<span class="tipme tipme-tl" data-tipme="This is Tipme!">Top left</span>

Más ejemplos.

<span class="tipme tipme-tc" data-tipme="This is Tipme!">Top center</span>
<span class="tipme tipme-tr" data-tipme="This is Tipme!">Top right</span>
<span class="tipme tipme-ml" data-tipme="This is Tipme!">Middle left</span>
<span class="tipme tipme-mr" data-tipme="This is Tipme!">Middle right</span>
<span class="tipme tipme-bl" data-tipme="This is Tipme!">Bottom left</span>
<span class="tipme tipme-bm" data-tipme="This is Tipme!">Bottom center</span>
<span class="tipme tipme-br" data-tipme="This is Tipme!">Bottom right</span>