CSS標籤中的工具提示的樣式

我想在通過AngularJS傳遞的頁面中的jqgrid中設置工具提示的樣式。本質上在應用程序的其他地方，我使用Bootstrap工具提示樣式。我很努力讓這個在AngularJS部分工作（可能與初始化不在正確的地方運行）。我認爲我可能會改變方向並嘗試模仿造型。CSS標籤中的工具提示的樣式

我已經開始了，並且得到了一個非常粗糙和準備好的樣式，作爲一個PoC幾乎'工作'（它需要很多工作，我想看看在做這些工作之前是否有可能！ Fiddle

我有2個問題，我想知道，如果有人可以幫助我，之前我嘗試整理一下

1）是否有辦法阻止出現以及（我還以爲是造型工具提示正常提示但我似乎正在添加第二個！）

2）有沒有辦法讓它'浮動'。在小提琴中它並不明顯，但在第j個元素更加結構化（有界）的jqgrid中，我創建的css工具提示包含在第th個元素中，主要隱藏（因爲元素太大）。

我在想這是一個CSS問題，而不是一個jqgrid問題，以防萬一我指出我不能真正使用張貼在幾個答案中的span技術。

謝謝。

在小提琴的代碼是

<table> 
    <th title="This is a tooltip">John</th> 
    <th title="so is this">Albert</th> 
    <th title="And This">Spencer</th> 
</table> 

th[title]:hover:after { 
    content: attr(title); 
    background-color: #000; 
    color: #fff; 
    width: 120px; 
    text-align: center; 
    border-radius: 6px; 
    padding: 5px 0; 
    z-index: 1; 
    left: 50%; 
    top: 100%; 
    position: absolute; 
    margin-left: -60px; 
    margin-left: -5px; 
    border-width: 5px; 
    position: relative; 
    display: inline-block; 
    border-bottom: 1px dotted black; 
    border-style: solid; 
    border-color: #555 transparent transparent transparent; 
}

來源

2017-06-15 gringogordo

是。您只需將標題屬性更改爲數據標題即可：content: attr(data-title);然後也相應地更新標題屬性。

來源

2017-06-15 15:31:31 Adrianopolis

謝謝，這是一個有趣的提示。它回答了一半的問題，但由此產生的'tooltip'仍然受jqGrid中th元素的限制。玩了一會之後，我意識到這是一個不合理的問題，因爲行爲是由jqgrid css的級別內的級別引起的。我需要多玩一點，我認爲要找到根本原因。 – gringogordo

CSS標籤中的工具提示的樣式

回答

相關問題