从css添加标题属性

如何将CSS中的title ='mandatory'添加到以下内容

     <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）。

好吧，尽管实际上不可能更改title属性，但可以从CSS完全显示工具提示。您可以从http://jsfiddle.net/HzH3Z/5/查看工作版本。

您可以做的是在选择器之后设置label：after的样式，并使其显示为：none，然后从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;
}

Quentin是正确的，它不能用CSS完成。如果要添加title属性，可以使用JavaScript来实现。这是使用jQuery的示例：

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

可以使用jQuery：

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

可以用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，可能的内容重复以及您的工具提示附加元素会窃取鼠标事件（文本选择等）。

正如Quentin和其他人建议的那样，这不能完全使用CSS完成（部分使用CSS的content属性完成）。相反，您应该使用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>

虽然目前CSS无法实现，但建议启用此功能，称为级联属性表。

一方面，将鼠标移到元素上时，标题作为工具提示很有用。这可以通过CSS-> element :: after解决。但是，作为视力障碍者的辅助工具（无主题障碍的网站），这一点更为重要。为此，它必须作为属性包含在HTML元素中。其他所有东西都是垃圾，笨蛋，白痴……！