Показать содержимое в заголовке при переполнении текста

Question

CSS3 вводит text-overflow, чтобы вы могли скрыть переполненный текст и даже добавить эллипсы.

Если текст переполнен и скрыт, я хотел бы показать его как всплывающую подсказку при зависании.

Самый простой способ сделать это - добавить текст в атрибут title элемента. Однако это заставит текст показать, переполняется или нет.

Я только хочу показать всплывающую подсказку при переполнении.

так, если бы я это:

<span>some text here</span> 
<span>some more text here</span> 

и визуализации, как это:

некоторый текст здесь

еще немного ...

Первый не будет никакой подсказки, потому что нет необходимости, а у второй будет всплывающая подсказка, которая показывает:

еще какой-нибудь текст здесь

Есть ли способ, чтобы установить это?

Answer 1

Вы не можете сделать это с помощью CSS только, и я думаю, что любое решение Javascript будет зависеть от того, как структурирован ваш HTML-код. Тем не менее, если у вас есть HTML структурирован следующим образом:

<div id="foo"> 
    <span class="bar">Lorem ipsum dolor sit amet, consectetur.</span> 
    <span class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> 
</div> 

С #foo элемента, имеющими свою text-overflow декларации и bar класса, имеющим white-space: nowrap декларации. Вы должны быть в состоянии сделать что-то вроде этого с помощью JQuery:

var foo = $("#foo"); 
var max_width = foo.width(); 
foo.children().each(function() { 
    var $this = $(this); 
    if ($this.width() > max_width) { 
    $this.attr("title", $this.text()); 
    } 
}); 

См: http://jsbin.com/alepa3