putting html in title, using query

Question

Guys I have a tooltip plugin that works with jQuery, it is very simple and practical. The problem is I’m trying to put an html inside it. And it returns me the html code instead of the result. Does anyone know any way to solve 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><a href="#" title="tutilo com <br> html <b>aqui</b>" class="masterTooltip">coloque o mouse aqui</a>
</p>

Answer 1

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