Biblioteca de JavaScript para el ratón siga las descripciones emergentes-mousetip. js

Vista prévia

Descripción

mousetip. js es una biblioteca de JavaScript ligera y sin CSS que se utiliza para crear información sobre herramientas que siempre sigue al cursor.

Funcionamiento

Instalación:

# NPM
$ npm install purejs-mousetip --save

Solo tiene que colocar el alforja mousetip. js al final del archivo HTML y ya está listo para ir.

<script src="src/mousetip.js"></script>

Inicialice mousetip. js.

let mouseTip = new MouseTip();
mouseTip.start();

Agregue la clase CSS ' mousetip ' al elemento target y defina el contenido de la información sobre herramientas utilizando el atributo ' mousetip-msg ' de la siguiente manera:

<div class="el" mousetip mousetip-msg="I'm a tooltip"></div>

Available options. All the following options can be passed via 'mousetip-*' attributes without any JS call.

• mousetip-pos = "abajo a la derecha": inferior, centro, superior, derecha, centro, izquierda
• mousetip-CSS-ZIndex = "9999 ″: La propiedad z-index de CSS
• mousetip-CSS-position = "Absolute": Propiedad de posición CSS
• mousetip-CSS-padding = "15px": padding
• moutstip-CSS-borderRadius = "4px": radio de borde
• mousetip-CSS-background = "RGBA (0, 0, 0, 0.75)": color de fondo
• mousetip-CSS-color = "#fff": color del texto
• mousetip-enable-HTML: habilite el contenido HTML

<div class="el" mousetip



mousetip-msg="I'm a tooltip"


 mousetip-pos="bottom right"


 mousetip-css-zindex="9999"


 mousetip-css-position="absolute"


 mousetip-css-padding="15px"


 moutstip-css-borderradius="4px"


 mousetip-css-background="rgba(0,0,0,0.75)"


 mousetip-css-color="#fff"


 ></div>

También puede config la información sobre herramientas en JavaScript.

let mouseTip : new MouseTip({


cssZIndex



: '9999',


cssPosition


: 'absolute',


cssPadding


 : '15px',


cssBorderRadius
: '4px',


cssBackground

: 'rgba(0,0,0,0.75)',


cssColor



 : '#fff',


html





 : true,


position



 : 'bottom right',


selector



 : 'mousetip',


stylesheet


 : false
});

Registro de cambios

v2.1.3 (02/08/2019)

• Errores