6

私は次のdivを持っています:

 <div class="div-class" style="width:158px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;" title=<%=myDesc%>

省略記号がアクティブな場合にのみツールチップを表示するにはどうすればよいですか?

私はこの機能を見つける

    function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}

しかし、jspとstrutsを使用していることを知っていたので、使用方法がわかりませんでした

4

2 に答える 2

13

次のようなことを試してください：

動作デモ
動作デモ - ツールチップ付き

$(function() {
    $('div').each(function(i) {

         if (isEllipsisActive(this))
            //Enable tooltip 
         else
            //Disable tooltip
    });
});

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}
于 2013-10-02T10:05:17.857 に答える
0

qtipを使用している人向け（非常に人気があります）。まず、オーバーフロー要素のそれぞれにクラスを追加します。

<span class="ellipsis-text">Some very long text that will overflow</span>

次に、jQuery セレクターを使用して複数のそのような要素を選択し、qTip プラグイン (または頭に浮かぶその他のツールチップ) を要素に適用します。

$('.ellipsis-text').each(function() {
    if (this.offsetWidth < this.scrollWidth) {
        $(this).qtip({
            content: {
                text: $(this).text()
            },
            position: {
                at: 'bottom center',
                my: 'top center'
            },
            style: {
                classes: 'qtip-bootstrap', //Any style you want
            }
        });
    }
});
于 2016-10-31T17:43:05.577 に答える