Jquery：將數據寬度存儲在變量中並將其應用於僞元素

我正在創建一個完全基於CSS的工具提示。我有一個span標記，其中包含一組工具提示，並使用data-tooltip屬性作爲內容。我想在該跨度類中使用data-tooltip-width，並使用該值設置內容的寬度。所以基本上我應該創建一個像這樣的變量：Jquery：將數據寬度存儲在變量中並將其應用於僞元素

var twidth = $('.tooltip').data('tooltip-width');

但是我找不到接下來應該做什麼。我已經嘗試過，但它沒有工作：

$('.tooltip[data-tooltip]:after').css({ 
'width': twidth, 
});

有人啓發我我該如何做到這一點。下面是CSS代碼：

.tooltip[data-tooltip] { 
    position: relative; 
    text-decoration: none; 
    border-bottom: solid 1px; 

} 

.tooltip[data-tooltip]:before { 
content: ""; 
position: absolute; 
border-top: 20px solid @color; 
border-right: 20px solid transparent; 
visibility: hidden; 
left:50%; 
bottom: 100%; 

} 

.tooltip[data-tooltip]:after { 
content: attr(data-tooltip); 
position: absolute; 
color: white; 
left:50%; 
bottom:150%; 
background: @color; 
padding: 5px 15px; 
display: inline-block; 
visibility: hidden; 
white-space: nowrap; 

}   
.tooltip[data-tooltip]:hover:before, .tooltip[data-tooltip]:hover:after { 
    visibility: visible; 

} `

來源

2012-11-29 Tahsin Ahmed

你能否讓你的問題有點清楚？你有跨度寬度保存在data-tooltop-width中嗎？ – Tarun

是的，我有。以下是完整的代碼：'

Hello world！這是工具提示

' –

據我所知，你不能「後」的元素添加CSS的樣式來。問題是，當你使用.css時，jQuery寫入'style'-Attribute，但是這是一個屬性來設計元素本身。沒有'後'元素添加樣式。

簡稱：

添加jQuery中的CSS樣式到「after'元素不會做任何事情。
而且（在CSS中）除了'content'屬性之外，任何瀏覽器都不支持attr（）。

來源

2012-11-29 11:06:37 nirazul

好的，明白了。謝謝。我會改變我的代碼來滿足我的需求。 –

var tooltip = $('span.tooltip'); 
var toolTipWidth = tooltip.attr('data-tooltip-width'); 

tooltip.css('width', toolTipWidth);

來源

2012-11-29 11:05:50 Tarun

我已添加完整的代碼。您可能想要查看您的解決方案。 –

看一看：http://jsfiddle.net/SfbTA/ – Tarun

您已將寬度添加到span元素。我正在嘗試調整工具提示內容的寬度。你知道，data-tooltip屬性裏面的內容當前是「得到！」 –

您可以使用CSS3的attr()（目前還不支持）的基礎上的屬性來設置寬度，像這樣的：

.tooltip[data-tooltip]:after { 
    width: attr(data-tooltip-width) 
}

更新：只有在attr() CSS2.1支持，只有適用於content屬性（在最新的FF和Chrome中進行測試）。

來源

2012-11-29 11:08:09 mekwall

試過了，沒有工作。:-( –

CSS3的'attr（）'在任何瀏覽器中都不支持。 – BoltClock

Aww。似乎它只支持'content' atm。太糟糕了！ – mekwall

Jquery：將數據寬度存儲在變量中並將其應用於僞元素

回答

相關問題