是否可以按類名定義標題屬性？

Question

我想讓所有.note元素都有一個特定的工具提示。

是否可以自動執行此操作，例如在CSS中？ 就像note類有顏色和定義的字體一樣，是否可以將工具提示文本（ title屬性）與該類綁定？

我可以創建一些迭代所有.note元素的函數，如果它還不存在則追加title屬性。 但是，由於我不必手動迭代CSS樣式，我想知道是否有更優雅的解決方案來解決這個問題（例如，是否可以在CSS中定義它？）。

Answer 1

您無法使用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小提琴演示 。

但是，使用它仍然會允許顯示原始title ，因此我建議使用JavaScript（或服務器端語言）刪除該屬性。

可能的JavaScript標題刪除方法：

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

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

JS Fiddle演示（結合兩種方法） 。

---

編輯 ，作為OP，從評論（下面）不想改變現有的外觀，添加一個JavaScript選項為所有元素分配一個新的標題，其中類名為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小提琴演示 。

Answer 2

這不是CSS范圍內的東西。 最好的辦法是使用一些JavaScript或JQuery。

Answer 3

當你用'eg CSS'問這個問題時，我假設你想要一個關於如何使用類來分配標題的答案。 像其他答案一樣，jQuery或javascript是你最好的選擇。

使用jQuery，您可以：

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

這是一個例子的小提琴： http ： //jsfiddle.net/RdNvy/

Answer 4

CSS用於不用於執行操作的樣式; 你需要JavaScript才能做到這一點。 您可以使用document.getElementsByClassName來獲取可以循環設置這些標題屬性的數組。

Answer 5

我不確定，但試着掠奪css“content”屬性。 http://www.w3schools.com/cssref/pr_gen_content.asp