我的箭头工具提示似乎没有边框答案

【问题标题】：I cant seem to get a border on my arrow tooltip我的箭头工具提示似乎没有边框
【发布时间】：2014-12-04 11:17:22
【问题描述】：

我需要帮助将箭头变成白色并带有蓝色边框，就像包含文本的框一样。我需要使用 a 标签内的标题作为内容，但可以随意编辑我设法使其达到一定程度但似乎无法超越的所有其他内容：

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>

【问题讨论】：

标签： css tooltip css-shapes

【解决方案1】：

你不能那样做，你不能在“箭头”周围有一个边框。制作那个箭头是一个技巧，你可以使用 css 来操纵 :after 和 :before 使其看起来像一个箭头，但是除非你想使用图像并将其放入，否则你不能在它之外有边框那个地方。

看一个我用你的代码做的例子来展示

outline: 2px solid #000;

outline 可用于在实际边框之外制作边框，但它不会像您想要的那样。

http://jsfiddle.net/pp9t0vqb/4/

【讨论】：

【解决方案2】：

你能做的最好的就是用一整块假箭头：

.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

【讨论】：