css屏蔽title,从css添加title属性

8 个答案:

答案 0 :(得分：54)

你做不到。 CSS是一种表示语言。它不是为了添加内容而设计的(:before和:after非常简单。)

答案 1 :(得分：51)

嗯，虽然实际上无法更改title属性，但可以完全从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;

}

答案 2 :(得分：17)

Quentin是正确的，用CSS无法完成。如果要添加title属性，可以使用JavaScript执行此操作。这是一个使用jQuery的例子：

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

答案 3 :(得分：3)

可以使用jQuery：

$(document).ready(function() {

$('.mandatory').each(function() {

$(this).attr('title', $(this).attr('class'));

});

});

答案 4 :(得分：2)

正如Quentin和其他人所说，这不能完全用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');

Place the Mouse Over the following elements to see the title,

->Javascript Mandatory

->jQuery Mandatory

答案 5 :(得分：1)

有可能用HTML＆amp; CSS

如果你真的想要动态应用工具提示工作，这个(不是性能和架构友好的)解决方案可以让你使用浏览器渲染的工具提示，而无需诉诸JS。我可以想象这会比JS更好的情况。

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

示例：

＆＃13;

＆＃13;

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;

}＆＃13;

Hover to see first tooltip

Hover to see second tooltip

＆＃13;＆＃13;＆＃13;

注意：不推荐用于大型应用程序，因为不必要的HTML，可能的内容重复以及工具提示的额外元素会窃取鼠标事件(文本选择等)这一事实

答案 6 :(得分：1)

虽然目前无法使用CSS，但有人建议启用名为Cascading Attribute Sheets的此功能。

答案 7 :(得分：0)

一方面，将鼠标移到元素上时，标题作为工具提示很有用。这可以通过CSS-> element :: after解决。

但是，作为视力障碍者的辅助工具(无主题障碍的网站)，这一点更为重要。为此，它必须作为属性包含在HTML元素中。其他所有东西都是垃圾，笨蛋，白痴……！