додати атрибут заголовка з css

Як додати title = 'обов'язковий' з css до наступного

     <label class='mandatory'>Name</label>

.mandatory
{
background-image:url(/media/img/required.gif);
background-position:top right;
background-repeat:no-repeat;
padding-right:10px;
font-weight:bold;
}

Ви не можете. CSS - це мова презентацій. Він не призначений для додавання вмісту (за винятком дуже тривіального з :beforeі :after).

Ну, хоча насправді неможливо змінити атрибут заголовка, можна повністю показати підказку з css. Ви можете перевірити робочу версію за адресою http://jsfiddle.net/HzH3Z/5/ .

Що ви можете зробити, це стилізувати ярлик: після селектора і надати йому display: none та встановити його вміст із css. Потім ви можете змінити атрибут display на display: block on label: hover: after, і він відобразиться. Подобається це:

label:after{
    content: "my tooltip";
    padding: 2px;
    display:none;
    position: relative;
    top: -20px;
    right: -30px;
    width: 150px;
    text-align: center;
    background-color: #fef4c5;
    border: 1px solid #d4b943;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
}
label:hover:after{
    display: block;
}

Квентін правильний, цього не можна зробити за допомогою CSS. Якщо ви хочете додати titleатрибут, ви можете зробити це за допомогою JavaScript. Ось приклад використання jQuery:

$('label').attr('title','mandatory');

Можна з jQuery:

$(document).ready(function() {
    $('.mandatory').each(function() {
        $(this).attr('title', $(this).attr('class'));
    });
});

Як запропонували Квентін та інші, це не можна повністю зробити з css (частково це зробити з атрибутом вмісту css). Натомість для досягнення цього слід використовувати javascript / jQuery,

JS:

document.getElementsByClassName("mandatory")[0].title = "mandatory";

або за допомогою jQuery:

$('.mandatory').attr('title','mandatory');

document.getElementsByClassName('mandatory')[0].setAttribute('title', 'mandatory');

$('.jmandatory').attr('title', 'jmandatory');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Place the Mouse Over the following elements to see the title,
<br/><br/>
<b><label class="mandatory">->Javascript Mandatory</label></b>
<br/><br/>
<b><label class="jmandatory">->jQuery Mandatory</label></b>

Це можна імітувати за допомогою HTML і CSS

Якщо ви дійсно хочете, щоб працювали підказки, що застосовуються динамічно, це (не настільки зручне для продуктивності та архітектури) рішення може дозволити вам використовувати підказки, відтворені браузером, не вдаючись до JS. Я можу уявити ситуації, коли це було б краще, ніж JS.

Якщо у вас є фіксована підмножина значень атрибутів заголовка, ви можете генерувати додаткові елементи на стороні сервера і дозволяти браузеру читати заголовок з іншого елемента, розташованого над вихідним, за допомогою CSS.

Приклад:

div{
  position: relative;
}
div > span{
  display: none;
}

.pick-tooltip-1 > .tooltip-1, .pick-tooltip-2 > .tooltip-2{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

<div class="pick-tooltip-1">
  Hover to see first tooltip
  <span class="tooltip-1" title="Tooltip 1"></span>
  <span class="tooltip-2" title="Tooltip 2"></span>
</div>

<div class="pick-tooltip-2">
  Hover to see second tooltip
  <span class="tooltip-1" title="Tooltip 1"></span>
  <span class="tooltip-2" title="Tooltip 2"></span>
</div>

Примітка: Це не рекомендується для великомасштабних програм через непотрібний HTML, можливі повторення вмісту та той факт, що ваші додаткові елементи для підказки викрадуть події миші (виділення тексту тощо)

Хоча в даний час це неможливо з CSS, існує пропозиція увімкнути цю функцію, яка називається Каскадні таблиці атрибутів .

З одного боку, заголовок корисний як підказка під час наведення миші на елемент. Це можна вирішити за допомогою CSS-> element :: after. Але це набагато важливіше як допоміжний засіб для людей із вадами зору (веб-сайт без інвалідів). І для цього він ПОВИНЕН бути включений як атрибут у елемент HTML. Все інше - мотлох, дрянь, ідіотські речі ...!