Question

我有这个问题：

我正在使用此Javascript代码。

    $(document).ready(function() {
$('.masterTooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.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 })
});
});

使用：

echo "<img class='masterTooltip' title='Desc: <br> $xxx' id='xxx' width='50px' src='xx'/>";

但它显示[br]没有突破新行，我需要另一种方法来使用[p]，[br]等。

我知道它不能在title属性中完成，但我对javascript没有那么有经验，

所以任何帮助都会有很大的帮助。

Answer 1

将.text(title)替换为.html(title)。这会导致变量title的值被解析为HTML，而不是被视为纯文本。

＆＃13;

    $(document).ready(function() {
$('.masterTooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .html(title)    // THIS WAS CHANGED
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.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 })
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class='masterTooltip' title='Desc: <br> $xxx' id='xxx' width='50px' src='http://lorempixel.com/50/50/'/>

＆＃13;

标题显示html标签的替代方式（<br/>等，<img/>）

1 个答案: