¿Es posible definir un atributo de título por nombre de clase?

Question

Me gustaría hacer que todos los elementos .note tengan una información sobre herramientas específica.

¿Es posible hacer esto automáticamente, p. en CSS? Al igual que la clase note tiene colores y una fuente definida, ¿es posible enlazar el texto de información sobre herramientas (el atributo title) con esa clase?

Podría hacer alguna función que itere sobre todos los elementos .note y anexar el atributo title si aún no está presente. Sin embargo, dado que no tengo que iterar manualmente para estilos CSS, me preguntaba si también hay una solución más elegante para este problema (por ejemplo, ¿es posible definirla en CSS?).

Answer 1

Eso no está dentro del alcance de CSS. Su mejor opción es usar JavaScript o JQuery.

Answer 2

No puede cambiar los atributos de un elemento mediante CSS; usted podría, quizás, emular la funcionalidad title, aunque (aunque sólo con torpeza):

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

Sin embargo, el uso de esto todavía permitirá mostrar el original title, por lo que le sugiero que elimine ese atributo con JavaScript (o en un idioma del lado del servidor).

Posible método de eliminación de JavaScript título:

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

---

Editado, como el PO, por los comentarios (abajo) no quieren cambiar el aspecto y la sensación existente, para agregar una opción de JavaScript para la asignación de un nuevo título para todos los elementos con el nombre de clase de 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 es para el estilo no para llevar a cabo la acción; necesitarías JavaScript para ese tipo de cosas. Puede usar document.getElementsByClassName para obtener una matriz que pueda utilizar para establecer esos atributos de título.

Answer 4

No estoy seguro, pero intente robar en la propiedad "content" de css. http://www.w3schools.com/cssref/pr_gen_content.asp

Answer 5

Al hacer la pregunta con 'p. Ej. CSS ', supongo que quieres una respuesta sobre cómo usar una clase para asignar un título. Al igual que las otras respuestas, jQuery o javascript es tu mejor opción.

con jQuery, puede hacerlo:

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

Aquí es un violín con un ejemplo: http://jsfiddle.net/RdNvy/