{"id":257287,"date":"2022-12-23T11:14:00","date_gmt":"2022-12-23T08:14:00","guid":{"rendered":"https:\/\/inform.click\/opprette-et-verktoytips-ved-hjelp-av-css\/"},"modified":"2022-12-23T11:34:00","modified_gmt":"2022-12-23T08:34:00","slug":"opprette-et-verktoytips-ved-hjelp-av-css","status":"publish","type":"post","link":"https:\/\/inform.click\/no\/opprette-et-verktoytips-ved-hjelp-av-css\/","title":{"rendered":"Opprette et verkt\u00f8ytips ved hjelp av CSS"},"content":{"rendered":"

\n Du vet sikkert allerede hva et verkt\u00f8ytips er.\n<\/p>\n

\n Et verkt\u00f8ytips er et ikon eller en tekst, som n\u00e5r du holder musepekeren over, gir oss mer informasjon i en boble eller popup-vindu.\n<\/p>\n

\n Du finner vanligvis verkt\u00f8ytips i skjemaer, men du kan plassere dem der brukerne trenger mer informasjon.\n<\/p>\n

\n I bildet ovenfor viser sirkelen med sp\u00f8rsm\u00e5lstegnet inni et verkt\u00f8ytips<\/strong>. N\u00e5r du holder musepekeren over, gir dette verkt\u00f8ytipset mer informasjon om hvilke typer tegn passordet ditt m\u00e5 inneholde.\n<\/p>\n

\n Du kan f\u00e5 rammeverk for \u00e5 implementere verkt\u00f8ytips p\u00e5 nettstedet ditt, men mesteparten av tiden bruker disse rammeverkene JavaScript for \u00e5 oppn\u00e5 dette.\n<\/p>\n

\n I denne artikkelen vil vi l\u00e6re hvordan du lager verkt\u00f8ytips ved \u00e5 bruke bare CSS<\/strong> p\u00e5 en relativt enkel m\u00e5te.\n<\/p>\n

\n F\u00f8r vi begynner, er den endelige HTML- og CSS-filen for implementering av verkt\u00f8ytips tilgjengelig p\u00e5 slutten av denne bloggen<\/strong>. Vi har beskrevet i detalj hvert eneste element som brukes i HTML og CSS for \u00e5 implementere verkt\u00f8ytips p\u00e5 enklest mulig m\u00e5te.\n<\/p>\n

\n Du vil kunne implementere verkt\u00f8ytips-funksjonen p\u00e5 et hvilket som helst nettsted ved \u00e5 bruke bare HTML og CSS, etter \u00e5 ha g\u00e5tt gjennom denne artikkelen.\n<\/p>\n

\n S\u00e5 la oss begynne…\n<\/p>\n

\n Vi begynner med \u00e5 lage en enkel HTML-side som ber om passord.\n<\/p>\n

\n Trinn 1: Opprette en enkel HTML-side for \u00e5 vise verkt\u00f8ytips
\n<\/h5>\n

\n Her er den grunnleggende HTML-koden for skjemasiden<\/strong> ,\n<\/p>\n

\n\n\n<\/code><\/pre>\n
<\/p>\n
\n<\/pre>\n
<br \/>\n  Awesome CSS Tooltip<br \/>\n<\/title><\/p>\n<pre>\n<\/pre>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<pre>\n\n\n<\/pre>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\">?<\/span><\/code><br \/>\n<\/form>\n<pre> \n\n<\/pre>\n<p>\n  <code>Som du kan se, har vi koblet v\u00e5r \" <strong>style.css<\/strong> \"-fil i html-en ovenfor.<\/code>\n<\/p>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<p>\n  <code>Vi lager verkt\u00f8ytipset ved \u00e5 bruke denne CSS-filen.<\/code>\n<\/p>\n<p>\n  <code>Vi bruker et <strong>enkelt skjema<\/strong> for \u00e5 pr\u00f8ve verkt\u00f8ytips-funksjonen. Dette skjemaet har bare ett felt merket som \" <strong>Passord<\/strong> \" da vi bare bruker det for \u00e5 illustrere hvordan verkt\u00f8ytipsene fungerer.<\/code>\n<\/p>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><br \/>\n<\/form>\n<pre> <\/pre>\n<p>\n  <code>Vi har brukt klassen \" <strong>verkt\u00f8ytips<\/strong> \" for \u00e5 implementere verkt\u00f8ytipsfunksjonen ved hjelp av CSS. Dette vil vi diskutere neste avsnitt.<\/code>\n<\/p>\n<h5>\n  <code>Trinn 2: Grunnleggende CSS-stiler for HTML-siden v\u00e5r<\/code><br \/>\n<\/h5>\n<p>\n  <code>F\u00f8r vi lager CSS for \"verkt\u00f8ytips\", m\u00e5 vi lage noen <strong>grunnleggende CSS-stiler for html-siden v\u00e5r<\/strong>.<\/code>\n<\/p>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}<\/code><\/code><\/pre>\n<p>\n  Dette vil gi en html-side med fin gr\u00f8nn bakgrunn. Vi har ogs\u00e5 valgt verdana font og skriftfarge som hvit.\n<\/p>\n<pre><code>form{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}<\/code><\/pre>\n<p>\n  Vi har plassert skjemaet «relativt», med en maksimal bredde p\u00e5 600 piksler og en margin p\u00e5 20 %.\n<\/p>\n<pre><code>Formlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}<\/code><\/pre>\n<p>\n  Form label class er for \u00e5 spesifisere skriftst\u00f8rrelse og bokstavavstand for etikettteksten som vi skal bruke.\n<\/p>\n<pre><code>forminput{\nmargin: 0 10px;\npadding: 8px 8px 6px;\nfont-size: 20px;\nborder: 0;\ncolor: #444;\n}<\/code><\/pre>\n<p>\n  Her har vi stilene for skjemafeltet. Det er ikke noe komplisert med denne stilen. Vi har gitt en <strong>passende margin<\/strong> og <strong>utfylling<\/strong> sammen med <strong>spesifikasjon av skriftst\u00f8rrelse<\/strong> og <strong>farge<\/strong> for skjemafelt.\n<\/p>\n<p>\n  S\u00e5 det er v\u00e5re standard css-stiler for skjemasiden v\u00e5r, som vi skal bruke for \u00e5 demonstrere hvordan du implementerer verkt\u00f8ytipsfunksjonen ved hjelp av CSS.\n<\/p>\n<h3>\n  La oss lage verkt\u00f8ytips ved hjelp av CSS<br \/>\n<\/h3>\n<h5>\n  Trinn 4: CSS-stil for verkt\u00f8ytips<br \/>\n<\/h5>\n<p>\n  Du har kanskje lagt merke til at vi har brukt klassen » <strong>verkt\u00f8ytips<\/strong> » i html-filen v\u00e5r. Dette er stilen vi skal bruke for sp\u00f8rsm\u00e5lstegnet («?») som vil fungere som v\u00e5rt verkt\u00f8ytips.\n<\/p>\n<pre><code>.tooltip{\nposition: relative;\nbackground: rgba(0,0,0,0.3);\npadding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;\ncursor: help;\n}<\/code><\/pre>\n<p>\n  Vi m\u00e5 f\u00f8rst plassere verkt\u00f8ytipset relativt ved \u00e5 bruke » <strong>posisjon: relativ;<\/strong> » stil. \u00c5rsaken til relativ posisjonering av verkt\u00f8ytipset er at vi vil bruke <strong>pseudoelementer<\/strong> senere i denne metoden som kan «Absolutt» posisjoneres. S\u00e5 vi vil ha disse pseudoklassene «absolutt» plassert i forhold til dette elementet.\n<\/p>\n<p>\n  Deretter gir vi en <strong>svart bakgrunnsfarge<\/strong> for verkt\u00f8ytipset ved \u00e5 bruke rgba()-metoden,\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  der r,g,b st\u00e5r for r\u00f8d, gr\u00f8nn og bl\u00e5 og a st\u00e5r for ‘ <strong>alfa<\/strong> ‘ som <strong>kontrollerer opasiteten<\/strong>.\n<\/p>\n<p>\n  Vi vil gi en svart bakgrunn til verkt\u00f8ytipssirkelen v\u00e5r og redusere opasiteten til 0,3 for \u00e5 f\u00e5 den til \u00e5 ligne en <strong>m\u00f8rkegr\u00f8nn farge<\/strong>.\n<\/p>\n<p>\n  Deretter skal vi bruke noen grunnleggende utfyllings- og kantradiusstiler p\u00e5 sp\u00f8rsm\u00e5lstegnet («?») for \u00e5 f\u00e5 verkt\u00f8ytipset v\u00e5rt til \u00e5 se bra ut.\n<\/p>\n<pre><code>padding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;<\/code><\/pre>\n<p>\n  Med CSS ovenfor bruker vi polstring p\u00e5 sirkelen som omslutter «?», og gj\u00f8r kantradiusen til 100 % for \u00e5 gj\u00f8re den til en hel sirkel.\n<\/p>\n<p>\n  Skriftst\u00f8rrelse bestemmer st\u00f8rrelsen p\u00e5 «?» tegn, som vi bruker som verkt\u00f8ytips i dette eksemplet.\n<\/p>\n<p>\n  Vi legger ogs\u00e5 til » <strong>cursor:help;<\/strong> » i CSS, vil dette gi et sp\u00f8rsm\u00e5lstegn under musepekeren n\u00e5r du holder musepekeren over det elementet, som vist p\u00e5 bildet nedenfor.\n<\/p>\n<p>\n  Toot-tipset inneholder noe innhold (i dette eksemplet gir vi mer informasjon om tegnene som skal inkluderes i «passord»-feltet).\n<\/p>\n<h5>\n  Trinn 5: Gi innholdet for verkt\u00f8ytips i HTML<br \/>\n<\/h5>\n<p>\n  Neste utfordring foran oss er, hvor skal du plassere dette innholdet i verkt\u00f8ytipset?\n<\/p>\n<p>\n  For \u00e5 utf\u00f8re denne oppgaven skal vi legge til et <strong>attributt<\/strong> i HTML-filen vi laget f\u00f8r.\n<\/p>\n<pre><code><span class=\"tooltip\">?<\/span><\/code><\/pre>\n<p>\n  Her \u00f8nsker vi ikke \u00e5 legge til noen ekstra markering, som \u00e5 lage et annet spenn for \u00e5 legge til innholdet i verkt\u00f8ytipset.\n<\/p>\n<p>\n  Vi kan inkludere innholdet for verkt\u00f8ytips innenfor dette spennet.\n<\/p>\n<p>\n  Vi skal gj\u00f8re dette ved \u00e5 legge til et » <strong>data<\/strong> «-attributt. Dataattributtnavnet her kommer til \u00e5 v\u00e6re » <strong>verkt\u00f8ytips<\/strong> «.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"\">?<\/span><\/code><\/pre>\n<p>\n  <strong>data-tooltip<\/strong> er dataattributtet v\u00e5rt som vi legger til innholdet som skal vises inne i verkt\u00f8ytipset.\n<\/p>\n<p>\n  Deretter skal vi legge til instruksjonene om tegnet som skal v\u00e6re til stede i passordet, inne i dataverkt\u00f8ytipsattributtet v\u00e5rt.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><\/pre>\n<p>\n  N\u00e5 har vi <strong>lagt til teksten<\/strong> som skal vises inne i verkt\u00f8ytipset. Deretter skal vi l\u00e6re hvordan du <strong>f\u00e5r denne teksten til \u00e5 vises inne i verkt\u00f8ytipset<\/strong> n\u00e5r brukere holder musepekeren over sp\u00f8rsm\u00e5lstegnet.\n<\/p>\n<h5>\n  Trinn 6: Opprette verkt\u00f8ytipsbeholder ved hjelp av pseudoelementer<br \/>\n<\/h5>\n<p>\n  F\u00f8rst m\u00e5 vi lage beholderne der innholdet i verkt\u00f8ytipset skal vises.\n<\/p>\n<p>\n  For \u00e5 gj\u00f8re dette, la oss g\u00e5 tilbake til style.css-filen og lage <strong>pseudo-elementer<\/strong> for <strong>.tooltip-<\/strong> klassen.\n<\/p>\n<p>\n  Vi skal lage <strong>::etter<\/strong> og <strong>::before<\/strong> pseudo-klasser for \u00e5 f\u00e5 innholdet i verkt\u00f8ytipset v\u00e5rt til \u00e5 vises.\n<\/p>\n<p>\n  I utgangspunktet, ved \u00e5 bruke en pseudoklasse som » <strong>::etter<\/strong> » kan du m\u00e5lrette mot en posisjon like etter elementet som bruker hovedklassen og style den posisjonen.\n<\/p>\n<p>\n  P\u00e5 samme m\u00e5te, ved \u00e5 bruke pseudoklassen ::before kan du style posisjonen rett f\u00f8r elementet der hovedklassen brukes (i dette tilfellet er «?» er det elementet).\n<\/p>\n<p>\n  Det er en veldig nyttig pseudoklasse for \u00e5 injisere ekstra innhold p\u00e5 en side.\n<\/p>\n<p>\n  Vi vil lage en pseudoklasse for «tootlip» som vist nedenfor.\n<\/p>\n<pre><code>.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\n}<\/code><\/pre>\n<p>\n  Vi lager en felles klasse for ::f\u00f8r- og ::etter-stiler.\n<\/p>\n<p>\n  Her har vi <strong>absolutt plassert<\/strong> b\u00e5de ::f\u00f8r og ::etter stiler, fordi vi vil at de skal plasseres over ‘sp\u00f8rsm\u00e5lstegnet' og vi vil at de skal v\u00e6re sentrert over «?».\n<\/p>\n<p>\n  For \u00e5 gj\u00f8re verkt\u00f8ytipset sentrert over «?» vi m\u00e5 bruke » <strong>left:50%;<\/strong> » Egenskap.\n<\/p>\n<p>\n  N\u00e5 skal vi bruke <strong>::before<\/strong> til \u00e5 style den lille trekanten nederst p\u00e5 verkt\u00f8ytipset v\u00e5rt.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-63845098b3ae1.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-63845098b3ae1.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  :: <strong>etter<\/strong> brukes til \u00e5 style innholdet inne i verkt\u00f8ytipset.\n<\/p>\n<p>\n  La oss se hvordan det gj\u00f8res.\n<\/p>\n<p>\n  F\u00f8rst skal vi lage den lille trekanten nederst p\u00e5 verkt\u00f8ytipset.\n<\/p>\n<pre><code>.tooltip::before{\ncontent: \"\";\nborder-width: 10px 8px 08px;\nborder-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;\ntop: -20px;\nmargin-left: -8px;\n}<\/code><\/pre>\n<p>\n  Vi b\u00f8r bruke <strong>innhold:»»;<\/strong> attributt for \u00e5 vise at dette elementet ikke har noe innhold. Siden vi har injisert noe <strong>tomt innhold<\/strong>, kan vi n\u00e5 style det.\n<\/p>\n<p>\n  Vi kan <strong>lage trekanter i CSS<\/strong> ved \u00e5 bruke <strong>border-width-<\/strong> attributtet.\n<\/p>\n<p>\n  Ved denne linjen,\n<\/p>\n<p>\n  <code>border-width: 10px 8px 08px;<\/code>\n<\/p>\n<p>\n  Vi har spesifisert at kantbredden til toppen er 10 piksler, h\u00f8yre er 8 piksler, ned 0 piksler og venstre 8 piksler.\n<\/p>\n<p>\n  Dette kommer til \u00e5 skape en trekant for oss.\n<\/p>\n<p>\n  Deretter skal vi lage en <strong>solid kantlinje<\/strong> for denne delen og <strong>gj\u00f8re h\u00f8yre, bunn og venstre omr\u00e5der gjennomsiktige<\/strong>, slik at bare det \u00f8verste «trekantomr\u00e5det» vises.\n<\/p>\n<pre><code>border-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code><\/pre>\n<p>\n  Etter \u00e5 ha gjort kanten solid, bruker vi farger p\u00e5 toppen, h\u00f8yre, bunn og venstre side av kanten.\n<\/p>\n<p>\n  Vi b\u00f8r bruke samme » <strong>border-color:rgba();<\/strong> «-attributt her, som vi brukte for \u00e5 style sirkelen rundt sp\u00f8rsm\u00e5lstegnet.\n<\/p>\n<p>\n  <code>border-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code>\n<\/p>\n<p>\n  Her har vi gitt <strong>svart farge<\/strong> (0,0,0) for den <strong>\u00f8verste delen<\/strong> av kanten og <strong>redusert opasiteten til 0,3<\/strong> for \u00e5 gi oss en m\u00f8rkegr\u00f8nn farge, akkurat som vi gjorde for \u00e5 f\u00e5 stilen for sirkel rundt «?».\n<\/p>\n<p>\n  Vi gjorde de <strong>h\u00f8yre, nederste og venstre<\/strong> delene av kanten skjult ved \u00e5 gj\u00f8re den <strong>gjennomsiktige<\/strong>.\n<\/p>\n<p>\n  Selv om vi hadde laget h\u00f8yre og venstre grenser, er de gjennomsiktige. Den eneste kanten med farge er toppkanten. Hva dette vil gj\u00f8re er at den <strong>skjulte grensen til venstre og h\u00f8yre vil gi oss en trekanteffekt i forbindelse med den fargede toppkanten<\/strong>.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-6384509cdcb55.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-6384509cdcb55.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Sluttresultatet vil se slik ut.\n<\/p>\n<p>\n  Hvis du gj\u00f8r et Google-s\u00f8k etter «i», vil du l\u00e6re mer om det.\n<\/p>\n<p>\n  » <strong>Margin-venstre<\/strong> » og » <strong>topp<\/strong> «-attributter brukes til \u00e5 plassere denne trekanten sentrert over sirkelen.\n<\/p>\n<pre><code>top: -20px;\nmargin-left: -8px;<\/code><\/pre>\n<p>\n  N\u00e5 <strong>har vi laget den trekantede halen<\/strong> nederst p\u00e5 verkt\u00f8ytipset, som peker p\u00e5 «?» skilt.\n<\/p>\n<p>\n  Deretter m\u00e5 vi style det avrundede rektangelomr\u00e5det til verkt\u00f8ytipset der informasjonen vises. For dette vil vi bruke <strong>::after-<\/strong> attributtet.\n<\/p>\n<pre><code>.tooltip::after{\ncontent: \"some text\";\nbackground: rgba(0,0,0,0.3);\ntop: -20px;\ntransform: translateY(-100%);\nfont-size: 14px;\nmargin-left: -150px;\nwidth: 300px;\nborder-radius: 10px;\ncolor: #fff;\npadding: 14px;\n}<\/code><\/pre>\n<p>\n  Derfor har jeg brukt,\n<\/p>\n<p>\n  <code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  I \u00e5pningsdelen av pseudoklassen <strong>.tooltip::after<\/strong>\n<\/p>\n<p>\n  N\u00e5 m\u00e5 vi gi denne delen den <strong>samme bakgrunnsfargen<\/strong> som vi brukte for \u00e5 lage trekantomr\u00e5det (som er svart, med en alfa\/opasitet p\u00e5 0,3).\n<\/p>\n<p>\n  S\u00e5 jeg har lagt til,\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  S\u00e5 har jeg sentrert denne delen med v\u00e5rt «sp\u00f8rsm\u00e5lstegnet», som f\u00f8r. Jeg bruker en bredde p\u00e5 300 px for den avrundede rektangelboksen, og en margin p\u00e5 -150 px for \u00e5 sentrere den i forhold til sp\u00f8rsm\u00e5lstegnet.\n<\/p>\n<pre><code>top: -20px;\nwidth:300px;\nmargin-left: -150px;<\/code><\/pre>\n<p>\n  N\u00e5 vil vi gi polstring og gj\u00f8re kantene p\u00e5 rektangelet avrundede (ved \u00e5 bruke kantradius).\n<\/p>\n<pre><code>border-radius: 10px;\ncolor: #fff;\npadding: 14px;<\/code><\/pre>\n<p>\n  Dette vil ogs\u00e5 angi fargen p\u00e5 teksten inne i det avrundede rektangelet som hvit (#fff).\n<\/p>\n<p>\n  N\u00e5 er det avrundede rektangelomr\u00e5det som viser innhold klart. Men likevel er den <strong>ikke riktig plassert<\/strong>. Den gjeldende HTML-siden vil se ut som noe vist nedenfor.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a14de27.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a14de27.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  I utgangspunktet dekker det avrundede rektangelet <strong>over «trekanten»-omr\u00e5det<\/strong> vi hadde laget, siden b\u00e5de ::before og ::after bruker samme margin og er plassert 20 piksler over sp\u00f8rsm\u00e5lstegnet.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a5b5601.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a5b5601.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Vi m\u00e5 <strong>ta med den avrundede rektangelboksen rett over den trekantede delen<\/strong> vi opprettet tidligere, slik at de begge sammen vises som en <strong>chatteboks<\/strong>.\n<\/p>\n<p>\n  Vi vet ikke hva den n\u00f8yaktige h\u00f8yden p\u00e5 det avrundede rektangelet for \u00e5 plassere rett over trekanten, det vi \u00f8nsker er \u00e5 <strong>transformere 100% h\u00f8yden p\u00e5 det avrundede rektangelet vertikalt<\/strong> slik at det blir plassert rett over trekanten.\n<\/p>\n<p>\n  Siden begge disse elementene (trekant og avrundet rektangel) bruker, <code>top: -20px;<\/code>trenger vi bare \u00e5 <strong>transformere toppen av det avrundede rektangelet vertikalt til en pikselh\u00f8yde<\/strong> lik dens egen h\u00f8yde.\n<\/p>\n<p>\n  Til dette bruker vi,<code>transform: translateY(-100%);<\/code>\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aa31713.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aa31713.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  N\u00e5 har vi f\u00e5tt en skikkelig struktur som ser ut som en informasjonsboks.\n<\/p>\n<h5>\n  Trinn 7: F\u00e5 den faktiske informasjonen i verkt\u00f8ytipset<br \/>\n<\/h5>\n<p>\n  V\u00e5r siste utfordring her er \u00e5 f\u00e5 riktig innhold, som inneholder mer informasjon, inne i verkt\u00f8ytipset.\n<\/p>\n<p>\n  Husk at vi hadde plassert innholdet som skulle vises inne i verkt\u00f8ytipset i HTML-filen v\u00e5r.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><\/pre>\n<p>\n  Ved \u00e5 bruke CSS kan vi hente et attributt fra HTML-element. Vi skal gj\u00f8re det ved \u00e5 bruke <strong>attr()<\/strong> i <strong>.tooltip::etter<\/strong> pseudo CSS.\n<\/p>\n<p>\n  S\u00e5 i stedet for,<code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  Vi skal bruke<code>content: attr(data-tooltip);<\/code>\n<\/p>\n<p>\n  Her er » <strong>data-verkt\u00f8ytips<\/strong> » v\u00e5rt HTML-attributt.\n<\/p>\n<p>\n  Ved \u00e5 bruke attributtet vi ga for innholdet i HTML, vil vi kunne kalle det innholdet og vise i v\u00e5r pseudo CSS. Resultatet av dette vil v\u00e6re som vist nedenfor,\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aed4573.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aed4573.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  N\u00e5. alt vi trenger \u00e5 gj\u00f8re er \u00e5 gj\u00f8re verkt\u00f8ytipset v\u00e5rt usynlig i begynnelsen og vises kun n\u00e5r brukerne holder pekeren over sp\u00f8rsm\u00e5lstegnet (?).\n<\/p>\n<p>\n  Dette er veldig enkelt \u00e5 gj\u00f8re.\n<\/p>\n<p>\n  For \u00e5 gj\u00f8re verkt\u00f8ytipset usynlig i begynnelsen vil vi <strong>gj\u00f8re dets opasitet «0»<\/strong> i f\u00f8lgende pseudo CSS vi har skrevet f\u00f8r.\n<\/p>\n<pre><code>.tooltip::before .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\n}<\/code><\/pre>\n<p>\n  For Hover-effekten vil vi legge til en ny pseudo-CSS nederst i style.css-filen v\u00e5r. La oss <strong>gj\u00f8re opasiteten til «1» for den svevede tilstanden<\/strong> slik at verkt\u00f8ytipset kun vises ved sveving.\n<\/p>\n<pre><code>\/* CSS for Hover effects *\/\n \ntooltip:hover::before.tooltip:hover::after{\nOpacity:1;\n}<\/code><\/pre>\n<p>\n  Denne pseudo-CSSen bestemmer bare den svevende tilstanden, siden vi har brukt «:hover» etter hoved-CSS .tooltip\n<\/p>\n<p>\n  N\u00e5 er CSS-verkt\u00f8ytipset v\u00e5rt klart.\n<\/p>\n<p>\n  Men overgangen til verkt\u00f8ytips vil ikke v\u00e6re s\u00e5 jevn som du forventer.\n<\/p>\n<p>\n  Du kan gj\u00f8re overgangseffektene enda bedre ved \u00e5 bruke CSS. For dette m\u00e5 du bare legge til overgangsregelen nedenfor i CSS for ::before og ::after pseudo-klasser.\n<\/p>\n<p>\n  For \u00e5 vite mer om overgangsstiler som kan gj\u00f8res ved hjelp av CSS, les artikkelen v\u00e5r » <a href=\"https:\/\/inform.click\/no\/gjor-nettsidene-dine-levende-med-css-animasjoner-og-overganger\/\" title=\"CSS-animasjoner og -overganger\">CSS-animasjoner og -overganger<\/a> «.\n<\/p>\n<pre><code>.tooltip::before.tooltip::after {\ntransition: all ease 0.3s;\n}<\/code><\/pre>\n<p>\n  Denne prosessen er mye enklere og mindre komplisert sammenlignet med implementering av verkt\u00f8ytips ved hjelp av JavaScript.\n<\/p>\n<p>\n  For din referanse, finn den endelige HTML- og CSS-filen for \u00e5 \u00f8ve p\u00e5 dette.\n<\/p>\n<h4>\n  Endelig HTML-fil for testing av verkt\u00f8ytipset<br \/>\n<\/h4>\n<pre><code>\n\n\n<\/code><\/pre>\n<p><meta charset=\"utf-8\" \/><\/p>\n<pre>\n<\/pre>\n<p><title><br \/>\n  CSS Tooltip<br \/>\n<\/title><\/p>\n<pre>\n<\/pre>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<pre>\n\n\n<\/pre>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><br \/>\n<\/form>\n<pre> \n\n<\/pre>\n<h4>\n  <code>Endelig CSS-fil Lage et verkt\u00f8ytips<\/code><br \/>\n<\/h4>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}\n \nform{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}\n \nformlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}\n \nforminput{\nmargin: 010px;\npadding: 8px 8px 6px;\nfont-size: 20px;\nborder: 0;\ncolor: #fff;\n}\n \n\/* --------- Tooltip Styles ---------- *\/\n \n.tooltip{\nposition: relative;\nbackground: rgba(0,0,0,0.3);\npadding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;\ncursor: help;\n}\n.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\ntransition: allease0.3s;\n}\n.tooltip::before{\ncontent: \"\";\nborder-width: 10px 8px 08px;\nborder-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;\ntop: -20px;\nmargin-left: -8px;\n}\n.tooltip::after{\ncontent: attr(data-tooltip);\nbackground: rgba(0,0,0,0.3);\ntop: -20px;\ntransform: translateY(-100%);\nfont-size: 14px;\nmargin-left: -150px;\nwidth: 300px;\nborder-radius: 10px;\ncolor: #fff;\npadding: 14px;\n}\n \n\/* Hover states *\/\n \n.tooltip:hover::before, .tooltip:hover::after{\nopacity: 1;\n}<\/code><\/code><\/pre>\n<h3>\n  Live demo<br \/>\n<\/h3>\n<p>\n  Se <a href=\"http:\/\/www.instantshift.com\/demo\/css-tooltip\/\" target=\"_blank\" rel=\"noopener\">Live CSS-verkt\u00f8ytipset<\/a> i aksjon.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Opptakskilde: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2018\/05\/11\/create-tooltip-using-css\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Du vet sikkert allerede hva et verkt\u00f8ytips er. Et verkt\u00f8ytips er et ikon eller en tekst, som n\u00e5r du holder musepekeren over, gir oss mer informasjon i en boble eller popup-vindu. Du finner vanligvis verkt\u00f8ytips i skjemaer, men du kan plassere dem der brukerne trenger mer informasjon. I bildet ovenfor viser sirkelen med sp\u00f8rsm\u00e5lstegnet inni et verkt\u00f8ytips. N\u00e5r du holder musepekeren over, gir dette verkt\u00f8ytipset mer informasjon om hvilke typer tegn passordet ditt m\u00e5 inneholde. Du kan f\u00e5 rammeverk for \u00e5 implementere verkt\u00f8ytips p\u00e5 nettstedet ditt, men mesteparten av tiden bruker disse rammeverkene JavaScript for \u00e5 oppn\u00e5 dette. I dette \u2026<\/p>\n","protected":false},"author":1,"featured_media":223378,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[70,122,57],"tags":[],"class_list":["post-257287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-8","category-nettverktoy","category-web-og-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts\/257287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/comments?post=257287"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts\/257287\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/media\/223378"}],"wp:attachment":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/media?parent=257287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/categories?post=257287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/tags?post=257287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}