hiển thị tooltip chỉ khi lược đang hoạt động

Question

Tôi có div tiếp theo:

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

Làm thế nào tôi có thể hiển thị tooltip chỉ khi lược đang hoạt động?

Tôi thấy chức năng này

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

Nhưng tôi không biết làm thế nào để sử dụng nó biết tôi sử dụng jsp và thanh chống

Answer 1

Hãy thử một cái gì đó như thế này:

Working DEMO
Working DEMO - with tooltip

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

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

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

Answer 2

Đối với bất kỳ ai sử dụng qtip (khá phổ biến). Đầu tiên, thêm một lớp vào từng phần tử tràn của bạn.

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

Sau đó, sử dụng bộ chọn jQuery để chọn nhiều yếu tố như vậy, và áp dụng các plugin qTip (hoặc bất kỳ tooltip khác mà nói đến cái tâm) trên các yếu tố của bạn như vậy:

$('.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 
      } 
     }); 
    } 
});