Добавить атрибут title из css

Ответ 1

Вы не можете. CSS - это язык презентации. Он не предназначен для добавления контента (за исключением очень тривиального с :before и :after).

Ответ 2

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

Что вы можете сделать, так это стилизовать метку: после селектора и дать ему отображение: none и установить его содержимое из css. Затем вы можете изменить атрибут отображения, чтобы отобразить: блок на ярлыке: 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;
}

Ответ 3

Quentin корректен, это невозможно сделать с помощью CSS. Если вы хотите добавить атрибут title, вы можете сделать это с помощью JavaScript. Вот пример использования jQuery:

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

Ответ 4

Может, с jQuery:

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

Ответ 5

В настоящее время невозможно использовать CSS, есть предложение включить эту функциональность под названием Каскадные таблицы атрибутов.

Ответ 6

Как сказал Квентин и другие, это невозможно сделать с помощью css (частично с атрибутом content 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>

Ответ 7

Можно подражать этому с помощью HTML и CSS

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

Если у вас есть фиксированное подмножество значений атрибута title, вы можете создать дополнительные элементы на стороне сервера и позволить браузеру прочитать заголовок из другого элемента, расположенного над исходным, используя 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>