如何在文本或文本字段左側顯示工具提示

我想在我的應用程序中使用鼠標懸停的工具提示。我試過很多BT沒有得到任何結果我錯過在我的CSS 的Html東西，如何在文本或文本字段左側顯示工具提示

<div style="text-align: center;"> 
     <p> 
     <a href="#" data-tooltip="left tooltip" data-placement="left">left tooltip</a> 
     </p> 

    </div>

有人告訴液

的CSS：

body { 
     margin: 20px; 
    } 

    a[data-tooltip] { 
     position: relative; 
    } 
    a[data-tooltip]::before, 
    a[data-tooltip]::after { 
     position: absolute; 
     display: none; 
     opacity: 0.85; 
    } 
    a[data-tooltip]::before { 
     /* 
     * using data-tooltip instead of title so we 
     * don't have the real tooltip overlapping 
     */ 
     content: attr(data-tooltip); 
     background: #000; 
     color: #fff; 
     font-size: 13px; 
     padding: 5px; 
     border-radius: 5px; 
     /* we don't want the text to wrap */ 
     white-space: nowrap; 
     text-decoration: none; 

    } 

    a[data-tooltip][data-placement="left"]::before { 
     top: -25%; 
     right: 100%; 
     margin-right: 10px; 
    }

我想要一個工具提示在我的鼠標懸停的應用程序。我嘗試了很多BT沒有得到任何結果

來源

2014-07-22 Abdul Samad

您可能想要使用'title'屬性？ – qtgye

嘗試添加顯示：塊;在這個css a [data-tooltip] [data-placement =「left」]：之前 –

你缺少你CSS 2元（見下面的CSS代碼註釋）：

DEMO

CSS：

a[data-tooltip]:hover::before { /* <- added :hover so it displays only on hover state */ 
    content: attr(data-tooltip); 
    background: #000; 
    color: #fff; 
    font-size: 13px; 
    padding: 5px; 
    border-radius: 5px; 
    white-space: nowrap; 
    text-decoration: none; 
    display:block; /* <-- this line */ 
}

來源

2014-07-22 10:55:03

非常好的web-tiki它的工作。謝謝:-) –

將這個添加到您的css

a[data-tooltip]:hover::before, a[data-tooltip]:hover::after { 
    position: absolute; 
    display:inline; 
    opacity: 0.85; 
}

在此處查看工作演示：http://jsfiddle.net/Hw3k2/

來源

2014-07-22 10:58:38 singe3

不錯的singe31 :-) –

如何在文本或文本字段左側顯示工具提示

回答

相關問題