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>