Przykład:

<a href="example.com" title="My site"> Link </a>

Jak zmienić prezentację atrybutu „tytuł” ​​w przeglądarce ?. Domyślnie ma tylko żółte tło i małą czcionkę. Chciałbym go powiększyć i zmienić kolor tła.

Czy istnieje sposób CSS na stylizację atrybutu tytułu?

Oto przykład, jak to zrobić:

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>

Wydaje się, że w rzeczywistości istnieje czyste rozwiązanie CSS, wymagające tylko attrwyrażenia css , generowanej treści i selektorów atrybutów (co sugeruje, że działa już w IE8):

a[title]:hover:after {
  content: attr(title);
  position: absolute;
}

Źródło: https://jsfiddle.net/z42r2vv0/2/

aktualizuj w / dane wejściowe z @ViROscar: pamiętaj, że nie trzeba używać żadnego konkretnego atrybutu, chociaż użyłem atrybutu „tytuł” ​​w powyższym przykładzie; tak naprawdę moim zaleceniem byłoby użycie atrybutu „alt”, ponieważ istnieje szansa, że ​​treść będzie dostępna dla użytkowników, którzy nie mogą korzystać z CSS.

zaktualizuj ponownie Nie zmieniam kodu, ponieważ atrybut „tytuł” ​​w zasadzie oznacza atrybut „podpowiedź” i prawdopodobnie nie jest dobrym pomysłem ukrywanie ważnego tekstu w polu dostępnym tylko po najechaniu myszką, ale jeśli jesteś zainteresowany udostępnieniem tego tekstu atrybut „aria-label” wydaje się najlepszym miejscem: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Nie możesz stylizować rzeczywistego titleatrybutu

Sposób wyświetlania tekstu w titleatrybucie jest określany przez przeglądarkę i różni się w zależności od przeglądarki. Strona internetowa nie może zastosować żadnego stylu do podpowiedzi wyświetlanej przez przeglądarkę na podstawie titleatrybutu.

Możesz jednak stworzyć coś bardzo podobnego, używając innych atrybutów.

Możesz stworzyć pseudo-etykietkę z CSS i niestandardowym atrybutem (np. data-title)

W tym celu użyłbym data-titleatrybutu. data-*Atrybuty to metoda przechowywania niestandardowych danych w elementach DOM / HTML. Istnieje wiele sposobów dostępu do nich . Co ważne, można je wybrać za pomocą CSS.

Ponieważ możesz używać CSS do wybierania elementów z data-titleatrybutami, możesz następnie użyć CSS do utworzenia :after(lub :before) contentzawierającego wartość atrybutu za pomocąattr() .

Przykłady podpowiedzi w stylu

Większy i z innym kolorem tła (na zapytanie):

