Voorbeeld:
<a href="example.com" title="My site"> Link </a>
Hoe verander ik de presentatie van het “titel” -attribuut in de browser?. Standaard heeft het gewoon gele achtergrond en een klein lettertype. Ik zou het graag groter maken en de achtergrondkleur veranderen.
Is er een CSS-manier om het titelattribuut in te stellen?
Antwoord 1, Autoriteit 100%
Het lijkt erop dat er in feite een zuivere CSS-oplossing is, die alleen de CSS attr
expressie, gegenereerde inhouds- en attribuut selectors vereist (die suggereert dat het zo ver terug werkt als IE8):
https://jsfiddle.net/z42R2vv0/2/
a {
position: relative;
display: inline-block;
margin-top: 20px;
}
a[title]:hover::after {
content: attr(title);
position: absolute;
top: -100%;
left: 0;
}
<a href="http://www.google.com/" title="Hello world!">
Hover over me
</a>
Antwoord 2, Autoriteit 88%
Hier is een voorbeeld van hoe het te doen:
a.tip {
border-bottom: 1px dashed;
text-decoration: none
}
a.tip:hover {
cursor: help;
position: relative
}
a.tip span {
display: none
}
a.tip:hover span {
border: #c0c0c0 1px dotted;
padding: 5px 20px 5px 5px;
display: block;
z-index: 100;
background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
left: 0px;
margin: 10px;
width: 250px;
position: absolute;
top: 10px;
text-decoration: none
}
<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>
Antwoord 3, Autoriteit 77%
Je kunt geen echte title
Attribuut
stylen
Hoe de tekst in de title
Attribuut wordt weergegeven, wordt gedefinieerd door de browser en varieert van browser naar browser. Het is niet mogelijk voor een webpagina om elke stijl toe te passen op de tooltip die de browser wordt weergegeven op basis van de title
kenmerk
U kunt echter iets vergelijkbaars maken met behulp van andere kenmerken.
U kunt een pseudo-tooltip maken met CSS en een aangepast attribuut (b.v. data-title
)
Hiervoor gebruik ik een data-title
Attribuut. data-*
attributen zijn een methode om aangepaste gegevens op te slaan in DOM-elementen / HTML. Er zijn meerdere manieren om ze te bezoeken . Belangrijk is dat ze kunnen worden geselecteerd door CSS.
Aangezien u CSS kunt gebruiken om elementen met data-title
-kenmerken te selecteren, kunt u vervolgens CSS gebruiken om :after
(of :before
) content
die de waarde van het kenmerk bevat met behulp van attr()
.
Voorbeelden van gestileerde knopinfo
Groter en met een andere achtergrondkleur (op verzoek van de vraag):
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #00FF00;
color: #111;
font-size: 150%;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
<a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip
Antwoord 4, autoriteit 18%
CSS kan de tooltip-uiterlijk niet wijzigen. Het is browser / OS-afhankelijk. Als je iets anders wilt, moet je JavaScript gebruiken om Markup te genereren wanneer je boven het element hangt in plaats van de standaardtooltip.
Antwoord 5, Autoriteit 13%
Ik heb het antwoord hier gevonden: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/
Mijn eigen code gaat als volgt, ik heb de attribuutnaam gewijzigd, als u de titelnaam voor het attribuut behoudt, wordt u uiteindelijk twee pop-ups voor dezelfde tekst, een andere wijziging is dat mijn tekst op de hovering-displays onder de blootgestelde tekst wordt gewijzigd .
.tags {
display: inline;
position: relative;
}
.tags:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: -34px;
color: #fff;
content: attr(gloss);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
}
.tags:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
<a class="tags" gloss="Text shown on hovering">Exposed text</a>
Antwoord 6, Autoriteit 8%
Ik dacht dat ik mijn 20 regels JavaScript-oplossing hier zou plaatsen. Het is niet perfect, maar kan voor sommigen nuttig zijn, afhankelijk van wat je nodig hebt via je tooltips.
wanneer u het gebruikt
- Stijlen automatisch de tooltip voor alle HTML-elementen met een
title
Attribuut gedefinieerd (dit omvat elementen die in de toekomst dynamisch aan het document zijn toegevoegd) - No JavaScript / HTML-wijzigingen of hacks vereist voor elke tooltip (alleen de
title
attribuut, semantisch helder) - ZEER LICHT (voegt ongeveer 300 bytes en gedimideerd toe)
- U wilt alleen een zeer standaard stijlvolle tooltip
wanneer u niet wilt gebruiken
- vereist jQuery, dus niet gebruiken als u jQuery
- Slechte ondersteuning voor geneste elementen die beide tooltips
- U hebt tegelijkertijd meer dan één tooltip op het scherm nodig
- Je hebt de tooltip nodig om na enige tijd te verdwijnen
niet gebruikt
hebben
de code
// Use a closure to keep vars out of global scope
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());
Plak het overal, het zou moeten werken, zelfs als je deze code uitvoert voordat de DOM klaar is (het toont alleen je tooltips totdat DOM klaar is).
Aanpassen
Je kunt de var
-declaraties op de tweede regel wijzigen om deze een beetje aan te passen.
var ID = "tooltip"; // The ID of the styleable tooltip
var CLS_ON = "tooltip_ON"; // Does not matter, make it somewhat unique
var FOLLOW = true; // TRUE to enable mouse following, FALSE to have static tooltips
var DATA = "_tooltip"; // Does not matter, make it somewhat unique
var OFFSET_X = 20, OFFSET_Y = 10; // Tooltip's distance to the cursor
Stijl
U kunt uw knopinfo nu opmaken met de volgende CSS:
#tooltip {
background: #fff;
border: 1px solid red;
padding: 3px 10px;
}
Antwoord 7, autoriteit 4%
Een jsfiddle voor aangepast knopinfopatroon is Hier
Het is gebaseerd op CSS-positionering en pseduo-klassekiezers
Controleer MDN-documentenvoor ondersteuning voor meerdere browsers van pseudo-klassen
<!-- HTML -->
<p>
<a href="http://www.google.com/" class="tooltip">
I am a
<span> (This website rocks) </span></a> a developer.
</p>
/*CSS*/
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span, a.tooltip:focus span {
display:block;
position:absolute;
top:1em;
left:1.5em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}
Antwoord 8, Autoriteit 3%
Native Tooltip kan niet worden gestyled.
Dat gezegd hebbende, kunt u wat bibliotheek gebruiken die stijlen drijvende lagen tonen wanneer het element wordt geoefend (in plaats van de inheemse tooltips, en ze onderdrukt) die weinig of geen code-modificaties vereisen …
Antwoord 9
U kunt de standaard browser-tooltip niet stylen. Maar u kunt JavaScript gebruiken om uw eigen aangepaste HTML-tooltips te maken.
Antwoord 10
a[title="My site"] {
color: red;
}
Dit werkt ook met elk attribuut dat u bijvoorbeeld wilt toevoegen:
HTML
<div class="my_class" anything="whatever">My Stuff</div>
CSS
.my_class[anything="whatever"] {
color: red;
}
Zie het werken op: http://jsfidddle.net/vackwe/1/