Css freelance tooltip img. Eenvoudige tooltips maken met HTML5, CSS en jQuery

Het is onwaarschijnlijk dat lay-outgoeroes in dit bericht iets nieuws voor zichzelf zullen vinden. Dit bericht is meer bedoeld voor beginnende lay-outontwerpers die, net als ik, problemen hadden met het maken en stylen van universele tooltips.

Toen ik onlangs een kleine blog aan het maken was, stond ik voor de taak om stijlvolle, maar tegelijkertijd eenvoudige tooltips te maken. Na geprobeerd te hebben verschillende manieren het maken van afzonderlijke div-containers voor tooltips, of het maken van tooltips op pure CSS, vond ik universele oplossing, dat de code niet rommelig maakt, compatibel is met meerdere browsers en tegelijkertijd zeer eenvoudig te implementeren is.
Iedereen die geïnteresseerd is in mijn methode om dit eenvoudige probleem op te lossen, vraag ik onder cat.

Dat is het!
Als resultaat krijgen we zoiets als dit: Demo

Dankzij dit eenvoudig script alle elementen op de pagina die het data-tooltip attribuut hebben, krijgen een tooltip.

Bedankt voor uw aandacht!

Vlad Merzjevitsj

HTML heeft al een global title-attribuut dat aan elk element op een webpagina kan worden toegevoegd. De aanwezigheid van dit attribuut voegt een tooltip toe die verschijnt wanneer u de muis over het element beweegt. Het tekstlettertype, de grootte van de tooltip en het uiterlijk ervan als geheel zijn afhankelijk van besturingssysteem en kan niet worden gewijzigd met behulp van stijlen. Bovendien zijn veel ontwikkelaars niet blij dat zo'n hint vrij snel verdwijnt. Dit dwingt je om te zoeken naar manieren om je eigen tooltip te maken, die op de gewenste manier is vormgegeven. Natuurlijk het meest universele methode is, maar in sommige gevallen is het voldoende om alleen met CSS rond te komen.

Als voorbeeld heb ik foto's gekozen; als je er met de muiscursor overheen beweegt, wordt de naam van de foto weergegeven. We zullen de tekstuitvoer zelf uitvoeren met behulp van de eigenschap content en de tekstwaarde van een bepaald attribuut overnemen via attr() . Helaas werkt de inhoud niet zoals gewenst in combinatie met img, dus worden de foto's in het element ingevoegd, waaraan we een data-title-attribuut met tooltip-tekst toevoegen. De verleiding is groot om het title-attribuut in te voegen en te gebruiken, maar in dit geval worden er tegelijkertijd twee tooltips weergegeven: de ene is “native” en de andere is van ons. We gebruiken dus ons eigen data-title attribuut, aangezien HTML5 dit toestaat. We krijgen dus de volgende code (voorbeeld 1).

Voorbeeld 1: HTML-code

HTML5 IE Cr Op Sa Fx

Tooltip in CSS

Laten we verder gaan met de stijl van onze tooltip. Eerst moet je het überhaupt laten verschijnen. Om dit te doen, gebruiken we het ::after pseudo-element, waaraan we inhoud toevoegen: attr(data-title) .

Foto::na ( inhoud: attr(data-titel); )

Het blijkt dat na de inhoud van het element met de fotoklasse de tekst van het data-title-attribuut wordt weergegeven, wat we nodig hadden. Maar omdat de tooltip alleen zou moeten verschijnen als je met de muiscursor over de foto beweegt, voegen we ook de :hover pseudo-klasse toe.

Foto:hover::after ( inhoud: attr(data-titel); )

Het enige dat overblijft is het instellen van de gewenste stijl van onze tooltip, in het bijzonder positie, achtergrondkleur, tekst, kader, enz. (voorbeeld 2).

Voorbeeld 2: Tooltip-stijl

HTML5 CSS3 IE Cr Op Sa Fx

