클래스 이름으로 제목 속성을 정의 할 수 있습니까?

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 (또는 서버 측 언어)로 해당 속성을 제거하는 것이 좋습니다.

가능한 자바 스크립트 타이틀 제거 방법 :

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).

---

주석 (아래) 클래스 이름을 가진 모든 요소에 대한 새 제목을 할당에 자바 스크립트 옵션을 추가, 기존의 모양과 느낌을 변경하고 싶지 않은에서, 영업 이익으로,을 편집 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

잘 모르겠지만 "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/