Я наконец нашел код CSS для подсказки, которая работала, учитывая, что у меня уже есть некоторые атрибуты. Единственное, чего мне сейчас не хватает, так это маленькой стрелки внизу, как у большинства всплывающих подсказок (например, https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_bottom). Я видел решения, но для этого требовалась всплывающая подсказка другого типа, которая не работала для моих существующих правил и атрибутов.

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

.subcategory1a {
  float: left;
  display: inline;
  clear:none !important;
  margin: 0;
  width: 1.75vh;
  color: transparent;
  position: relative;
  cursor: help;
}

.subcategory1a::after {
  content: "Tooltip1";
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s;
	display: block;
	position: absolute;
	bottom: 2vh;
	left: -2vh;
	width: auto;
	padding: 0.5vh;
	z-index: 100;
	color: #757575;
	background-color: #f0f0f0;
	border: dashed 1px #2f2f2f;
	border-radius: 0.5vh;
  box-shadow: 0 0 1vh #757575;
}
.subcategory1a:hover::after {
  opacity: 1 !important;

}
<br>

<br>

<div class="more_info parentcategory1">
  <span class="checkbox" style=""></span>
</div>

<div class="more_info subcategory1a">
  <span class="checkbox" style=" background: url(https://unsplash.it/18) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>
</div>

<div class="more_info subcategory1b">
  <span class="checkbox" style=" background: url(https://unsplash.it/18) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>
</div>

<div class="more_info subcategory1c">
  <span class="checkbox" style=" background: url(https://unsplash.it/18) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>
</div>

<div class="more_info parentcategory2">
  <span class="checkbox" style=""></span>
</div>

<div class="more_info subcategory2a"><span class="checkbox" style=" background: url(https://unsplash.it/18) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>
</div>

Скриншот введите здесь описание изображения

Может ли кто-нибудь помочь мне добавить его?

Спасибо заранее!!

css
0
AlphaX 1 Янв 2018 в 23:14

2 ответа

Лучший ответ

Просто используйте другой псевдоэлемент с такой же границей и примените поворот вращения , затем отрегулируйте размер / положение по своему усмотрению:

.subcategory1a {
  float: left;
  display: inline;
  clear: none !important;
  margin: 0;
  width: 1.75vh;
  color: transparent;
  position: relative;
  cursor: help;
}

.subcategory1a::after {
  content: "Tooltip1";
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  display: block;
  position: absolute;
  bottom: 2vh;
  left: -2vh;
  width: auto;
  padding: 0.5vh;
  z-index: 100;
  color: #757575;
  background-color: #f0f0f0;
  border: dashed 1px #2f2f2f;
  border-radius: 0.5vh;
  box-shadow: 0 0 1vh #757575;
  bottom:8px;
}

.subcategory1a:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #f0f0f0;
  border-bottom: dashed 1px #2f2f2f;
  border-right: dashed 1px #2f2f2f;
  transform: rotate(45deg);
  bottom:2px;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.5s;
}

.subcategory1a:hover::after,
.subcategory1a:hover::before {
  opacity: 1 !important;
}
<br>

<br>

<div class="more_info parentcategory1">
  <span class="checkbox" style=""></span>
</div>

<div class="more_info subcategory1a">
  <span class="checkbox" style=" background: url(https://unsplash.it/18) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>
</div>

<div class="more_info subcategory1b">
  <span class="checkbox" style=" background: url(https://unsplash.it/18) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>
</div>

<div class="more_info subcategory1c">
  <span class="checkbox" style=" background: url(https://unsplash.it/18) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>
</div>

<div class="more_info parentcategory2">
  <span class="checkbox" style=""></span>
</div>

<div class="more_info subcategory2a"><span class="checkbox" style=" background: url(https://unsplash.it/18) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>
</div>
0
Temani Afif 1 Янв 2018 в 21:28

Поскольку :after псевдоэлемент уже используется для сообщения всплывающей подсказки, используйте :before псевдоэлемент для стрелки всплывающей подсказки.

Чтобы эти всплывающие подсказки были более динамичными и их было легче реализовать в других частях приложения, значение свойства псевдоэлемента content будет изменяться таким образом, чтобы оно соответствовало любому значению атрибута (data-tooltip-title) был установлен на; это позволит свободно устанавливать эти всплывающие подсказки на лету, например:

Код:

.tooltip::after {
   content: attr(data-tooltip-title);
}

<span class="tooltip" data-tooltip-title="what your tooltip will say">tooltip</span>

< Сильный > Live

.page {
  margin: 50px auto;
  width: 300px;
  height: 350px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  border: 1px solid #dedddd;
}

.page p:not(:last-child) {
  border-bottom: 1px solid red;
}

.tooltip {
  display: inline;
  clear: none !important;
  color: black;
  cursor: help;
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip-title);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  display: block;
  position: absolute;
  bottom: 150%;
  width: auto;
  padding: 0.5vh;
  z-index: 100;
  color: #757575;
  background-color: #f0f0f0;
  border: dashed 1px #2f2f2f;
  border-radius: 0.5vh;
  box-shadow: 0 0 1vh #757575;
  white-space: nowrap;
}

.tooltip::before {
  content: "";
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  position: absolute;
  border-color: #757575;
  border-top: 5px solid;
  border-right: 5px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 5px solid transparent;
  top: -8px;
  width: 0px;
}

.tooltip-center::before {
  margin: auto;
  left: 0;
  right: 0;
}

.tooltip-start::before,
.tooltip-start::after {
  margin: auto;
  left: 0;
}

.tooltip-end::before,
.tooltip-end::after {
  margin: auto;
  right: 0;
}

.tooltip:hover::after, .tooltip:hover::before {
  opacity: 1 !important;
}
<div class="page">
  <p><span class="tooltip" data-tooltip-title="what your tooltip will say">tooltip</span></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

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

Демонстрация фрагмента кода:

.page {
  margin: 50px auto;
  width: 300px;
  height: 350px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  border: 1px solid #dedddd;
}

.page p:not(:last-child) {
  border-bottom: 1px solid red;
}

.tooltip {
  display: inline;
  clear: none !important;
  color: black;
  cursor: help;
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip-title);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  display: block;
  position: absolute;
  bottom: 150%;
  width: auto;
  padding: 0.5vh;
  z-index: 100;
  color: #757575;
  background-color: #f0f0f0;
  border: dashed 1px #2f2f2f;
  border-radius: 0.5vh;
  box-shadow: 0 0 1vh #757575;
  white-space: nowrap;
}

.tooltip::before {
  content: "";
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  position: absolute;
  border-color: #757575;
  border-top: 5px solid;
  border-right: 5px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 5px solid transparent;
  top: -8px;
  width: 0px;
}

.tooltip-center::before {
  margin: auto;
  left: 0;
  right: 0;
}

.tooltip-start::before,
.tooltip-start::after {
  margin: auto;
  left: 0;
}

.tooltip-end::before,
.tooltip-end::after {
  margin: auto;
  right: 0;
}

.tooltip:hover::after, .tooltip:hover::before {
  opacity: 1 !important;
}
<div class="page">
  <p><span class="tooltip tooltip-center" data-tooltip-title="Tooltip Center of Word">Foobar</span></p>
  <p><span class="tooltip tooltip-start" data-tooltip-title="Tooltip Start of Word">Foobar</span></p>
  <p><span class="tooltip tooltip-end" data-tooltip-title="Tooltip End of Word">Foobar</span></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
0
UncaughtTypeError 1 Янв 2018 в 21:39