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 に答える
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 に答える
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 に答える
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 に答える