MooTools - Dicas de ferramentas
MooTools fornece dicas de ferramentas diferentes para criar estilos e efeitos personalizados. Neste capítulo, aprenderemos as várias opções e eventos de dicas de ferramentas, bem como algumas ferramentas que o ajudarão a adicionar ou remover dicas de elementos.
Criando uma nova dica de ferramenta
Criar uma dica de ferramenta é muito simples. Primeiro, temos que criar o elemento onde anexaremos a dica de ferramenta. Tomemos um exemplo que cria uma tag âncora e a adiciona à classe Tips no construtor. Dê uma olhada no código a seguir.
<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>Dê uma olhada no código usado para criar a dica de ferramenta.
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);Exemplo
O exemplo a seguir explica a ideia básica das dicas de ferramentas. Dê uma olhada no código a seguir.
<!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>Você receberá a seguinte saída -
Resultado
Opções de dica de ferramenta
Existem apenas cinco opções em Dicas e todas elas são bastante autoexplicativas.
showDelay
Um número inteiro medido em milissegundos, isso determinará o atraso antes que a dica de ferramenta seja exibida quando o usuário passar o mouse sobre o elemento. O padrão é 100.
hideDelay
Assim como showDelay acima, este número inteiro (também medido em milissegundos) determina quanto tempo esperar antes de ocultar a dica depois que o usuário deixa o elemento. O padrão é 100.
nome da classe
Isso permite definir um nome de classe para a quebra de dica de ferramenta. O padrão é definido como Nulo.
Deslocamento
Isso determina a que distância do elemento a dica aparecerá. 'x' refere-se ao deslocamento à direita, onde 'y' é o deslocamento para baixo (ambos em relação ao cursor SE a opção 'fixo' for definida como falsa, caso contrário, o deslocamento é relativo ao elemento original). O padrão é x: 16, y: 16
Fixo
Isso define se a dica de ferramenta seguirá ou não o mouse se você mover o elemento. Se você definir como verdadeiro, a dica de ferramenta não se moverá quando você mover o cursor, mas permanecerá fixa em relação ao elemento original. O padrão é definido como falso.
Eventos de dica de ferramenta
Os eventos de dica de ferramenta permanecem simples, como o resto desta classe. Existem dois eventos - onShow e onHide, e eles funcionam conforme o esperado.
onShow ()
Este evento é executado quando a dica de ferramenta é exibida. Se você definir um atraso, este evento não será executado até que o atraso termine.
onHide ()
A dica de ferramenta se esconde com a execução deste evento. Se houver um atraso, este evento não será executado até que o atraso termine.
Métodos de dica de ferramenta
Existem dois métodos para dicas de ferramentas - anexar e desanexar. Isso permite apontar um elemento específico e adicioná-lo a um objeto de dica de ferramenta (e, portanto, inerente a todas as configurações nessa instância de classe) ou desanexar um elemento específico.
anexar()
Para anexar um novo elemento a um objeto de dica de ferramenta, apenas indique o objeto de dica, a tacha em .attach (); e, finalmente, coloque o seletor de elemento entre os colchetes ().
Syntax
toolTips.attach('#tooltipID3');separar ()
Esse método funciona exatamente como o método .attach, mas o resultado é completamente o oposto. Primeiro, indique o objeto tip, depois adicione .dettach () e, finalmente, coloque o seletor de elemento dentro de ().
Syntax
toolTips.dettach('#tooltipID3');Example
Vamos dar um exemplo que explica a dica de ferramenta. Dê uma olhada no código a seguir.
<!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>Você receberá a seguinte saída -
Output