css - 使用 CSS 向我的工具提示添加底部小箭头

Question

我终于找到了一个工具提示的 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>

截图 enter image description here

有人可以帮我添加吗？

非常感谢!!

Answer 1

只需使用具有相同 border 的其他伪元素并应用旋转 rotation 然后根据需要调整大小/位置:

.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>