2013-10-02 17 views
6

mam następną Gr:pokazać podpowiedź tylko wtedy, gdy elipsa jest aktywny

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

Jak mogę pokazać podpowiedź tylko wtedy, gdy elipsa jest aktywny?

znajdę tę funkcję

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

Ale ja nie wiem, jak go używać wiedząc używam JSP i rozpórki

+0

Ponieważ ustawienie treść, która ma zostać przecięta, kiedy może się przepełnić, nie będzie już żadnego przepełnienia, które można by sprawdzić ... musiałbyś to zrobić przed zastosowaniem przepełnienia: ukryte. – CBroe

+0

Możliwy duplikat [HTML - jak mogę wyświetlić TYLKO etykietkę, gdy aktywowana jest elipsa] (http://stackoverflow.com/questions/5474871/html-how-can-i-show-tooltip-only-when-ellipsis-is aktywowane) –

Odpowiedz

13

Spróbuj czegoś takiego:

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); 
} 
+0

Mam głupie pytanie $ (funkcja ...) gdzie powinienem go umieścić? – junior

+0

'$ (dokument) .ready' Chyba. –

+0

Jak zrobić to samo z TDs zamiast DIV? Czy możesz zrobić na to działający przykład? – smartmouse

0

Dla każdego używającego qtip (będącego dość popularnym). Najpierw dodaj klasę do każdego przepełnionego elementu.

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

Następnie użyj selektora jQuery, aby wybrać wiele takich elementów, a zastosowanie wtyczki Q-Tip (lub dowolną inną etykietkę, która przychodzi do głowy) do swoich elementów jako takie:

$('.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 
      } 
     }); 
    } 
}); 
Powiązane problemy