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

Как добавить title= 'mandatory' из 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;
}
7 60
html css

7 ответов:

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

50

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

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

Квентин прав, это не может быть сделано с помощью CSS. Если вы хотите добавить

15

может сделать, с помощью jQuery:

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

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

1

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

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

0