我终于找到了一个工具提示的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
有人可以帮我添加吗？
非常感谢提前!!
答案 0 :(得分：0)
只需使用具有相同边框的其他伪元素并应用旋转旋转，然后根据需要调整大小/位置：
.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>
答案 1 :(得分：0)
由于:after 伪元素已用于工具提示消息，因此请使用:before 伪元素作为工具提示箭头
为了使这些工具提示更加动态，更容易在应用程序的其他部分实现，:after伪元素的content属性值将调整为将其自身设置为属性值（data-tooltip-title）已被设定为;这将允许自由设置这些工具提示，例如：
<强>代码：
.tooltip::after {
content: attr(data-tooltip-title);
}
<span class="tooltip" data-tooltip-title="what your tooltip will say">tooltip</span>
<强>活
.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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>