使用CSS在我的工具提示中添加小底部箭头
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用CSS在我的工具提示中添加小底部箭头相关的知识，希望对你有一定的参考价值。
我终于找到了一个工具提示的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
有人可以帮我添加吗？
提前谢谢了！！
答案
只需使用具有相同边框的其他伪元素并应用旋转旋转，然后根据需要调整大小/位置：
.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>另一答案
由于: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>以上是关于使用CSS在我的工具提示中添加小底部箭头的主要内容，如果未能解决你的问题，请参考以下文章