CSS-tooltip .photo (weergave: inline-block; /* Inline blokelement*/ positie: relatief; /* Relatieve positionering */ ) .photo:hover::after ( inhoud: attr(data-titel); /* Weergavetekst */ positie: absoluut; /* Absolute positionering*/ links: 20%; bovenkant: 30%; /* Tooltip-positie */ z-index: 1; /* Geef de tooltip weer bovenop andere elementen */ achtergrond: rgba(255,255,230,0.9); /* Doorschijnende achtergrondkleur */ lettertypefamilie: Arial, schreefloos; /* Lettertype */ lettergrootte: 11px; /* Tooltip-tekstgrootte */ opvulling: 5px 10px; /* Marges */ rand: 1px effen #333; /* Frameparameters */ )

Het resultaat van dit voorbeeld wordt getoond in Fig. 1.

Rijst. 1. Type tooltip

De positie van de tooltip is niet afhankelijk van de cursorpositie; deze verschijnt op dezelfde plaats als u de cursor over de afbeelding beweegt. U kunt de tooltip onder aan de foto laten verschijnen, zodat deze niet bedekt de meeste foto's. De stijl zal iets veranderen (voorbeeld 3).

Voorbeeld 3. Tooltip weergeven onder aan de foto

HTML5 CSS3 IE Cr Op Sa Fx

Tooltip in CSS .photo ( weergave: inline-blok; /* Inline-blokelement */ positie: relatief; /* Relatieve positionering */ ) .photo:hover::after ( inhoud: attr(data-titel); / * Geef de tekst weer */ positie: absoluut; /* Absolute positionering */ links: 0;* Positie van de tooltip */ z-index: 1; : rgba(0,42,167,0.6); /* Semi-transparante achtergrondkleur */ kleur: #fff;* Tekstkleur */ tekstuitlijning: centreren /* Gecentreerde tekstuitlijning */ lettertypefamilie: Arial, sans -serif ; /* Lettertype */ lettergrootte: 11px;* Tooltip-tekstgrootte */ opvulling: 5px 10px;

Het resultaat van dit voorbeeld wordt getoond in Fig. 2.

Rijst. 2. Type tooltip

Helaas werkt de eigenschap transition, die u kunt gebruiken om de tooltip te animeren, niet met pseudo-elementen. Daarom zullen we tevreden moeten zijn met de plotselinge verschijning van onze tooltip. Ook zal er geen effect zijn in de browser IE8 en eerder, deze versie ondersteunt ::after niet. Als u dit pseudo-element echter vervangt door :after , kunt u een min of meer werkende optie krijgen.

of wat HTML-elementen kan tooltips bevatten

Dit hoofdstuk bevat voorbeelden van tooltips uit het gebied Hypertext Markup.

In het menu aan de linkerkant vindt u modern en zeer gedetailleerde lessen door HTML.

Hiermee kunt u uw website maken schone lei, maar kijk voorlopig een beetje lager.

In dit hoofdstuk gaan we kijken

Voordat u doorgaat met HTML-hints, raad ik u aan de informatie te lezen.

Dit kan interessant zijn.

Belangrijkste trends van het vroege internet

Sinds 1997, na de komst van de eerste browsers, hebben sommige consumenten zich actief gespecialiseerd in verschillende gebieden Internet, maar ook in de sfeer informatietechnologie en ondersteuning computerapparatuur. Veel gebruikers worden webontwerpers, beginnen persoonlijke en zakelijke websites te maken en nemen deel aan de constructie van lokale websites computernetwerken. Op deze manier scholen ze zichzelf bij. Deze stand van zaken heeft tot op de dag van vandaag standgehouden. Tegenwoordig is het erg modieus en handig om kennis op te doen Wereld wijde web. Tegenwoordig, en vooral toen, halverwege de jaren negentig van de vorige eeuw, hebben voormalige socialistische landen behoefte aan programmeerspecialisten. Als er vraag is, zal er ook aanbod zijn. Programmeurs worden massaal opgeleid - sommige op universiteiten, sommige thuis achter een computerscherm. In deze fantastische tijden winnen programmeerforums grote populariteit, waar jonge en niet-zo-specialisten hun ervaringen en ideeën uitwisselen.

Alles is hier bijna hetzelfde: het title="" attribuut definieert HTML-tooltip .

De alt="" van de afbeelding geeft de alternatieve tekst aan die op de pagina wordt weergegeven als de afbeelding niet wordt weergegeven.

Verwar HTML-tooltip en alternatieve tekst niet, aangezien het totaal verschillende dingen zijn.

De HTML-tooltip is van toepassing op vrijwel elk element op de pagina.

Om het anders te zeggen: de title="" die we kennen uit de bovenstaande voorbeelden kan header-tags van alle niveaus, paragraaf-tags, blokken, afbeeldingen en lineaire elementen zoals . en anderen.