Ajouter l’atsortingbut title de css

Comment append title = ‘obligatoire’ de CSS à la suivante

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

Vous ne pouvez pas CSS est un langage de présentation. Il n’est pas conçu pour append du contenu (sauf pour le très sortingvial avec :before et :after ).

Eh bien, bien qu’il ne soit pas possible de changer l’atsortingbut title, il est possible d’afficher une info-bulle complètement à partir de css. Vous pouvez vérifier une version de travail sur http://jsfiddle.net/HzH3Z/5/ .

Ce que vous pouvez faire, c’est styliser l’étiquette: après le sélecteur et lui donner un affichage: aucun, et définir son contenu à partir de CSS. Vous pouvez ensuite modifier l’atsortingbut d’affichage à afficher: bloc sur l’étiquette: survol: après, et cela s’affichera. Comme ça:

 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 est correct, cela ne peut pas être fait avec CSS. Si vous souhaitez append un atsortingbut title , vous pouvez le faire avec JavaScript. Voici un exemple d’utilisation de jQuery:

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

Peut faire, avec jQuery:

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

Bien qu’il ne soit pas possible actuellement avec CSS, il existe une proposition pour activer cette fonctionnalité appelée feuilles d’atsortingbuts en cascade .

Comme Quentin et d’autres l’ont suggéré, cela ne peut pas être complètement fait avec css (partiellement avec l’atsortingbut content de css). Au lieu de cela, vous devez utiliser javascript / jQuery pour y parvenir,

JS:

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

ou en utilisant jQuery:

 $('.mandatory').attr('title','mandatory'); 
 document.getElementsByClassName('mandatory')[0].setAtsortingbute('title', 'mandatory'); $('.jmandatory').attr('title', 'jmandatory'); 
  Place the Mouse Over the following elements to see the title, 



Il est possible d’imiter cela avec HTML & CSS

Si vous voulez vraiment que les info-bulles appliquées dynamicment fonctionnent, cette solution (pas très performante et sans architecture) peut vous permettre d’utiliser des infobulles rendues par le navigateur sans recourir à JS. Je peux imaginer des situations où cela serait mieux que JS.

Si vous avez un sous-ensemble fixe de valeurs d’atsortingbuts de titre, vous pouvez générer des éléments supplémentaires côté serveur et laisser le navigateur lire le titre d’un autre élément positionné au-dessus de l’original à l’aide de CSS.

Exemple:

 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; } 
 
Hover to see first tooltip
Hover to see second tooltip