Titelattribut aus CSS hinzufügen

So fügen Sie title = 'obligatorisch' von CSS zu den folgenden hinzu

     <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;
}

Das kannst du nicht. CSS ist eine Präsentationssprache. Es ist nicht zum Hinzufügen von Inhalten gedacht (mit Ausnahme der sehr trivialen mit :beforeund :after).

Nun, obwohl es nicht möglich ist, das title-Attribut zu ändern, ist es möglich, einen Tooltip vollständig aus CSS anzuzeigen. Eine funktionierende Version finden Sie unter http://jsfiddle.net/HzH3Z/5/ .

Was Sie tun können, ist das Label zu formatieren: Nach Auswahl und geben Sie es an: Keine, und legen Sie den Inhalt von CSS fest. Anschließend können Sie das Anzeigeattribut in display: block on label: hover: after ändern und es wird angezeigt. So was:

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 ist richtig, es kann nicht mit CSS gemacht werden. Wenn Sie ein titleAttribut hinzufügen möchten , können Sie dies mit JavaScript tun. Hier ist ein Beispiel mit jQuery:

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

Mit jQuery geht das:

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

Es ist möglich, dies mit HTML & CSS nachzuahmen

Wenn Sie wirklich wirklich möchten, dass dynamisch angewendete Tooltips funktionieren, können Sie mit dieser (nicht so leistungs- und architekturfreundlichen) Lösung vom Browser gerenderte Tooltips verwenden, ohne auf JS zurückgreifen zu müssen. Ich kann mir Situationen vorstellen, in denen dies besser wäre als JS.

Wenn Sie eine feste Teilmenge der Titelattributwerte haben, können Sie zusätzliche Elemente serverseitig generieren und den Browser mithilfe von CSS den Titel eines anderen Elements über dem ursprünglichen Element lesen lassen.

Beispiel:

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>

Hinweis: Es wird nicht für große Anwendungen empfohlen, da unnötiges HTML, mögliche Wiederholungen von Inhalten und die Tatsache, dass Ihre zusätzlichen Elemente für den Tooltip Mausereignisse (Textauswahl usw.) stehlen würden.

Wie Quentin und andere vorgeschlagen haben, kann dies nicht vollständig mit CSS durchgeführt werden (teilweise mit dem Inhaltsattribut von CSS). Stattdessen sollten Sie Javascript / jQuery verwenden, um dies zu erreichen.

JS:

document.getElementsByClassName("mandatory")[0].title = "mandatory";

oder mit 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>

Während dies mit CSS derzeit nicht möglich ist, gibt es einen Vorschlag zur Aktivierung dieser Funktionalität mit dem Namen Cascading Attribute Sheets .

Einerseits ist der Titel als Tooltip hilfreich, wenn Sie die Maus über das Element bewegen. Dies könnte mit CSS-> element :: after gelöst werden. Als Hilfsmittel für Sehbehinderte ist es jedoch viel wichtiger (themenfreie Website). Und dafür MUSS es als Attribut in das HTML-Element aufgenommen werden. Alles andere ist Müll, Pfusch, Idioten ...!