我似乎無法在我的箭頭上獲得邊框工具提示

我需要幫助將帶有藍色邊框的箭頭變成白色，例如包含文本的框。我需要使用標題的一個標籤中的內容，但隨意編輯一切我設法得到它的某一個點，但不能似乎讓過去這個：我似乎無法在我的箭頭上獲得邊框工具提示

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

我似乎無法在我的箭頭上獲得邊框工具提示

回答

相關問題