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

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

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

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

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

поэтому, если бы у меня было это:

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

и он выглядит следующим образом:

текст здесь

еще несколько...

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

еще текст здесь

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

Ответы

Ответ 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