Dropdown-html-tooltip. Tooltip html en css zonder scripts

Een HTML-tooltip is een blok met aanvullende informatie, dat verschijnt als u er met de muis overheen beweegt specifiek onderdeel webpagina's. Vandaag zullen we onze eigen tooltip maken met met behulp van HTML en CSS:

Bekijk demo | Broncode downloaden

We kunnen CSS-hints gebruiken voor de meeste elementen, zoals links, tags, opgemaakte tekst, enz. We zullen verschillende klassen op het element moeten toepassen en een data-attribuut met de tooltip-tekst moeten toevoegen.

We moeten een HTML-document maken en de bronmarkering instellen:

Tooltips Demo // inhoud

Ik heb een link naar Normalize.css toegevoegd die helpt alle browserstijlen terug te zetten naar de standaardwaarden en ervoor zorgt dat elk element er in alle browsers hetzelfde uitziet. In tegenstelling tot standaard css opnieuw instellen Normalize.css verwijdert niet alle standaardstijlen, dus u hoeft de stijl van elk element niet helemaal opnieuw te schrijven.

Ik heb een div gemaakt met een containerklasse waarin we de basisvoorbeelden van HTML-tooltips zullen plaatsen. Hier zijn de stijlen voor body en de klasse .container:

body ( lettertypefamilie: "Work Sans", schreefloos; lettergrootte: 1,5em; lijnhoogte: 1,4em; lettertypegewicht: 700; achtergrondkleur: #28ABE3; kleur: #fff; ) .container ( breedte: 800px; marge: 100px auto; achtergrond: radiaal verloop (cirkel verste hoek op 400px 250px, #64BBE0 0%, #28ABE3, #28ABE3 95%); )

Ik heb de containerdiv gecentreerd door margin-left en margin-right in te stellen op auto . Ook wat styling aan het lichaamsgedeelte toegevoegd om het er beter uit te laten zien.

Ik besloot een klein, licht CSS-verloop voor de achtergrond toe te voegen. Als de browser geen CSS-gradiënten ondersteunt (dit geldt vooral voor IE 8 en 9), wordt de achtergrondkleur teruggeschakeld naar het standaardblauw (de achtergrondkleur van de hoofdsectie).

Ik gebruik HTML-aanwijshints met ankertags, maar je kunt klassen toewijzen aan andere inline-elementen, zoals een strong tag of span . Hieronder staat div inhoud houder:

• Tooltip onderaan
• Tooltip links

  Ik heb twee klassen aan de links toegewezen. De klasse tooltip is verantwoordelijk voor de tekst van de tooltip, en de tweede klasse bepaalt de plaatsing ervan.

  U kunt ook het aangepaste data-attribuut zien, dat de tekst van onze HTML-tooltip bevat.

  De tooltip-klasse maken

  Hieronder vindt u de code voor de tooltip-klasse:

  Tooltip ( positie: relatief; ) .tooltip:after ( positie: absoluut; opvulling: 8px; rand: 3px effen #fff; randradius: 8px; achtergrondkleur: #1FDA9A; lettergrootte: .9em; lettergrootte : vet; kleur: #fff; inhoud: attr(data-tooltip); zichtbaarheid: verborgen; .tooltip:hover:after (dekking: 1; zichtbaarheid: zichtbaar; )

  De HTML-hover-tooltip zelf is een pseudo-element :after en is absoluut gepositioneerd. Daarom is het noodzakelijk om een ​​relatieve positie aan het ankerelement toe te kennen. Ik heb een aantal basisstijlen toegevoegd, zoals opvulling, rand, lettergrootte en breedte. Laten we de inhoudseigenschap eens nader bekijken.

  Het bevat attr() - een waarde die onze aangepaste gegevens-tooltip opslaat en deze gebruikt om de tekst van de tooltip zelf weer te geven. U kunt elke andere naam gebruiken in plaats van data-tooltip, zorg er wel voor dat deze begint met data- . Meer informatie over deze kenmerken vindt u hier.

  De tekst van de tooltip heeft een minimale breedte van 80 pixels. Als u wilt dat de tooltip-inhoud zich over één regel uitstrekt, voegt u een waarde voor de eigenschap width toe aan max-content , namelijk op dit moment geplaatst in de reacties. Opgemerkt moet worden dat dit experimentele functie dus u moet de leveranciersvoorvoegsels -webkit- en -moz- gebruiken.

  Om de HTML-zweefknopinfo een dia-animatie-effect te geven, gebruiken we de transition-eigenschap. Let op de waarde .25s, die de vertraging specificeert voordat de tooltip wordt weergegeven of verborgen. Het wordt dus niet weergegeven als u per ongeluk over de tekst beweegt, maar alleen als u over meer tekst beweegt voor een lange tijd. Ik heb ook de dekking op 0 gezet en de zichtbaarheid op verborgen. We kunnen display: geen; , omdat het element volledig zal verdwijnen en we geen overgangseffecten zullen zien. De dekking en zichtbaarheid veranderen wanneer u met de muisaanwijzer over een element beweegt.

  Resultaat:

  Kijk

  Opmerking: ik heb een deel van de opmaak en stijl in de demo op CodePen gewijzigd/verwijderd. Bekijk de demo aan het einde van dit artikel om het eindresultaat te zien.

  Beweging toevoegen

  Nu we de HTML-tooltip hebben geïmplementeerd die verschijnt/verdwijnt bij het aanwijzen van de muis, gaan we deze verplaatsen. We hebben de animatie-eigenschap al toegewezen, het enige wat we moeten doen is de startpositie instellen waar deze moet verschijnen en de eindpositie:

  /*Initiële positie van de tooltip*/ .tooltip-top:after ( onder: 150%; links: 0; ) .tooltip-bottom:after ( boven: 155%; links: 0; ) .tooltip-left:after ( rechts: 130%; minimale breedte: 100px; ) .tooltip-right:after (links: 130%; minimale breedte: 100px; ) /*Tip-eindpositie*/ .tooltip-top:hover:after (onder: 120%; ) .tooltip-onder:hover:na ( boven: 125%; ) .tooltip-links:hover:na ( rechts: 110%; ) .tooltip-rechts:hover:na ( links: 110%; )

  Ik besloot deze functionaliteit toe te voegen extra lessen. Dus als u bijvoorbeeld de klasse .tooltip-left toewijst, verschijnt de tooltip links van de tekst, als u .tooltip-top toevoegt, verschijnt de tooltip bovenaan, enz.

  Bekijk de demo

  In deze demo gebruik ik de klasse .tooltip-right. U kunt experimenteren en verschillende klassen gebruiken om verschillende HTML-tooltipposities te definiëren.

  Een driehoek creëren

  Het laatste element van de tooltip is een kleine driehoek aan één kant van het blok. We zullen het maken met behulp van de :before pseudo-klasse (de :after pseudo-klasse wordt al gebruikt voor de tooltip zelf). We wijzen het toe aan onze vier positieklassen, zodat voor elk van hen de driehoek dienovereenkomstig wordt uitgevoerd:

  /** * Driehoeken */ .tooltip-top:before, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:before ( inhoud: ""; weergave: blok; positie: absoluut; border- breedte: 7px; randkleur: rgba(0, 0, 0, 0); overgang: alle .2s gemak-in-uit .25s; left:hover:before, .tooltip-right:hover:before ( dekking: 1; zichtbaarheid: zichtbaar; )

  We creëren een driehoek door een breedte aan de rand te geven als het element zelf geen breedte of hoogte heeft. In dit geval wordt de randbreedte ingesteld op 7 pixels. De framekleur is volledig transparant, wat erg belangrijk is. In het volgende codefragment wijs ik een kleur toe aan de overeenkomstige zijde van het frame, waardoor ik de vorm van de driehoek kan definiëren.

  De rest van de stijl lijkt op wat we hebben gedaan voor de HTML-knopinfo-tekst. We hebben dezelfde overgangen, de positie is absoluut, de dekking is ingesteld op 0 en de zichtbaarheid is verborgen:

  /*Startpositie van de driehoek*/ .tooltip-top:before ( top: -51%; left: 50%; transform: translateX(-50%); border-top-color: #fff; ) .tooltip-bottom :before ( onder: -56%; links: 50%; transformeren: translateX(-50%); rand-onder-kleur: #fff; ) .tooltip-left:before ( links: -31%; boven: 15% ; rand-links-kleur: #fff; ) .tooltip-right:before ( rechts: -31%; boven: 15%; rand-rechts-kleur: #fff; ) /* Eindpositie van de driehoek */ .tooltip -top:hover :before ( boven: -21%; ) .tooltip-bottom:hover:before ( onder: -26%; ) .tooltip-left:hover:before ( links: -11%; ) .tooltip-right :hover:voor ( rechts: -11%; )

  Om de driehoek op dezelfde manier te laten bewegen als de tooltip, moet u een begin- en eindpositie toewijzen.

  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 in pure CSS, ontdekte 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.

  Oplossing De methode die ik u aanbied is vrij eenvoudig en effectief. Werkt in alle browsers, zelfs IE 6 (vaak door mij getest). Gemakkelijk te veranderen en handig. Maakt de code niet rommelig en maakt het duidelijk. Het kan eenvoudig worden gewijzigd om aan uw behoeften te voldoen. Vertraag bijvoorbeeld de weergave van tooltip met behulp van setTimeout of iets anders. HTML Stel dat we een HTML-pagina hebben met een link, als we er met de muis overheen gaan, moeten we een tooltip weergeven:
  Tooltips-link
  Zoals je misschien al hebt opgemerkt aan de hand van de lijst, gebruik ik de LESS css-preprocessor.
  Wij hebben aangesloten aparte bestanden CSS-stijlen en -scripts. We hebben ook een link en div blok, wat de container voor de tooltip zal zijn.
  De HTML5-specificatie staat het gebruik van aangepaste attributen van het data-atribute-type toe, die bepaalde informatie over een element of blok kunnen opslaan. Het is in de data-attributen dat we de tekst van de tooltips zullen opslaan.
  Link
  Voor opslag gebruik ik het data-tooltip attribuut.
  We zijn klaar met HTML - we kunnen verder gaan met stijlen. CSS. Ik gebruik de LESS Elements-bibliotheek en raad deze aan iedereen aan, dus ik zal een aantal eigenschappen schrijven met behulp van dit raamwerk.
  @import "css/elements.less"; #tooltip ( z-index: 9999; positie: absoluut; weergave: geen; top:0px; links:0px; achtergrondkleur: #000; opvulling: 5px 10px 5px 10px; kleur: wit; .opacity(0.5); . afgerond(5px)
  Uit de lijst is het duidelijk dat we in de eerste regel LE verbinden, het blok instellen op div#tooltip absolute positionering en verberg het. Vervolgens plaatsen we het blok achtergrondkleur en de tekstkleur, maak de hoeken afgerond (5px) en stel de transparantiewaarde in op 50%. Nou, nu het meest interessante deel: jQuery.
  $.jQuery(document).ready(function() ( $("").mousemove(functie (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "top" : eventObject.pageY + 5, "left": eventObject.pageX + 5 )) .show()).mouseout(function () ( $("#tooltip ").hide() .text("") .css(( "top" : 0, "left" : 0 )); )); ));// Klaar einde.
  Nu voegen we aan de selectie alle elementen toe met het data-tooltip attribuut en wanneer we erover bewegen vereist onderdeel met behulp van de muis krijgen we de tooltipwaarde en slaan deze op in een variabele. Voeg vervolgens de tooltip-tekst toe aan het #tooltip-blok, geef het de cursorcoördinaten vanaf de rand van de pagina + 5 px en geef ten slotte het blok met de tooltip weer op de juiste plaats. Nadat de muis het element heeft verlaten, verbergen we het #tooltip-blok, wissen we de inhoud ervan en zetten we het terug naar 0;0;.

  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!

  Van de auteur: Hallo. Een tooltip is een kleine verklarende tekst die verschijnt als u met de muis over een element beweegt, meestal een afbeelding. Vandaag bekijken we hoe je op verschillende manieren een tooltip in HTML kunt maken.

  Standaard tip

  Standaard is het title-attribuut verantwoordelijk voor het weergeven van verklarende tekst. Het kan worden gespecificeerd verschillende elementen, maar worden meestal alleen gebruikt voor afbeeldingen om uit te leggen wat ze laten zien.

  In een van de vorige artikelen heb ik een afbeelding van een tijger gebruikt om het werken met afbeeldingsformaten te laten zien. Als je het niet erg vindt, zal ik deze afbeelding opnieuw gebruiken. Om een ​​hint weer te geven, hoeft u dus alleen maar het titelattribuut toe te voegen en de gewenste tekst erin te schrijven.

  

  < img src = "tiger.jpg" title = "Het is een tijger" >

  Er kan één woord zijn, maar ook meerdere zinnen. En dit is hoe het eruit ziet:

  

  De hint verschijnt soepel, niet onmiddellijk na het zweven, maar na enige tijd. Dit is het standaardgedrag.

  Het grootste probleem met een dergelijke tooltip is dat deze niet gestileerd kan worden. Hoe te beslissen dit probleem? We zullen op andere manieren een hint moeten geven. Nu zal ik je er een paar laten zien.

  Pure CSS-methode

  Erg interessante manier, waarmee u tooltip voor een afbeelding prachtig kunt weergeven. De HTML-opmaak is eenvoudig, alleen de afbeelding hoeft in een blokcontainer te worden ingesloten, waaraan we een ID zullen toewijzen zodat we er later in stijlen naar kunnen verwijzen:

  

  < div id = "tiger" data - name = "Суматранский тигр" > < img src = "tiger.jpg" > < / div >

  Het enige dat hier misschien onduidelijk voor u is, is het data-name attribuut. Het punt is dat dit een zogenaamd data-attribuut is dat op zichzelf niets doet, maar de waarde ervan kan worden gebruikt in css en javascript, wat het in sommige gevallen nuttig maakt. Je zult dit hierna zien.

  Laten we eerst de stijlen voor de container beschrijven. We hebben relatieve positionering nodig omdat we het blok met verklarende tekst absoluut zullen positioneren, zodat de positionering relatief ten opzichte van het bovenliggende blok plaatsvindt, en niet de hele pagina.

  #tiger(positie: relatief; weergave: inline-blok; )

  #tijger( positie: relatief; weergave: inline - blok;

  Blokregelweergave voorkomt dat het blok (en daarmee het blok met de tooltip die we gaan maken) zich over de gehele breedte van het venster uitstrekt. Het enige dat overblijft is het creëren van de hint zelf. In CSS is het erg handig om dit met pseudo-elementen te doen. Zoals dit:

  #tiger:hover:after ( inhoud: attr(gegevensnaam); positie: absoluut; links: 0; onder: 0; achtergrond: rgba(5,13,156,.55); kleur: #fff; tekstuitlijning: midden ; lettertypefamilie: cursief; lettergrootte: 14px; breedte: 100% )

  #tiger:hover:na ( inhoud: attr (gegevensnaam); positie: absoluut; links: 0; bodem: 0; achtergrond: rgba(5, 13, 156, . 55); kleur: #fff; tekst uitlijnen: centreren; lettertypefamilie: cursief; lettergrootte: 14px; opvulling: 3px 0; breedte: 100%;

  Er is veel code, maar er is hier niets ingewikkelds. De #tiger:hover:after selector betekent het volgende: wanneer we over een blok met een afbeelding zweven, moeten we een after pseudo-element maken (en verder in krullende beugels regels staan ​​vermeld). De eigenschap content: attr(data-name) specificeert tekst waarde blok. Het zal gelijk zijn aan wat er geschreven staat in het data-name attribuut van het afbeeldingswrapperblok.

  

  Deze tooltip verschijnt wanneer u over de afbeelding zweeft, maar in tegenstelling tot de standaardtooltip gebeurt dit abrupt, en de weergave zelf vindt onmiddellijk plaats op het moment dat u met de muis over de afbeelding zweeft. Glad uiterlijk in in dit geval het zal niet mogelijk zijn om te implementeren, vanwege pseudo-elementen vloeiende overgangen worden niet ondersteund.

  Methode 2. Puur CSS en gladde uitstraling

  Door de code echter een beetje te herschrijven, kunt u een soepele weergave van de tooltip bereiken, en nogmaals, zonder javascript te gebruiken.

  Om zelf de twee effecten te zien die ik je hierna zal laten zien, raad ik aan om Kladblok of iets anders te openen handige editor codeer en herhaal alles na mij. Toegegeven, hiervoor moet je nog steeds een stijlbestand toevoegen, hoewel stijlen ook in html in tags kunnen worden geschreven

  De code voor dit voorbeeld zal dus een beetje anders zijn, en dat komt omdat we geen pseudo-element zullen gebruiken. Het was dankzij hem dat het onmogelijk was om te solliciteren soepele veranderingen. Deze keer ziet de code er als volgt uit:

  Sumatraanse tijger

  < div id = "tiger2" > < img src = "tiger.jpg" > < div class = "text" >Sumatraanse tijger< / div > < / div >

  De CSS-code heeft geen grote veranderingen ondergaan:

  #tiger2( positie: relatief; weergave: inline-block; ) #tiger2 .text ( overgang: alles 0,6s; dekking: 0; positie: absoluut; links: 0; onder: 0; achtergrond: rgba(5,13,156,. 55); kleur: #fff; lettertypefamilie: cursief; opvulling: 3px 0; transformatie: schaal (dekking: 1; )

  #tijger2( positie: relatief; weergave: inline - blok; #tiger2.text ( overgang: alle 0,6s; transformeren:schaal(0); #tiger2:hover.text( dekking: 1;

  We verwijderen alleen de eigenschap content, omdat deze alleen door pseudo-elementen wordt ondersteund. We voegen de eigenschap transition toe, die vloeiende statusovergangen creëert. Welnu, dekking: 0 geeft ons tooltipblok volledige transparantie, zodat het niet zichtbaar is op de pagina.

  Wanneer u over een blok beweegt, is het nu voldoende om de normale transparantie van het blok terug te geven met een tooltip. Klaar. U kunt controleren of het element er vloeiend uitziet.

  Met css3 kun je een element op een andere manier verbergen. Met behulp van transformaties bijvoorbeeld. Vervang volledige transparantie door deze eigenschap: transform: scale(0) en de blokgrootte wordt teruggebracht tot nul, zodat deze eenvoudigweg niet op het scherm te zien is. Wanneer u over het blok met de afbeelding zweeft, moet u terugkeren normale maat zoals dit: transform: scale(1). In dit geval ziet het uiterlijkeffect er nog mooier uit. Je kunt dit zelf zien.

  Zoals je kunt zien, kan de tooltip op css ook langzaam verschijnen prachtige effecten.

  Andere manieren

  jQuery kan u nog meer mogelijkheden bieden. Met behulp van deze bibliotheek kunt u zelf code schrijven om een ​​hint weer te geven, of een plug-in zoeken die dit al implementeert.

  Bijvoorbeeld, binnen Bootstrap-framework Er zijn ook veel kant-en-klare componenten, en een daarvan is slechts tooltips. U kunt in de documentatie van het raamwerk zoeken naar codevoorbeelden waarmee u dezelfde hints kunt maken en gebruiken. Het is niet nodig om de hele Bootstrap aan te sluiten; u kunt over het algemeen alleen een onderdeel als tooltips achterlaten, alleen dat downloaden en verbinden.

  Over het algemeen heb ik je vandaag manieren laten zien in CSS om een ​​mooie tooltip te maken met een scherp en vloeiend uiterlijk; bovendien heb je Bootstrap en jQuery in je arsenaal. Kies wat dan ook en implementeer interessante en mooie tips op uw sites!

  In dit artikel wil ik verschillende opties bespreken om een ​​dergelijke functie in elke lay-out te organiseren. Ik heb trouwens al een levend voorbeeld van een dergelijke implementatie op mijn website staan. Als je naar beneden scrollt naar de reacties op deze pagina en over de datum van de reactie beweegt, wordt meteen duidelijk wat er precies gezegd wordt. Nou, als er nog geen reacties zijn, kun je er tegelijkertijd een achterlaten.

  Ik zie twee hoofdmethoden voor het implementeren van tooltip: deze is tijdens het zweven, wat ook het populairst is, en de minder populaire wanneer je op een element klikt. Laten we natuurlijk beginnen met het verschijnen van een tooltip wanneer u over een element beweegt.

  In dit artikel dacht ik dat ik met het meest primitieve zou beginnen, namelijk een hint weergeven met title , die op geen enkele manier kan worden opgemaakt, maar ik denk dat je dit kunt overslaan, omdat het al duidelijk is. Als het bovenstaande je niet helemaal duidelijk is, denk ik dat na het bestuderen van de video alles veel duidelijker zal worden.

  Een eenvoudige manier met ontwerp, tijdens het zweven.

  Het is niet ingewikkelder dan de methode die ik heb gemist. Alleen in plaats van titel attribuut Ik zal data-titel en ontwerp gebruiken CSS-stijlen. Eigenlijk geef ik hieronder de html-code:

  ?

  /* We gebruiken het pseudo-element after om de balk zelf te ontwerpen, maar tegelijkertijd verbergen we het, omdat het alleen zou moeten verschijnen bij hover */ .hover:after (content: attr(data-title); display: none ;positie: absoluut; onderaan: 130%; achtergrondkleur: #fff; opvulling: 5px; box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;) / * Voeg een eigenschap toe zodat wanneer u over een element beweegt, er een hintvak verschijnt */ .hover:hover:after(display: block;)

  Hier wil ik uw aandacht vestigen op het feit dat dit slechts een voorbeeld is van ontwerpeigenschappen. Je kunt natuurlijk ontwerpen verschijning sterft, zoals je wilt.

  Tooltip bij zweven.

  Dit is waarschijnlijk het meeste populaire manier uitvoering van deze mogelijkheid. Door ten minste Ik gebruik het het vaakst.

  ?

  dit is een ontwerptip IN in dit voorbeeld

  Ik zie ook niets bijzonders, maar meer, maar het resultaat zal beter zijn, zelfs zonder het data-title attribuut te gebruiken. De container dient in dit geval als verpakking voor onze elementen die zullen worden gebruikt om de tooltip te implementeren. En ook de matrijs zelf zal ten opzichte van de container worden gepositioneerd. /* set relatieve positionering container */ .block(positie:relatief;) /* Ontwerp verborgen element

  standaard */ .hidden (weergave: geen; positie: absoluut; onder: 130%; links: 0px; achtergrondkleur: #fff; kleur: #3aaeda; opvulling: 5px; tekstuitlijning: midden; -moz-box - schaduw: 0 1px 1px rgba(0,0,0,.16); -webkit-box-schaduw: 0 1px 1px rgba(0,0,0,.16); 0,0,.16); lettergrootte: 12px;) /* Extra decoratie voor het verborgen element (optioneel) */ .hover + .hidden:before (inhoud: " "; positie: absoluut; top: 98%; links: 10%; marge-links: -5px; randstijl: effen: 0; rand-rechts: 7px effen: #fff transparant transparant z-index: 2;) /* Extra decoratie voor het verborgen element (optioneel ) */ .hover + .hidden:after (inhoud: " "; positie: absoluut; boven: 100%; links: 10% ; marge-links: -5px; randstijl: effen; breedte: 0; rand-rechts : 7px effen ,0,0,.16) transparant transparant transparant; z-index: 1;) /* Weergave van een verborgen element bij hover */ .hover:hover + .hidden(display: block;)

  Deze twee opties kunnen op uw website worden gebruikt om tooltip weer te geven wanneer u met de cursor beweegt.

  Er zijn nog twee methoden, maar deze zijn vrijwel identiek, behalve dat het element verschijnt wanneer u op een element klikt dat altijd op de site wordt weergegeven.

  Een eenvoudige manier met registratie, op klik. Bij een klik ziet de code er precies hetzelfde uit. Het enige is dat ik voor het gemak de klasse van sommige elementen heb vervangen. De focus pseudo-klasse wordt ook gebruikt in plaats van hover . Het is ook de moeite waard om hier op te merken dat in volgorde deze methode

  ?

  werkt, moet u het vervangen door , dat wil zeggen door een hyperlink. De CSS-code is in dit geval vergelijkbaar met het uiterlijk van een blok tijdens het zweven; voor het gemak worden alleen andere klassen gebruikt. En voor juiste werking

  /* We gebruiken de after pseudo-klasse om de spot zelf te ontwerpen, maar tegelijkertijd verbergen we deze, omdat deze alleen zou moeten verschijnen als erop wordt geklikt */ .focus:after (content: attr(data-title); display: none ; positie: absoluut; onderaan: 130% links: 0px; achtergrondkleur: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;) / * Voeg een eigenschap toe zodat wanneer u op een element klikt, er een hintvenster verschijnt */ .focus:focus:after(display: block;)

  Zoals u kunt zien, is er vrijwel geen verschil.

  Tooltip wanneer erop wordt geklikt.

  Deze klikmethode is ook relevanter als u de tooltip iets beter wilt opmaken dan mogelijk was in de vorige optie.

  ?

  En het daadwerkelijke ontwerp van de dobbelsteen:

  /* relatieve positionering ten opzichte van de container instellen */ .block(position:relative;) /* Ontwerp het verborgen element standaard */ .hidden (display: none; position: absolute; bottom: 130%; left: 0px; background- kleur: # fff; kleur: #3aaeda; midden; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -shadow: 0 1px 1px rgba(0,0,0,.16); lettergrootte: 12px;) /* Extra decoratie voor het verborgen element (optioneel) */ .focus + .hidden:before (inhoud: " " positie: absoluut; boven: 98%; links: 10%; randbreedte: 5px; randhoogte: 0; rechts: 7px effen #fff; randkleur: #fff transparant transparant; z-index: 2;) /* Extra decoratie voor het verborgen element (optioneel) */ .focus + .hidden :after (inhoud: " "; positie : absoluut; boven: 100%; links: 10%; marge-links: -5px; randstijl: effen; rand: 7px effen transparant; rand-rechts: 7px effen #fff; randkleur: rgba(0,0,0,.16) transparant transparant transparant; z-index: 1;) /* Weergave van een verborgen element wanneer erop wordt geklikt */ .focus:focus + .hidden(display: block;)

  Zoals je kunt zien, is er niets ingewikkelds. Bovendien kunt u statuswijzigingen zowel door aanwijzen als door klikken organiseren. Hoewel ik eerlijk gezegd niet kan zeggen hoe relevant de click-to-click-methode is.

  Er is ook een imitatie van het laatste voorbeeld met behulp van , maar het gebruik ervan lijkt mij niet helemaal correct specifiek voor het organiseren van een tooltip op uw website. Als u het absoluut niet met mij eens bent, welkom bij de opmerkingen.

  Videoles - Tooltip zonder scripts.

  Dat is alles voor mij. Veel succes iedereen.