putting html in title, using query

Question

putting html in title, using query

Navigation

#1 by (2 votes)

1

I have a tooltip plugin that works with jQuery, it's very simple and practical. The problem is that I'm trying to put an html inside it. And it returns me with html code instead of the result. Does anyone know of any way to resolve this?

Follow the example below.

$(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><ahref="#" title="tutilo com <br> html <b>aqui</b>" class="masterTooltip">coloque o mouse aqui</a>
</p>

javascript jquery tooltip

asked by anonymous 02.08.2016 / 16:32

1 answer

Segmentation fault in client / server implementation Names in inputs, with ignoring capital letters (eg, from, of, the, etc)!

score 2 · Accepted Answer

Exept instead of:

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

Put this:

...
$('<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><ahref="#" title="tutilo com <br> html <b>aqui</b>" class="masterTooltip">coloque o mouse aqui</a>
</p>