1

CSS のみに基づいてツールチップを作成しています。ツールチップのクラスとコンテンツの属性を使用したspanタグがあります。そのスパンクラスで使用し、その値を使用してコンテンツの幅を設定したいと思います。したがって、基本的には次のような変数を作成する必要があります。data-tooltipdata-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

CSS3 attr()（まだサポートされていません）を使用して、次のような属性に基づいて幅を設定できます。

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

更新：attr()CSS2.1でのみサポートされ、contentプロパティでのみ機能します（最新のFFおよびChromeでテスト済み）。

于 2012-11-29T11:08:09.370 に答える
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 に書き込むことですが、これは要素自体をスタイルするための属性です。スタイルを追加する「後」要素はありません。

短い：

  • jQuery で css スタイルを「after」要素に追加しても、何も起こりません。
  • また、(CSS では) attr() は、'content'-attribute 以外のブラウザーではサポートされていません。
于 2012-11-29T11:06:37.640 に答える