Применение разного контента к одинаковым экземплярам классов в css - PullRequest
Новая
       31

Применение разного контента к одинаковым экземплярам классов в css

0 голосов
/ 29 апреля 2020

У меня есть изображения, для которых я хотел бы показать всплывающие подсказки, показывающие различное содержимое (описание изображения - строка), в зависимости от изображения, над которым вы наводите курсор. Класс всплывающей подсказки показывает всплывающую подсказку, используя before и after, однако после создания атрибута содержимого одинаковое содержимое отображается во всех экземплярах класса. Я ищу способ, который позволил бы назначать разное содержимое для одного и того же экземпляра класса. По сути, все, что я пробовал, например, переменные, потомки et c, жестко закодированные в класс всплывающей подсказки, все экземпляры наследуют одно и то же содержимое. Большое спасибо за любую помощь. 

.tooltip {
   z-index: 10;
}
.tooltip:before,
.tooltip:after {
  /*positioning and transforms */
}

//tooltip main 
.tooltip:before {
 content: "content for tooltip 1";
  /*styling*/
}
/* tooltip arrow */
.tooltip:after {
  content: '';
 /*styling*/
}

//hover
.tooltip:hover:before,
.tooltip:hover:after {
  visibility: visible;
  opacity: 1;
}
.tooltip:hover:before {
  transition-delay: 0.1s;
  transform: translate(-50%, -5px) scale(1);
}
.tooltip:hover:after {
  transition-duration: 0.2s;
  transform: translateX(-50%) scaleY(1);
}
...