从css添加title属性

Question

如何将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;
}

Answer 1

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

您可以做的是在选择器之后设置标签的样式，并为其提供display: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;
}

Answer 2

你不能。CSS是一种表示语言。它不是为添加内容而设计的（除了:before和:after中非常琐碎的内容）。

Answer 3

Quentin是正确的，它不能用CSS完成。如果您想添加title属性，可以使用JavaScript进行添加。下面是一个使用jQuery的例子：

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

Answer 4

正如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>

Answer 5

可以用HTML&CSS

如果你真的想让动态应用的工具提示发挥作用，这个（对性能和体系结构不太友好）解决方案可以让你使用浏览器渲染的工具提示，而无需使用JS。我可以想象这种情况会比JS更好。

如果您有一个固定的title属性值子集，那么您可以在服务器端生成额外的元素，并让浏览器使用CSS从位于原始元素上方的另一个元素中读取title。

示例：

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

Answer 6

可以用jQuery:

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

Answer 7

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

Answer 8

一方面，当鼠标在元素上移动时，标题作为工具提示很有用。这可以通过CSS来解决->元素：：之后。但它作为视障人士的援助更为重要（主题无障碍网站）。为此，它必须作为属性包含在HTML元素中。其他的都是垃圾，垃圾，白痴的东西。。。！