1

Galera tenho um plugin tooltip que funciona com jQuery, ele e muito simples e prático. O problema e que estou tentando colocar um html dentro dele. E ele me retorna co código html ao invés do resultado. Alguém sabe alguma forma de resolver isso?

Segue o exemplo abaixo.

$(document).ready(function() {

  $('.masterTooltip').hover(function() {

    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip"></p>')
      .text(title)
      .appendTo('body')
      .fadeIn('slow');
  }, function() {

    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip').remove();
  }).mousemove(function(e) {
    var mousex = e.pageX + 20; 
    var mousey = e.pageY + 10; 
    $('.tooltip')
      .css({
        top: mousey,
        left: mousex
      })
  });
});
.tooltip {
  display: none;
  position: absolute;
  border: 1px solid #333;
  background-color: #161616;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
  font-size: 12px Arial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<p><a href="#" title="tutilo com <br> html <b>aqui</b>" class="masterTooltip">coloque o mouse aqui</a>
</p>

1

1 Resposta 1

2

Exeprimente em vez de:

...
$('<p class="tooltip"></p>')
  .text(title)
...

Colocar isto:

...
$('<p class="tooltip"></p>')
  .html(title)
...

$(document).ready(function() {

  $('.masterTooltip').hover(function() {

    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip"></p>')
      .html(title)
      .appendTo('body')
      .fadeIn('slow');
  }, function() {

    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip').remove();
  }).mousemove(function(e) {
    var mousex = e.pageX + 20; 
    var mousey = e.pageY + 10; 
    $('.tooltip')
      .css({
        top: mousey,
        left: mousex
      })
  });
});
.tooltip {
  display: none;
  position: absolute;
  border: 1px solid #333;
  background-color: #161616;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
  font-size: 12px Arial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<p><a href="#" title="tutilo com <br> html <b>aqui</b>" class="masterTooltip">coloque o mouse aqui</a>
</p>

4
  • ok muito obrigado Commented 2/08/2016 às 16:23
  • De nada @HugoBorges, ainda bem que resolveu
    – Miguel
    Commented 2/08/2016 às 16:24
  • so mais uma coisa, e possível tirar o efeito que ele tem? tipo ao colocar o mouse, ele aparece em câmera lenta, com regulo o tempo do efeito, isso e possível? Commented 2/08/2016 às 16:27
  • Isso não sei @HugoBorges, nunca usei... Mas dentro do próprio plugin deve puder regular isso
    – Miguel
    Commented 2/08/2016 às 16:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .