Aprenda como se faz:..."Tooltip ncom efeito JQuery"
» Este modelo de Menu, há tempos, que procuro, e agora a querida Elke, de
http://templateseacessorios.blogspot.com/2010/12/tooltip-ncom-efeito-jquery.html
ensina no post a seguir de autoria dela...(ELKE DE BARROS)
:::
Vá até o HTML de seu blog e antes de:
Cole código abaixo:
..." depois de"
Cole o próximo código.
Pronto, agora sempre que quiser o efeito tooltip em algum link, vc dederá colocar esse próximo código:
http://lllmenu.blogspot.com
http://templateseacessorios.blogspot.com/2010/12/tooltip-ncom-efeito-jquery.html
ensina no post a seguir de autoria dela...(ELKE DE BARROS)
:::
" Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI "
:::Tooltip ncom efeito JQuery
" Coloque os links de seu blog com efeito tootip, é bem simples. "Vá até o HTML de seu blog e antes de:
]]></b:skin>
Cole código abaixo:
.tip {
color: #fff;
background:#716D90;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
color: #fff;
background:#716D90;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
..." depois de"
]]></b:skin>
Cole o próximo código.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
//Absolute position the tooltip according to mouse position
tip.css({ top: mousey, left: mousex });
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
//Absolute position the tooltip according to mouse position
tip.css({ top: mousey, left: mousex });
});
});
//]]>
</script>
Pronto, agora sempre que quiser o efeito tooltip em algum link, vc dederá colocar esse próximo código:
<a class='tip_trigger' href='AQUI O ENDEREÇO DO LINK'>LINK AQUI<span class='tip'>INSCRIÇÃO DO QUE APARECERÁ NO TOOLTIP</span></a>
http://lllmenu.blogspot.com
Nenhum comentário:
Mensagem do formulário de comentário: