MooTools - Información sobre herramientas
MooTools proporciona información sobre herramientas diferentes para diseñar estilos y efectos personalizados. En este capítulo, aprenderemos las distintas opciones y eventos de la información sobre herramientas, así como algunas herramientas que le ayudarán a agregar o eliminar información sobre herramientas de los elementos.
Creación de una nueva información sobre herramientas
Crear una información sobre herramientas es muy simple. Primero, tenemos que crear el elemento donde adjuntaremos la información sobre herramientas. Tomemos un ejemplo que crea una etiqueta de anclaje y la agrega a la clase Tips en el constructor. Eche un vistazo al siguiente código.
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>Eche un vistazo al código utilizado para crear información sobre herramientas.
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);Ejemplo
El siguiente ejemplo explica la idea básica de la información sobre herramientas. Eche un vistazo al siguiente código.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);
});
</script>
</head>
<body>
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>
</body>
</html>Recibirá el siguiente resultado:
Salida
Opciones de información sobre herramientas
Solo hay cinco opciones en Consejos y todas se explican por sí mismas.
showDelay
Un número entero medido en milisegundos, esto determinará el retraso antes de que se muestre la información sobre herramientas una vez que el usuario coloque el mouse sobre el elemento. El valor predeterminado está establecido en 100.
hideDelay
Al igual que showDelay anterior, este número entero (también medido en milisegundos) determina cuánto tiempo esperar antes de ocultar la sugerencia una vez que el usuario abandona el elemento. El valor predeterminado está establecido en 100.
nombre de la clase
Esto le permite establecer un nombre de clase para el ajuste de la información sobre herramientas. El valor predeterminado está establecido en Nulo.
Compensar
Esto determina qué tan lejos del elemento aparecerá la información sobre herramientas. 'x' se refiere al desplazamiento hacia la derecha, donde 'y' es el desplazamiento hacia abajo (ambos relativos al cursor SI la opción 'fija' se establece en falso, de lo contrario, el desplazamiento es relativo al elemento original). El valor predeterminado es x: 16, y: 16
Fijo
Esto establece si la información sobre herramientas seguirá o no a su mouse si se mueve alrededor del elemento. Si lo establece en verdadero, la información sobre herramientas no se moverá cuando mueva el cursor, pero permanecerá fijo en relación con el elemento original. El valor predeterminado es falso.
Eventos de información sobre herramientas
Los eventos de información sobre herramientas siguen siendo simples, como el resto de esta clase. Hay dos eventos, onShow y onHide, y funcionan como es de esperar.
en el programa()
Este evento se ejecuta cuando aparece la información sobre herramientas. Si establece un retraso, este evento no se ejecutará hasta que finalice el retraso.
onHide ()
La información sobre herramientas se oculta con la ejecución de este evento. Si hay un retraso, este evento no se ejecutará hasta que finalice el retraso.
Métodos de información sobre herramientas
Hay dos métodos para la información sobre herramientas: adjuntar y separar. Esto le permite apuntar a un elemento específico y agregarlo a un objeto de información sobre herramientas (y por lo tanto, inherente a todas las configuraciones en esa instancia de clase) o separar un elemento en particular.
adjuntar()
Para adjuntar un nuevo elemento a un objeto de información sobre herramientas, simplemente indique el objeto de sugerencia, la tachuela en .attach ();, y finalmente coloque el selector de elementos entre corchetes ().
Syntax
toolTips.attach('#tooltipID3');dettach ()
Este método funciona igual que el método .attach, pero el resultado es completamente opuesto. Primero, indique el objeto tip, luego agregue .dettach (), y finalmente coloque su selector de elementos dentro de ().
Syntax
toolTips.dettach('#tooltipID3');Example
Tomemos un ejemplo que explica la información sobre herramientas. Eche un vistazo al siguiente código.
<!DOCTYPE html>
<html>
<head>
<style>
.custom_tip .tip {
background-color: #333;
padding: 5px;
}
.custom_tip .tip-title {
color: #fff;
background-color: #666;
font-size: 20px;
padding: 5px;
}
.custom_tip .tip-text {
color: #fff;
padding: 5px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips, {
showDelay: 1000, //default is 100
hideDelay: 100, //default is 100
className: 'custom_tip', //default is null
offsets: {
'x': 100, //default is 16
'y': 16 //default is 16
},
fixed: false, //default is false
onShow: function(toolTipElement){
toolTipElement.fade(.8);
$('show').highlight('#FFF504');
},
onHide: function(toolTipElement){
toolTipElement.fade(0);
$('hide').highlight('#FFF504');
}
});
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', //default is null
});
$('tooltipID1').store('tip:text',
'You can replace the href with whatever text you want.');
$('tooltipID1').store('tip:title', 'Here is a new title.');
$('tooltipID1').set('rel', 'This will not change the tooltips text');
$('tooltipID1').set('title', 'This will not change the tooltips title');
toolTips.detach('#tooltipID2');
toolTips.detach('#tooltipID4');
toolTips.attach('#tooltipID4');
});
</script>
</head>
<body>
<div id = "show" class = "ind">onShow</div>
<div id = "hide" class = "ind">onHide</div>
<p><a id = "tooltipID1" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' of 1"
href = "http://www.tutorialspoint.com">Tool tip 1</a></p>
<p><a id = "tooltipID2" class = "tooltip_demo" title = "2nd Tooltip Title"
rel = "here is the default 'text' of 2"
href = "http://www.tutorialspoint.com">Tool tip is detached</a></p>
<p><a id = "tooltipID3" class = "tooltip_demo_2" title = "3rd Tooltip Title"
rel = "here is the default 'text' of 3"
href = "http://www.tutorialspoint.com">Tool tip 3</a></p>
<p><a id = "tooltipID4" class = "tooltip_demo_2" title = "4th Tooltip Title"
rel = "here is the default 'text' of 4, i was detached then attached"
href = "http://www.tutorialspoint.com">Tool tip detached then attached
again. </a></p>
<p><a id = "tooltipID5" class = "tooltip2" title = "Other Tooltip Title"
rel = "here is the default 'text' of 'other style'"
href = "http://www.tutorialspoint.com/">A differently styled tool tip</a></p>
</body>
</html>Recibirá el siguiente resultado:
Output