我似乎无法在我的箭头上获得边框工具提示

我需要帮助将带有蓝色边框的箭头变成白色，例如包含文本的框。我需要使用标题的一个标签中的内容，但随意编辑一切我设法得到它的某一个点，但不能似乎让过去这个：我似乎无法在我的箭头上获得边框工具提示

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>

来源

2014-10-09 user1514528

你不能做到这一点，你不能有围绕“箭头”的边界。使箭头是一个你可以用css来操作:after和:before以使其看起来像箭头一样的技巧，但除非你想使用图像并将其放置在那个位置，否则你不能有一个边界以外的边界。

看到我做你的代码的一个例子来说明

outline: 2px solid #000;

轮廓可用于制作边界的实际边界之外，但它不会像你想要的任何东西。

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

来源

2014-10-09 13:47:03

你能做的最好的是假的与整个区块的箭头：

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

但在这种情况下，你不能处理的透明度属性。

入住这Demo Fiddle

来源

2014-10-09 13:59:42 DaniP

我似乎无法在我的箭头上获得边框工具提示

回答

相关问题