Класс содержимого CSS, а не attr

Я хотел бы передать существующую разметку в подсказку, созданную с помощью css, в настоящее время использующую attr(title), но для получения желаемых результатов необходимо дублировать разметку.

рассмотреть возможность:

<p class="toolTip" title="this is a tooltip">hover over me</p>
<p class="existing">this is a tool tip</p>


.toolTip:hover:after{
    content: attr(title);
}

То, что я хотел бы сделать, это что-то вроде этого:

.toolTip:hover:after{
    content: class(existing);  //invalid I know!
}

тл: др; Я хотел бы извлечь содержимое из существующей разметки с помощью класса, а не с помощью атрибута title.


class jquery css attr
person Myles    schedule 03.02.2015    source источник
comment
Вы предлагаете наследство? Если да, то это невозможно в традиционном css3. Для этого вам нужно использовать препроцессор LESS.   -  person Harsh    schedule 03.02.2015
comment
Почему именно атрибут класса?   -  person i_like_robots    schedule 03.02.2015
comment
@i_like_robots не обязательно должен быть классом, но рассматриваемый элемент имеет только класс. Может быть что угодно, если мне не нужно дублировать всю разметку.   -  person Myles    schedule 03.02.2015
comment
@ Гарри, можно ли это сделать с помощью jQuery? Я бы с радостью запустил пару строк jQuery, чтобы добиться этого. Все, что избавляет людей от необходимости редактировать области разметки в будущем.   -  person Myles    schedule 03.02.2015
comment
Что именно вы здесь дублируете? Вы просто перемещаете текст в атрибут title   -  person Danield    schedule 03.02.2015
comment
@Danield Я не хочу перемещать текст, так как в настоящее время он используется на сайте. (в другой области, скрытой там, где существует всплывающая подсказка).   -  person Myles    schedule 03.02.2015
comment
Спасибо @Harry, я думаю, мне придется добиться этого с помощью jQuery, ничего страшного! :)   -  person Myles    schedule 03.02.2015
comment
@ Гарри рад, что ты написал в качестве ответа :)   -  person Myles    schedule 03.02.2015
comment
@Myles: я отправил ответ, приятель. Я удаляю предыдущие комментарии, потому что они уже есть в ответе, а также добавляю тег jQuery к вопросу.   -  person Harry    schedule 03.02.2015

Ответы (1)


arrow_upward
2
arrow_downward

С чистым CSS (или даже с препроцессорами) нет реального способа выбрать все текстовое содержимое элемента и назначить его атрибуту content. Атрибут content может иметь только предопределенную строку, URL, значение атрибута или счетчика как значения.

Вы можете использовать jQuery (или простой ванильный JS), чтобы автоматически добавить класс toolTip и атрибут title ко всем элементам, которые имеют требуемый класс (.existing), и назначить текстовое содержимое элемента этому атрибуту. Таким образом, вам не нужно дублировать правила CSS.

Примечание. Это всего лишь простой пример того, как установить содержимое элемента в его атрибут заголовка, но в реальном сценарии вам потребуется больше, потому что нет особого смысла устанавливать само фактическое содержимое в качестве всплывающей подсказки.

$(document).ready(function() {
  $('.existing').addClass('toolTip');
  $('.existing').each(function() {
    $(this).attr('title', $(this).text());
  });
});
.toolTip:hover:after {
  content: attr(title);
  /* just for demo */
  position: relative;
  left: 10px;
  border: 1px solid green;
  background: lightgreen;
  padding: 2px;
  border-radius: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="toolTip" title="this is a tooltip">hover over me</p>
<p class="existing">this is a tool tip</p>

Другой пример. Это немного другой пример, в котором всплывающая подсказка отличается от содержимого элемента. Здесь содержимое элемента является содержимым родителя, а текст всплывающей подсказки изначально присутствует в дочернем элементе (с class="existing"). С помощью jQuery содержимое этого дочернего элемента span добавляется к атрибуту title родителя.

$(document).ready(function() {
  $('.existing').parent().addClass('toolTip');
  $('.existing').each(function() {
    $(this).parent().attr('title', $(this).text());
  });
});
.toolTip:hover:after {
  content: attr(title);
  /* just for demo */
  position: relative;
  left: 10px;
  border: 1px solid green;
  background: lightgreen;
  padding: 2px;
  border-radius: 2px;
}
.existing {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="toolTip" title="this is a tooltip">hover over me</p>
<p>hover over me <span class="existing">this is a tool tip</span>
</p>

<div>I have a tooltip too<span class="existing">See, I told you!</span>
</div>

person Harry    schedule 03.02.2015
comment
Спасибо за помощь @Harry! :) - person Myles; 04.02.2015
comment
Всегда рад помочь, приятель @Myles - person Harry; 04.02.2015