2016-04-25 11 views
-1

Ich versuche, die Schriftgröße von span Titelelement zu ändern. Ich war für gutes Beispiel googeln, und ich gefunden habe, dieses: linkWie ändert man die Schriftgröße der HTML-Titelspanne?

Aber auch wenn Titel innen grau Tooltip, der zweite wird angezeigt gezeigt: enter image description here

Meine Frage ist: Wie diese zweite, Stil ein Tooltip (gelb) durch Erhöhung seiner Schriftgröße?

Meine Spannweite sieht wie folgt aus:

<span title=${code} ></span> 

Antwort

2

Ich habe Ihre Geige testen, wie es scheint, dass dieses Problem nur auf FireFox passiert ist. Sie zeigen einfach 1 Box (Sie schreiben Inhalt in CSS) und das Browser-Standard-Titelattribut, die bei Hover angezeigt werden.

Wenn Sie nicht über die wirklichen „title“ -Attribut ist es egal, können Sie eine Behelfslösung wie folgt verwenden: http://jsfiddle.net/tDQWN/9078/

nur 3 Zeilen Code ändern:

Die Ausgabe Ihres HTML:

<span title=${code} ></span> 

Und die CSS der: nach Inhalt:

a[data-title]:hover:after { 
    content: attr(data-title); 
    padding: 4px 8px; 
    color: #333; 
    position: absolute; 
    left: 0; 
    top: 100%; 
    white-space: nowrap; 
    z-index: 20px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222; 
    -webkit-box-shadow: 0px 0px 4px #222; 
    box-shadow: 0px 0px 4px #222; 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); 
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc); 
} 

I n einfache Worte, ich habe gerade das Attribut "title" in einem Attribut "Datentitel" geändert. In diesem Fall gibt der Browser diesen kleinen Titeltext nicht aus, da es sich nicht um ein Standardattribut "Titel" handelt. Jetzt müssen Sie den Stil von nur einer Box machen.

1

[title]:hover:after{ 
 
    content: attr(title); 
 
    background:yellow; 
 
    padding: 5px; 
 
    border-radius:5px; 
 
    border:1px solid; 
 
}
<span title="jayeshshelar.com">Jayesh Shelar</span>

Verwandte Themen