1

我.html()用于获取 a 的内容span tag并将其显示为工具提示，但 span 标签内的 html 标签直接显示在工具提示内，无需渲染。

<div>
<a href="#">Parent
<span>
<strong>It is a long established</strong> The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to usi<em>ng 'Content here, content here', m</em>aking it look like readable English. Many desktop publishing packages
</span>
</a>
</div>

JavaScript

$(this).hover(function(){
        // Hover over code

        var title = $(this).find('span').html();

        if(title){
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
    }
}, function() {
        // Hover out code

        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});

小提琴：http: //jsfiddle.net/qA88d/

4

5 回答 5

5

你正在使用text(). 在此处查看工作演示：http: //jsfiddle.net/qA88d/1/

改变：

.text(title)

至

.html(title)
于 2013-07-26T13:58:23.077 回答
4

使用 .html() 而不是 .text()

$(this).hover(function(){
    // Hover over code

    var title = $(this).find('span').html();

    if(title){
    $('<p class="tooltip"></p>')
    .html(title)  // Change here
    .appendTo('body')
    .fadeIn('slow');
  }
  }, function() {
    // Hover out code

    $('.tooltip').remove();
  }).mousemove(function(e) {
    var mousex = e.pageX + 20; //Get X coordinates
    var mousey = e.pageY + 10; //Get Y coordinates
    $('.tooltip')
        .css({ top: mousey, left: mousex })
   });

这是一个工作小提琴：http: //jsfiddle.net/qA88d/2/

于 2013-07-26T14:00:01.800 回答
3

您正在获取跨度的 html，然后将其设置为工具提示作为文本。您还需要将其设置为 html：

var title = $(this).find('span').html();

if (title) {
    $('<p class="tooltip"></p>')
        .html(title) // <--- right here
        .appendTo('body')
        .fadeIn('slow');
}
于 2013-07-26T13:58:24.073 回答
3

将您的 JS 从更改.text()为.html().

查看 JSFiddle

$(this).hover(function(){
        // Hover over code

        var title = $(this).find('span').html();

        if(title){
        $('<p class="tooltip"></p>')
        // Change the line below!
        .text(title) // CHANGE THIS TO `.html(title)`
        // ^ Should be .html() [So it parses and renders the HTML]
        .appendTo('body')
        .fadeIn('slow');
    }
}, function() {
        // Hover out code

        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});
于 2013-07-26T13:59:17.127 回答
1

像这样试试

$(this).hover(function(){
    // Hover over code

    var title = $(this).find('span').html();

    if(title){
    $('<p class="tooltip"></p>')
    .html(title)
    .appendTo('body')
    .fadeIn('slow');
}}
于 2013-07-26T14:01:27.203 回答