[Tutorial]Tooltip criado por TrY!

Estimados membros,

Olá, criei este código tooltip, ou seja, você passa o mouse e aparece um texto.

Para por isto, somente crie um atributo data-tooltip e o script lerá o valor dele como texto.
Exemplo: http://jsbin.com/adahur
Ou seja, ele leu o valor do atributo data-tooltip e os disponibilizou na tela.

Para tornar o tooltip verdadeiro, ponha um atributo rel com o valor true-ty.

Código javascript:

Código:

$(function(){
$('*[rel="true-ty"]').hover(function(e){
  $('body').append('<div class="tooltip-try">'+$(this).attr('data-tooltip')+'</div>');
$('.tooltip-try').css({
'top':e.pageY + 0,
'left':e.pageX + 10,
'background':'',
'position':'absolute',
'padding':'8px',
'background-color':'#333',
'border':'1px solid #333',
'color':'white',
'-webkit-box-shadow':'0px 2px 4px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.1) inset',
'-moz-box-shadow':'0px 2px 4px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.1) inset',
'box-shadow':'0px 2px 4px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.1) inset',
'moz-border-radius':'4px',
'-webkit-border-radius':'4px',
'border-radius':'4px',
'font-size':'12px',
'text-align':'center',
'max-width':'250px',
  'opacity':'.7',
  'font-family':'Arial, sans-serif'
});
},function(){
$('.tooltip-try').remove();
}
);
  $('*[rel="true-ty"]').mousemove(function(e){
    $('.tooltip-try').css({
'top':e.pageY + 0,
'left':e.pageX + 20
    });
  });

});

Para por na página procure por </body> uma linha antes ponha este código:

Código:

<script>$(function(){
$('*[rel="true-ty"]').hover(function(e){
  $('body').append('<div class="tooltip-try">'+$(this).attr('data-tooltip')+'</div>');
$('.tooltip-try').css({
'top':e.pageY + 0,
'left':e.pageX + 10,
'background':'',
'position':'absolute',
'padding':'8px',
'background-color':'#333',
'border':'1px solid #333',
'color':'white',
'-webkit-box-shadow':'0px 2px 4px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.1) inset',
'-moz-box-shadow':'0px 2px 4px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.1) inset',
'box-shadow':'0px 2px 4px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.1) inset',
'moz-border-radius':'4px',
'-webkit-border-radius':'4px',
'border-radius':'4px',
'font-size':'12px',
'text-align':'center',
'max-width':'250px',
  'opacity':'.7',
  'font-family':'Arial, sans-serif'
});
},function(){
$('.tooltip-try').remove();
}
);
  $('*[rel="true-ty"]').mousemove(function(e){
    $('.tooltip-try').css({
'top':e.pageY + 0,
'left':e.pageX + 20
    });
  });

});</script>

Tem que ter incluso o jQuery em sua página ;)

Depois que eu consigo vc passa o tutorial???
Mesmo assim, vlw, é muito legal

Brandow escreveu:Não teria como mudar o valor data-tooltip para title pois acho mais prático o efeito irá ler todos os links que tem title ao invez de declarar o data-tooltip para tudo.

Se por o title, ele irá ler o title e criar um novo efeito, ou seja, fica o title padrão, mais o tooltip!

Nossa, deu um trabalhão pra eu colocar esse code em uma página minha já pronta '-'
Era mais fácil ter esplicado que tinha de colocar:

Código:


<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
</style>


Antes do header, depois falar que tinha de colocar

Código:


$(function(){
$('*[rel="true-ty"]').hover(function(e){
  $('body').append('<div class="tooltip-try">'+$(this).attr('data-tooltip')+'</div>');
$('.tooltip-try').css({
'top':e.pageY + 0,
'left':e.pageX + 10,
'background':'',
'position':'absolute',
'padding':'8px',
'background-color':'#333',
'border':'1px solid #333',
'color':'white',
'-webkit-box-shadow':'0px 2px 4px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.1) inset',
'-moz-box-shadow':'0px 2px 4px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.1) inset',
'box-shadow':'0px 2px 4px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.1) inset',
'moz-border-radius':'4px',
'-webkit-border-radius':'4px',
'border-radius':'4px',
'font-size':'12px',
'text-align':'center',
'max-width':'250px',
  'opacity':'.7',
  'font-family':'Arial, sans-serif'
});
},function(){
$('.tooltip-try').remove();
}
);
  $('*[rel="true-ty"]').mousemove(function(e){
    $('.tooltip-try').css({
'top':e.pageY + 0,
'left':e.pageX + 20
    });
  });

});


antes do [/body]

e tinha também que ter falado que tinha de colocar:

Código:


<span id="hello" data-tooltip="Tooltip criado por Try! ;)" rel="true-ty">Passe o mouse aqui!</span>


onde quise-se para aparecer a mensagem, não seria muito mais fácil??

Mr.House escreveu:

Brandow escreveu:Não teria como mudar o valor data-tooltip para title pois acho mais prático o efeito irá ler todos os links que tem title ao invez de declarar o data-tooltip para tudo.

Se por o title, ele irá ler o title e criar um novo efeito, ou seja, fica o title padrão, mais o tooltip!

Eu vi aqui, mas tem uma função em js que permite que o tooltip leia o title, só não sei qual.

GameBoy escreveu:Nossa, deu um trabalhão pra eu colocar esse code em uma página minha já pronta '-'
Era mais fácil ter esplicado que tinha de colocar:

Código:


<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
</style>


Antes do header, depois falar que tinha de colocar

Código:


$(function(){
$('*[rel="true-ty"]').hover(function(e){
  $('body').append('<div class="tooltip-try">'+$(this).attr('data-tooltip')+'</div>');
$('.tooltip-try').css({
'top':e.pageY + 0,
'left':e.pageX + 10,
'background':'',
'position':'absolute',
'padding':'8px',
'background-color':'#333',
'border':'1px solid #333',
'color':'white',
'-webkit-box-shadow':'0px 2px 4px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.1) inset',
'-moz-box-shadow':'0px 2px 4px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.1) inset',
'box-shadow':'0px 2px 4px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.1) inset',
'moz-border-radius':'4px',
'-webkit-border-radius':'4px',
'border-radius':'4px',
'font-size':'12px',
'text-align':'center',
'max-width':'250px',
  'opacity':'.7',
  'font-family':'Arial, sans-serif'
});
},function(){
$('.tooltip-try').remove();
}
);
  $('*[rel="true-ty"]').mousemove(function(e){
    $('.tooltip-try').css({
'top':e.pageY + 0,
'left':e.pageX + 20
    });
  });

});


antes do [/body]

e tinha também que ter falado que tinha de colocar:

Código:


<span id="hello" data-tooltip="Tooltip criado por Try! ;)" rel="true-ty">Passe o mouse aqui!</span>


onde quise-se para aparecer a mensagem, não seria muito mais fácil??

Olá,

Não tem que colocar isso, isso é o código da página de teste.

Só consegui fazer minha página funcionar colocando os dois jquery na head e dps colocando, no texto, o <span.. com valor hello e dps o tooltip

Ótima tooltip, Peguei ela e coloquei-a em meu hotel.

Obrigado colocarei no meu blog!

Obrigado por compartilhar, Estou colocando a tooltip em minha extensão que estou criando pro chrome.

Otimo toolip, obrigado por compartilhar.