Elegante biblioteca de información sobre herramientas con Pure CSS-eleganttips. CSS

Vista prévia

Descripción

Inicialice el plugin uScroll. Parámetros:

Características

• 8 posiciones.
• 3 temas incorporados.
• Con o sin indicadores de flecha.
• Animaciones suaves basadas en CSS3.

¿Cómo funciona?

Inicialice el plugin uScroll. Parámetros:

<link rel="stylesheet" href="eleganttips.min.css">

Agregue la clase CSS ' et ' a los elementos de destino y ajuste el contenido de la información sobre herramientas en un elemento alineado con una clase de posición de su elección:

• et-Bottom
• y-Top
• et-Left
• et-Right
• et-Left-bottom
• et-Left-top
• et-Right-bottom
• et-Right-top

<button class='et'>Hover me

<span class='y-Top'>


Tooltip here!

</span>
</button>

Agregue la clase CSS ' et ' a los elementos de destino y ajuste el contenido de la información sobre herramientas en un elemento alineado con una clase de posición de su elección:

<button class='et'>Hover me

<span class='y-Top et-arrow'>


Tooltip here

</span>
</button>

Cambie el tema de información de herramientas predeterminado.

<button class='et'>Hover me

<span class='y-Top et-arrow et-style-night'>


Night Theme

</span>
</button>

<button class='et'>Hover me

<span class='y-Top et-arrow et-style-warn'>


Warning Theme

</span>
</button>

Establezca el ancho de la información sobre herramientas.

<button class='et'>Hover me

<span class='y-Top et-arrow et-narrow'>


Narrow Tooltip

</span>
</button>

<button class='et'>Hover me

<span class='y-Top et-arrow et-wide'>


Wide Tooltip

</span>
</button>

Registro de cambios

10/19/2018

• Actualizar fondo-color en el archivo CSS