1

我正在创建一个仅基于 CSS 的工具提示。我有一个span带有工具提示类的标签和内容的使用data-tooltip属性。我想data-tooltip-width在该跨度类中使用并使用该值来设置内容的宽度。所以基本上我应该创建一个像这样的变量：

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;

 } `
4

3 回答 3

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

tooltip.css('width', toolTipWidth);
于 2012-11-29T11:05:50.163 回答
0

据我所知，您不能将 CSS 样式添加到“后”元素。问题是，当您使用 .css 时，jQuery 会写入 'style'-Attribute，但这是一个用于设置元素本身样式的属性。没有“after”元素可以添加样式。

短的：

  • 将 jQuery 中的 css 样式添加到“after”元素不会做任何事情。
  • 并且（在 CSS 中）attr() 不受“内容”属性之外的任何浏览器的支持。
于 2012-11-29T11:06:37.640 回答
0

您可以使用 CSS3 attr()（尚不支持）根据属性设置宽度，例如：

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

更新：仅attr()在 CSS2.1 中受支持，并且仅适用于该content属性（在最新的 FF 和 Chrome 中测试）。

于 2012-11-29T11:08:09.370 回答