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?
Odpowiedzi:
Oto przykład, jak to zrobić:
źródło
Wydaje się, że w rzeczywistości istnieje czyste rozwiązanie CSS, wymagające tylko
attr
wyrażenia css , generowanej treści i selektorów atrybutów (co sugeruje, że działa już w IE8):Ź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
źródło
stacking context
. Wszystkie elementy zposition
innym niżstatic
tworzy nowy kontekst stosu, a podpowiedzi czystego CSS nie są widoczne na zewnątrz, ani nie mogą wykraczać poza taki kontekst stosu , więc jeśli masz ciasny element z pozycjąrelative
, podpowiedź CSS nie będzie widoczna. Jedynym rozwiązaniem jest dołączenie podpowiedzi do kontekstu najwyższego stosu (np.<body>
), Który wymaga JavaScript.Nie możesz stylizować rzeczywistego
title
atrybutuSposób wyświetlania tekstu w
title
atrybucie 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 podstawietitle
atrybutu.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-title
atrybutu.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-title
atrybutami, możesz następnie użyć CSS do utworzenia:after
(lub:before
)content
zawierającego wartość atrybutu za pomocąattr()
.Przykłady podpowiedzi w stylu
Większy i z innym kolorem tła (na zapytanie):
Bardziej rozbudowana stylizacja (na podstawie tego postu na blogu ):
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,
:before
ani:after
na nichIstnieje 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: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 zamiasttitle
atrybutu. Takie działanie zostało również zasugerowane w komentarzu snostorm do tej (obecnie usuniętej) odpowiedzi.źródło
input[type='text']
lubtextarea
, ale nie wiem dlaczego. Czy ktoś może wyjaśnić?:before
a:after
pseudoelementy i nie działają na elementach, które nie są kontenerami. Odpowiedź jest dobra: czy mogę użyć: przed lub po po pseudoelemencie w polu wejściowym? Aby skorzystać z tej metody, prawdopodobnie najłatwiej jest owinąć elementy, które nie są kontenerami, w a<span>
lub<div>
na którym umieściszdata-title
atrybut. Prawdopodobnie będziesz też chciał je podaćdisplay: inline-block;
, ponieważ dzięki temu będą miały taki sam rozmiar jak<input>
lub<textarea>
. Zaktualizowałem tę odpowiedź za pomocą przykładu.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.
źródło
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ć
TITLE
zdefiniowanym atrybutem (obejmuje to elementy dynamicznie dodawane do dokumentu w przyszłości)TITLE
atrybut, semantycznie czysty)Kiedy NIE należy używać
Kod
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ć
var
deklaracje w drugim wierszu, aby nieco je dostosować.Styl
Możesz teraz stylizować etykiety narzędzi za pomocą następującego CSS:
źródło
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.
źródło
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
źródło
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 ...
źródło
title
atrybut. Jeśli więc skonfigurujesz własną implementację podpowiedzi, lepiej użyć innego atrybutu (powiedzmydata-tip
) zamiasttitle
.Nie można stylizować domyślnego podpowiedzi przeglądarki. Ale możesz użyć javascript do tworzenia własnych niestandardowych podpowiedzi HTML.
źródło
Działa to również z dowolnym atrybutem, który chcesz dodać, na przykład:
HTML
CSS
Zobacz, jak działa na: http://jsfiddle.net/vpYWE/1/
źródło
anything
nie jest prawidłowym atrybutem HTML. W przypadku atrybutów niestandardowych użyjdata-
atrybutów.