blocks|key|887654|text|你不能。CSS是一种表示语言。它不是为添加内容而设计的(除了:before和:after中非常琐碎的内容)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|887655|entityMap^0|U|7|12|6|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

You can't. CSS is a presentation language. It isn't designed to add content (except for the very trivial with <code>:before</code> and <code>:after</code>).

blocks|key|670696|text|虽然实际上不可能更改title属性，但是可以完全从css显示工具提示。您可以在http://jsfiddle.net/HzH3Z/5/上查看工作版本。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|670697|您可以做的是设置label:after选择器的样式，并将其指定为display:none，然后从css设置其内容。然后，您可以将显示属性更改为label:hover:after上的display:block，它将显示出来。如下所示：|670698|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;
}|code-block|syntax|javascript|670699|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/HzH3Z/5/^0|13|S|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Well, although it's not actually possible to change the title attribute, it is possible to show a tooltip completely from css.
You can check a working version out at <a href="http://jsfiddle.net/HzH3Z/5/" rel="nofollow noreferrer">http://jsfiddle.net/HzH3Z/5/</a>.
What you can do is style the label:after selector and give it display:none, and set it's content from css. You can then change the display attribute to display:block on label:hover:after, and it will show.
Like this:
<pre><code>label::after{
 content: &quot;my tooltip&quot;;
 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;
}
</code></pre>

blocks|key|887677|text|Quentin是正确的，它不能用CSS完成。如果你想添加一个title属性，你可以用JavaScript来完成。下面是一个使用jQuery的示例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|887678|$('label').attr('title','mandatory');|code-block|syntax|javascript|887679|entityMap^0|U|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Quentin is correct, it can't be done with CSS. If you want to add a <code>title</code> attribute, you can do it with JavaScript. Here's an example using jQuery:

<pre><code>$('label').attr('title','mandatory');
</code></pre>

blocks|key|887687|text|使用jQuery可以做到：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|887688|$(document).ready(function()+{
++++$('.mandatory').each(function()+{
++++++++$(this).attr('title',+$(this).attr('class'));
++++});
});|code-block|syntax|javascript|887689|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Can do, with jQuery:

<pre><code>$(document).ready(function() {
 $('.mandatory').each(function() {
 $(this).attr('title', $(this).attr('class'));
 });
});
</code></pre>

blocks|key|887894|text|正如Quentin和其他人建议的那样，这不能完全使用css完成(部分使用css的内容属性完成)。相反，您应该使用javascript/jQuery来实现此目的，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|887895|JS：|887896|document.getElementsByClassName("mandatory")[0].title+=+"mandatory";|code-block|syntax|javascript|887897|或者使用jQuery：|887898|$('.mandatory').attr('title','mandatory');|887899|​|887900|document.getElementsByClassName('mandatory')[0].setAttribute('title',+'mandatory');

$('.jmandatory').attr('title',+'jmandatory');|887901|<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,
 
<label+class="mandatory">->Javascript+Mandatory</label>
 
<label+class="jmandatory">->jQuery+Mandatory</label>|887902|887903|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|10|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|S|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|U|$]]

As Quentin and other suggested this cannot totally be done with css(partially done with content attribute of css). Instead you should use javascript/jQuery to achieve this,

JS:

<pre><code>document.getElementsByClassName("mandatory")[0].title = "mandatory";
</code></pre>

or using jQuery:

<pre><code>$('.mandatory').attr('title','mandatory');
</code></pre>

<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementsByClassName('mandatory')[0].setAttribute('title', 'mandatory');

$('.jmandatory').attr('title', 'jmandatory');</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
Place the Mouse Over the following elements to see the title,
&lt;br/&gt;&lt;br/&gt;
&lt;b&gt;&lt;label class="mandatory"&gt;-&gt;Javascript Mandatory&lt;/label&gt;&lt;/b&gt;
&lt;br/&gt;&lt;br/&gt;
&lt;b&gt;&lt;label class="jmandatory"&gt;-&gt;jQuery Mandatory&lt;/label&gt;&lt;/b&gt;</code></pre>
</div>
</div>

blocks|key|670614|text|虽然目前不能使用CSS，但有一项建议是启用此功能，称为Cascading+Attribute+Sheets。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|670615|entityMap|0|LINK|mutability|MUTABLE|url|https://web.archive.org/web/20150720091350/http://www.webmonkey.com/2012/09/like-css-wrap-your-head-around-cascading-attribute-sheets/^0|R|Q|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

While currently not possible with CSS, there is a proposal to enable this functionality called <a href="https://web.archive.org/web/20150720091350/http://www.webmonkey.com/2012/09/like-css-wrap-your-head-around-cascading-attribute-sheets/" rel="nofollow noreferrer">Cascading Attribute Sheets</a>.

blocks|key|670817|text|一方面，当鼠标移动到元素上时，标题作为工具提示很有帮助。这可以通过CSS->+element::after来解决。但它更重要的是作为视障人士的辅助工具(无主题障碍网站)。为此，它必须作为一个属性包含在HTML元素中。其他的一切都是垃圾，笨拙，愚蠢的东西...！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|670818|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

On the one hand, the title is helpful as a tooltip when moving the mouse over the element. This could be solved with CSS-&gt; element::after.
But it is much more important as an aid for visually impaired people (topic handicap-free website). And for this it MUST be included as an attribute in the HTML element. Everything else is junk, botch, idiot stuff ...!

How to add title='mandatory' from css to the following

<pre><code> &lt;label class='mandatory'&gt;Name&lt;/label&gt;

.mandatory
{
background-image:url(/media/img/required.gif);
background-position:top right;
background-repeat:no-repeat;
padding-right:10px;
font-weight:bold;
}
</code></pre>

add title attribute from css

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

如何将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:

问从css添加标题属性
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从css添加标题属性EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从css添加标题属性
EN