[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

Bardziej rozbudowana stylizacja (na podstawie tego postu na blogu ):

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    position: absolute;
    bottom: -1.6em;
    left: 100%;
    padding: 4px 4px 4px 8px;
    color: #222;
    white-space: nowrap; 
    -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, #f8f8f8, #cccccc);  
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

<a href="example.com" data-title="My site"> Link </a> with styled tooltip<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

Znane problemy

W przeciwieństwie do prawdziwego title podpowiedzi, podpowiedź wygenerowana przez powyższy CSS niekoniecznie jest gwarantowana, aby była widoczna na stronie (tzn. Może znajdować się poza widocznym obszarem). Z drugiej strony gwarantuje się, że znajduje się w bieżącym oknie, co nie ma miejsca w przypadku rzeczywistej podpowiedzi.

Ponadto pseudo-podpowiedź jest umieszczana względem elementu, który ma pseudo-podpowiedź, a nie w stosunku do położenia myszy na tym elemencie. Możesz dostosować, gdzie wyświetlana jest pseudo-etykieta. Pojawienie się w znanym miejscu względem elementu może być zaletą lub wadą, w zależności od sytuacji.

Nie możesz używać elementów, które nie są kontenerami, :beforeani :afterna nich

Istnieje dobre wyjaśnienie w odpowiedzi na pytanie „Czy mogę użyć: przed lub po po pseudoelemencie w polu wejściowym?”

Skutecznie, to oznacza, że nie można zastosować tej metody bezpośrednio na elementach takich jak <input type="text"/>, <textarea/>, <img>itp łatwe rozwiązaniem jest owinąć element, który nie jest to pojemnik w miejscu <span>albo <div>i mają pseudo-podpowiedź na pojemniku.

Przykłady użycia pseudo-etykietki na <span>opakowaniu elementu innego niż kontener:

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

.pseudo-tooltip-wrapper {
    /*This causes the wrapping element to be the same size as what it contains.*/
    display: inline-block;
}

Text input with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="input type=&quot;text&quot;"><input type='text'></span><br/><br/><br/>
Textarea with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="this is a textarea"><textarea data-title="this is a textarea"></textarea></span><br/>

^{Z kodu w blogu pod linkiem powyżej (który pierwszy raz zobaczyłem w odpowiedzi, która go plagiatowała), wydawało mi się oczywiste, że użyłem data-*atrybutu zamiast titleatrybutu. Takie działanie zostało również zasugerowane w komentarzu snostorm do tej (obecnie usuniętej) odpowiedzi.}

CSS nie może zmienić wyglądu podpowiedzi. Jest zależny od przeglądarki / systemu operacyjnego. Jeśli chcesz czegoś innego, musisz użyć JavaScript do generowania znaczników po najechaniu wskaźnikiem na element zamiast domyślnej podpowiedzi.

Myślałem, że opublikuję tutaj moje 20-liniowe rozwiązanie JavaScript. Nie jest idealny, ale może być przydatny dla niektórych, w zależności od potrzeb z podpowiedzi.

Kiedy z niego korzystać

• Automatycznie stylizuje etykietkę dla wszystkich elementów HTML ze TITLEzdefiniowanym atrybutem (obejmuje to elementy dynamicznie dodawane do dokumentu w przyszłości)
• Żadne zmiany Javascript / HTML ani modyfikacje nie są wymagane dla każdej podpowiedzi (tylko TITLEatrybut, semantycznie czysty)
• Bardzo lekki (dodaje około 300 bajtów zgzipowanych i zminimalizowanych)
• Potrzebujesz tylko bardzo podstawowej stylowej podpowiedzi

Kiedy NIE należy używać

• Wymaga jQuery, więc nie używaj, jeśli nie używasz jQuery
• Zła obsługa zagnieżdżonych elementów, które mają podpowiedzi
• Potrzebujesz więcej niż jednego opisu na ekranie w tym samym czasie
• Potrzebujesz podpowiedzi, aby zniknęła po pewnym czasie

Kod

// 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); }
}());

Wklej go w dowolnym miejscu, powinien on działać nawet po uruchomieniu tego kodu, zanim DOM będzie gotowy (po prostu nie będzie wyświetlać podpowiedzi, dopóki DOM nie będzie gotowy).

Dostosuj

Możesz zmienić vardeklaracje w drugim wierszu, aby nieco je dostosować.

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

Styl

Możesz teraz stylizować etykiety narzędzi za pomocą następującego CSS:

#tooltip {
    background: #fff;
    border: 1px solid red;
    padding: 3px 10px;
}

Znalazłem odpowiedź tutaj: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

mój własny kod wygląda następująco: zmieniłem nazwę atrybutu, jeśli zachowasz nazwę tytułu atrybutu, będziesz mieć dwa wyskakujące okienka dla tego samego tekstu, inną zmianą jest to, że mój tekst po najechaniu myszą wyświetla się pod odsłoniętym tekstem.

.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(glose);
  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" glose="Text shown on hovering">Exposed text</a>

Jsfiddle dla niestandardowego wzoru podpowiedzi znajduje się tutaj

Opiera się na selektorach pozycjonowania CSS i selektorach klasy pseduo

Sprawdź dokumentację MDN pod kątem obsługi pseudoklas w różnych przeglądarkach

    <!-- HTML -->
<p>
    <a href="http://www.google.com/" class="tooltip">
    I am a 
        <span> (This website rocks) </span></a>&nbsp; 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;
}

Natywnej podpowiedzi nie można nadać stylu.

To powiedziawszy, możesz użyć biblioteki, która pokazywałaby style warstw pływających, gdy element jest ukryty (zamiast rodzimych podpowiedzi i pomijanie ich) wymagających niewielkich modyfikacji kodu lub żadnych modyfikacji ...

Nie można stylizować domyślnego podpowiedzi przeglądarki. Ale możesz użyć javascript do tworzenia własnych niestandardowych podpowiedzi HTML.

a[title="My site"] {
    color: red;
}

Działa to również z dowolnym atrybutem, który chcesz dodać, na przykład:

HTML

<div class="my_class" anything="whatever">My Stuff</div>

CSS

.my_class[anything="whatever"] {
    color: red;
}

Zobacz, jak działa na: http://jsfiddle.net/vpYWE/1/