我需要帮助将箭头变为白色,并带有蓝色边框,就像包含文字的框一样。我需要在标签内部使用标题作为内容,但我可以自由编辑其他所有我设法将其提升到某个点,但似乎无法通过这个:
CSS
.toop {
position: relative;
padding: 0 5px;
line-height: 23px;
}
.toop:hover:after {
content: attr(title);
color: #474747;
font-size: 14px;
line-height: 150%;
text-align: left;
background-color: #ffffff;
border-radius: 5px;
border: 2px solid #2192ce;
padding: 5px 10px;
opacity: 0.9;
display: block;
width: 180px;
position: absolute;
left: 10px;
bottom: 40px;
z-index: 98;
}
.toop:hover:before {
content: "";
border: solid;
border-color: #2191ce transparent;
border-width: 10px 10px 0 10px;
opacity: 0.9;
display: block;
left: 30px;
bottom: 30px;
position: absolute;
z-index: 99;
}
HTML
<br>
<br>
<br>
<br>
<br>
<a href="#" class="toop" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Tooltip is here</a>
答案 0 :(得分:0)
你不能这样做,你不能在&#34;箭头附近有一个边界。 。制作那个箭头是一个技巧你可以用css操纵:after
和:before
使它看起来像一个箭头,但除非你想使用一个图像,否则你不能有一个边框把它放在那个地方。
查看我的代码示例
outline: 2px solid #000;
轮廓可用于在实际边框之外创建边框,但它不会像您想要的那样。
答案 1 :(得分:0)
你能做的最好的事就是假装整个街区的箭头:
.toop:hover:before {
content: "";
width:10px;
height:10px;
background:white;
border: 2px solid #2192ce;
border-width:0 2px 2px 0;
transform:rotate(45deg);
display: block;
left: 30px;
bottom:35px;
position: absolute;
z-index: 99;
}
但在这种情况下,您无法处理opacity属性。
选中 Demo Fiddle