super simple css tooltips

Tras de herramientas CSS super simples

Agregue fácilmente un flujo de información sobre herramientas a un elemento. El flujo de información sobre herramientas se puede colocar hacia la izquierda, la derecha o la parte inferior de un elemento. Una segunda opción inferior incluye un puntero.

Clases de CSS

• tooltip--left
• tooltip--right
• tooltip--bottom
• tooltip--triangle

Uso

El CSS toma cualquier elemento que tenga una clase tooltip--* y usa el atributo de data-tooltip en el elemento para proporcionar el texto de información sobre herramientas.

[ class ^= "tooltip" ] {
  ...
  content : attr ( data-tooltip );
  ...
}

 < img href =" /img/info.svg " class =" tooltip--left " data-tooltip =" This is the text displayed " >

Apoyo

Versiones actuales de Chrome, Firefox, Safari, Edge e IE10+.