タイトル属性をクラス名で定義することはできますか？

Question

すべての.note要素に特定のツールチップがあるようにしたいと思います。

これを自動的に行うことは可能ですか？ CSSで？ noteクラスに色とフォントが定義されているように、ツールチップテキスト（title属性）をそのクラスにバインドすることは可能ですか？

.note要素すべてを繰り返し処理し、まだ存在しない場合はtitle属性を追加することができます。しかし、私はCSSスタイルを手動で繰り返す必要がないので、この問題に対するより洗練された解決法があるかどうかは疑問でした（CSSで定義できるなど）。

Answer 1

これは、CSSの範囲内にあるものではありません。 JavaScriptやJQueryを使うのが最善の方法です。

Answer 2

CSSを使用して要素の属性を変更することはできません。あなたは、おそらく、（のみ不器用ながらも）しかし、title機能をエミュレートできます。

.note { 
    position: relative; 
} 

.note:after { 
    content: "The alternate 'pseudo-title' text for the .note elements."; 
    position: absolute; 
    left: 50%; 
    background-color: #000; 
    color: #fff; 
    } 

JS Fiddle demoを。

これを使用すると元のtitleが表示されるので、JavaScript（またはサーバー側言語）でその属性を削除することをおすすめします。

可能なJavaScriptのタイトル除去方法：

var notes = document.getElementsByClassName('note'); 
var notesNum = notes.length; 

for (i=0; i<notesNum; i++){ 
    notes[i].removeAttribute('title'); 
} 

JS Fiddle demo (combining the two approaches)。

---

はコメント（下記）クラス名を持つすべての要素の新しいタイトルを割り当てるには、JavaScriptのオプションを追加するために、既存の外観を変更し、感じるしたくないから、OPとして、を編集します note：

var notes = document.getElementsByClassName('note'); 
var notesNum = notes.length; 
var newTextForNotesClass = "This is the new title text for the notes-class-name group."; 

for (i=0; i<notesNum; i++){ 
    notes[i].title = newTextForNotesClass; 
} 

JS Fiddle demoです。

Answer 3

CSSはスタイリングのためのものではありません。あなたはそのようなことのためにJavaScriptが必要です。 document.getElementsByClassNameを使用して、これらのタイトル属性を設定するループを行うことができる配列を取得できます。

Answer 4

私は確信していませんが、css "content"プロパティで略奪しようとします。 http://www.w3schools.com/cssref/pr_gen_content.asp

Answer 5

CSS 'では、クラスを使用してタイトルを割り当てる方法についての回答が必要と思われます。他の答えと同様に、jQueryやjavascriptが最善の策です。 jQueryを使って

、あなたが行うことができます：ここでは

tooltip = "Tooltip Text"; 
$('.note').attr('title', tooltip); 

は一例とフィドルです：http://jsfiddle.net/RdNvy/