Question

我尝试使用以下代码：

$('td').bind('mouseenter', function(){
    var $this = $(this);
    if(this.offsetWidth < this.scrollWidth){
        var text = $this.text();
        $this.attr("data-title",text);
        $this.tipper({
            direction: "bottom",
            follow: true
        });
    }
});

jsFiddle

工作正常，但不是第一次，有必要再次将鼠标移开以使其正常工作任何帮助是极大的赞赏！谢谢！

PS。我不想插入data-title内联。

Answer 1

Fiddle Demo

$('td').bind('mouseenter', function () {
    var $this = $(this);
    if (this.offsetWidth < this.scrollWidth) {
        var text = $this.text();
        $this.attr("data-title", text);
        $this.tipper({
            direction: "bottom",
            follow: true
        });
    }
}).mouseenter();
// ^ trigger the mouseenter event so that tooltip get bind to td

注意：首先加载工具提示插件而不是编写此方法

<小时/> 更新您也可以

Fiddle Demo

$('td').each(function () {
    var $this = $(this);
    if (this.offsetWidth < this.scrollWidth) {
        var text = $this.text();
        $this.attr("data-title", text);
        $this.tipper({
            direction: "bottom",
            follow: true
        });
    }
});

Answer 2

您没有正确使用API。 .tipper没有显示工具提示，它会绑定事件。请注意，这也有效。

var text = $('td').text();
$('td').attr("data-title",text);
$('td').tipper({
  direction: "bottom",
  follow: true
});

Answer 3

请参阅此代码，了解是否有elipsis，然后出现工具提示

$(function() {
    $('div').each(function(i) {
        if (isEllipsisActive(this)) {
            $(this).css({'color':'red'});
            $(this).attr("title", $(this).text());
        }
        else
             $(this).css({'color':'green'});
    });
});

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-cless" style="width:158px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">neel upadhyay @g mail .com hello world
</div>
    
<div class="div-cless" style="width:158px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">
    asdasf a
<div>

省略号应用于文本时如何显示工具提示？

3 个答案: