{"id":264926,"date":"2022-12-23T11:14:00","date_gmt":"2022-12-23T08:14:00","guid":{"rendered":"https:\/\/inform.click\/skapa-ett-verktygstips-med-css\/"},"modified":"2022-12-23T11:37:00","modified_gmt":"2022-12-23T08:37:00","slug":"skapa-ett-verktygstips-med-css","status":"publish","type":"post","link":"https:\/\/inform.click\/sv\/skapa-ett-verktygstips-med-css\/","title":{"rendered":"Skapa ett verktygstips med CSS"},"content":{"rendered":"

\n Du vet f\u00f6rmodligen redan vad ett verktygstips \u00e4r.\n<\/p>\n

\n Ett verktygstips \u00e4r en ikon eller text, som n\u00e4r du h\u00e5ller muspekaren \u00f6ver ger oss mer information i en bubbla eller popup.\n<\/p>\n

\n Du hittar vanligtvis verktygstips i formul\u00e4r, men du kan placera dem d\u00e4r anv\u00e4ndarna beh\u00f6ver mer information.\n<\/p>\n

\n I bilden ovan visar cirkeln med fr\u00e5getecknet inom ett verktygstips<\/strong>. N\u00e4r du h\u00e5ller muspekaren \u00f6ver ger det h\u00e4r verktygstipset mer information om vilka typer av tecken ditt l\u00f6senord m\u00e5ste inneh\u00e5lla.\n<\/p>\n

\n Du kan f\u00e5 ramverk f\u00f6r att implementera verktygstips p\u00e5 din webbplats, men f\u00f6r det mesta anv\u00e4nder dessa ramverk JavaScript f\u00f6r att \u00e5stadkomma detta.\n<\/p>\n

\n I den h\u00e4r artikeln kommer vi att l\u00e4ra oss hur man skapar verktygstips med enbart CSS<\/strong> p\u00e5 ett relativt enkelt s\u00e4tt.\n<\/p>\n

\n Innan vi b\u00f6rjar finns den slutliga HTML- och CSS-filen f\u00f6r implementering av verktygstips i slutet av den h\u00e4r bloggen<\/strong>. Vi har beskrivit i detalj varje element som anv\u00e4nds i HTML och CSS f\u00f6r att implementera verktygstips p\u00e5 enklast m\u00f6jliga s\u00e4tt.\n<\/p>\n

\n Du kommer att kunna implementera verktygstipsfunktionen p\u00e5 vilken webbplats som helst med bara HTML och CSS, efter att ha g\u00e5tt igenom den h\u00e4r artikeln.\n<\/p>\n

\n S\u00e5 l\u00e5t oss b\u00f6rja…\n<\/p>\n

\n Vi b\u00f6rjar med att skapa en enkel HTML-sida som ber om l\u00f6senord.\n<\/p>\n

\n Steg 1: Skapa en enkel HTML-sida att visa verktygstips
\n<\/h5>\n

\n H\u00e4r \u00e4r den grundl\u00e4ggande HTML-koden f\u00f6r formul\u00e4rsidan<\/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 l\u00e4nkat v\u00e5r \" <strong>style.css<\/strong> \" fil i ovanst\u00e5ende html.<\/code>\n<\/p>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<p>\n  <code>Vi kommer att skapa verktygstipset med den h\u00e4r CSS-filen.<\/code>\n<\/p>\n<p>\n  <code>Vi anv\u00e4nder ett <strong>enkelt formul\u00e4r<\/strong> f\u00f6r att prova verktygstipsfunktionen. Detta formul\u00e4r har bara ett f\u00e4lt m\u00e4rkt som \" <strong>L\u00f6senord<\/strong> \" eftersom vi bara anv\u00e4nder det f\u00f6r att illustrera hur verktygstipsen fungerar.<\/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 anv\u00e4nt klassen \" <strong>verktygstips<\/strong> \" f\u00f6r att implementera verktygstipsfunktionen med hj\u00e4lp av CSS. Detta kommer vi att diskutera n\u00e4sta avsnitt.<\/code>\n<\/p>\n<h5>\n  <code>Steg 2: Grundl\u00e4ggande CSS-stilar f\u00f6r v\u00e5r HTML-sida<\/code><br \/>\n<\/h5>\n<p>\n  <code>Innan vi skapar CSS f\u00f6r \"verktygstips\", m\u00e5ste vi skapa n\u00e5gra <strong>grundl\u00e4ggande CSS-stilar f\u00f6r v\u00e5r HTML-sida<\/strong>.<\/code>\n<\/p>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}<\/code><\/code><\/pre>\n<p>\n  Detta kommer att ge en html-sida med fin gr\u00f6n bakgrund. Vi har \u00e4ven valt verdana typsnitt och typsnittsf\u00e4rg som vit.\n<\/p>\n<pre><code>form{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}<\/code><\/pre>\n<p>\n  Vi har placerat formul\u00e4ret ”relativt”, med en maximal bredd p\u00e5 600 pixlar och en marginal p\u00e5 20 %.\n<\/p>\n<pre><code>Formlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}<\/code><\/pre>\n<p>\n  Form label class \u00e4r f\u00f6r att ange teckenstorlek och bokstavsavst\u00e5nd f\u00f6r etiketttexten som vi kommer att anv\u00e4nda.\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  H\u00e4r har vi stilarna f\u00f6r formul\u00e4rf\u00e4ltet. Det \u00e4r inget komplicerat med denna stil. Vi har gett en <strong>l\u00e4mplig marginal<\/strong> och <strong>utfyllnad<\/strong> tillsammans med <strong>angivande av teckenstorlek<\/strong> och <strong>f\u00e4rg<\/strong> f\u00f6r formul\u00e4rf\u00e4lt.\n<\/p>\n<p>\n  S\u00e5 det \u00e4r v\u00e5ra standard-css-stilar f\u00f6r v\u00e5r formul\u00e4rsida som vi kommer att anv\u00e4nda f\u00f6r att demonstrera hur man implementerar verktygstipsfunktionen med CSS.\n<\/p>\n<h3>\n  L\u00e5t oss skapa verktygstips med CSS<br \/>\n<\/h3>\n<h5>\n  Steg 4: CSS-stil f\u00f6r verktygstips<br \/>\n<\/h5>\n<p>\n  Du kanske har m\u00e4rkt att vi har anv\u00e4nt klassen ” <strong>tooltip<\/strong> ” i v\u00e5r html-fil. Det h\u00e4r \u00e4r stilen vi kommer att anv\u00e4nda f\u00f6r fr\u00e5getecknet (”?”) som kommer att fungera som v\u00e5rt verktygstips.\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\u00e5ste f\u00f6rst placera verktygstipset relativt genom att anv\u00e4nda ” <strong>position: relativ;<\/strong> ” stil. Anledningen till relativ positionering av verktygstipset \u00e4r att vi kommer att anv\u00e4nda <strong>pseudoelement<\/strong> senare i denna metod som kan positioneras ”Absolut”. S\u00e5 vi vill ha dessa pseudoklasser ”absoluta” placerade relativt detta element.\n<\/p>\n<p>\n  D\u00e4refter ger vi en <strong>svart bakgrundsf\u00e4rg<\/strong> f\u00f6r verktygstipset med rgba()-metoden,\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  d\u00e4r r,g,b st\u00e5r f\u00f6r r\u00f6tt, gr\u00f6nt & bl\u00e5tt och a st\u00e5r f\u00f6r ” <strong>alfa<\/strong> ” som <strong>styr opaciteten<\/strong>.\n<\/p>\n<p>\n  Vi kommer att ge en svart bakgrund till v\u00e5r verktygstipscirkel och minska dess opacitet till 0,3 f\u00f6r att f\u00e5 den att likna en <strong>m\u00f6rkgr\u00f6n f\u00e4rg<\/strong>.\n<\/p>\n<p>\n  D\u00e4refter kommer vi att till\u00e4mpa n\u00e5gra grundl\u00e4ggande utfyllnads- och kantradiestilar p\u00e5 fr\u00e5getecknet (”?”) f\u00f6r att f\u00e5 v\u00e5rt verktygstips att se bra ut.\n<\/p>\n<pre><code>padding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;<\/code><\/pre>\n<p>\n  Med ovanst\u00e5ende CSS applicerar vi utfyllnad p\u00e5 cirkeln som omger ”?”, och g\u00f6r gr\u00e4nsradien till 100 % f\u00f6r att g\u00f6ra den till en hel cirkel.\n<\/p>\n<p>\n  Teckenstorlek best\u00e4mmer storleken p\u00e5 ”?” tecken, som vi anv\u00e4nder som v\u00e5rt verktygstips i det h\u00e4r exemplet.\n<\/p>\n<p>\n  Vi l\u00e4gger ocks\u00e5 till ” <strong>cursor:help;<\/strong> ” i CSS, kommer detta att ge ett fr\u00e5getecken under muspekaren n\u00e4r du h\u00e5ller muspekaren \u00f6ver det elementet, som visas i bilden nedan.\n<\/p>\n<p>\n  Tot-tipset inneh\u00e5ller visst inneh\u00e5ll (i det h\u00e4r exemplet ger vi mer information om de tecken som ska inkluderas i ”l\u00f6senordsf\u00e4ltet”).\n<\/p>\n<h5>\n  Steg 5: Ge inneh\u00e5llet f\u00f6r verktygstips i HTML<br \/>\n<\/h5>\n<p>\n  N\u00e4sta utmaning framf\u00f6r oss \u00e4r, var ska man placera detta inneh\u00e5ll i verktygstipset?\n<\/p>\n<p>\n  F\u00f6r att utf\u00f6ra denna uppgift kommer vi att l\u00e4gga till ett <strong>attribut<\/strong> i HTML-filen vi skapade tidigare.\n<\/p>\n<pre><code><span class=\"tooltip\">?<\/span><\/code><\/pre>\n<p>\n  H\u00e4r vill vi inte l\u00e4gga till n\u00e5gon extra markering, som att skapa ett annat spann f\u00f6r att l\u00e4gga till inneh\u00e5llet i verktygstipset.\n<\/p>\n<p>\n  Vi kan inkludera inneh\u00e5llet f\u00f6r verktygstips inom detta intervall.\n<\/p>\n<p>\n  Vi kommer att g\u00f6ra detta genom att l\u00e4gga till ett ” <strong>data<\/strong> ”-attribut. Dataattributnamnet h\u00e4r kommer att vara ” <strong>verktygstips<\/strong> ”.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"\">?<\/span><\/code><\/pre>\n<p>\n  <strong>data-tooltip<\/strong> \u00e4r v\u00e5rt dataattribut med vilket vi l\u00e4gger till inneh\u00e5llet som ska visas i verktygstipset.\n<\/p>\n<p>\n  D\u00e4refter kommer vi att l\u00e4gga till instruktionerna om tecknet som ska finnas i l\u00f6senordet, inuti v\u00e5rt data-tooltip-attribut.\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  Nu har vi <strong>lagt till texten<\/strong> som ska visas inuti verktygstipset. D\u00e4refter ska vi l\u00e4ra oss hur man <strong>f\u00e5r den h\u00e4r texten att visas i verktygstipset<\/strong> n\u00e4r anv\u00e4ndare h\u00e5ller muspekaren \u00f6ver fr\u00e5getecknet.\n<\/p>\n<h5>\n  Steg 6: Skapa verktygstipsbeh\u00e5llare med hj\u00e4lp av pseudoelement<br \/>\n<\/h5>\n<p>\n  F\u00f6rst m\u00e5ste vi skapa beh\u00e5llarna d\u00e4r inneh\u00e5llet i verktygstipset m\u00e5ste visas.\n<\/p>\n<p>\n  F\u00f6r att g\u00f6ra detta, l\u00e5t oss g\u00e5 tillbaka till style.css-filen och skapa <strong>pseudoelement<\/strong> f\u00f6r <strong>.tooltip-<\/strong> klassen.\n<\/p>\n<p>\n  Vi kommer att skapa <strong>::after<\/strong> och <strong>::before<\/strong> pseudoklasser f\u00f6r att f\u00e5 inneh\u00e5llet i v\u00e5rt verktygstips att visas.\n<\/p>\n<p>\n  I grund och botten, med en pseudoklass som ” <strong>::after<\/strong> ” kan du rikta in dig p\u00e5 en position precis efter elementet som anv\u00e4nder huvudklassen och utforma den positionen.\n<\/p>\n<p>\n  P\u00e5 liknande s\u00e4tt, med hj\u00e4lp av pseudoklassen ::before kan du stila positionen precis f\u00f6re elementet d\u00e4r huvudklassen anv\u00e4nds (i det h\u00e4r fallet \u00e4r ”?” \u00e4r det elementet).\n<\/p>\n<p>\n  Det \u00e4r en mycket anv\u00e4ndbar pseudoklass f\u00f6r att injicera extra inneh\u00e5ll p\u00e5 en sida.\n<\/p>\n<p>\n  Vi kommer att skapa en pseudoklass f\u00f6r ”tootlip” som visas nedan.\n<\/p>\n<pre><code>.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\n}<\/code><\/pre>\n<p>\n  Vi skapar en gemensam klass f\u00f6r ::f\u00f6re och ::efter stilar.\n<\/p>\n<p>\n  H\u00e4r har vi <strong>absolut placerat<\/strong> b\u00e5de ::f\u00f6re och ::efter stilar, eftersom vi vill att de ska placeras ovanf\u00f6r ”fr\u00e5getecknet” och vi vill att de ska vara centrerade ovanf\u00f6r ”?”.\n<\/p>\n<p>\n  F\u00f6r att g\u00f6ra verktygstipset centrerat ovanf\u00f6r ”?” vi m\u00e5ste anv\u00e4nda ” <strong>left:50%;<\/strong> ” attribut.\n<\/p>\n<p>\n  Nu ska vi anv\u00e4nda <strong>::before<\/strong> f\u00f6r att styla den lilla triangeln l\u00e4ngst ner p\u00e5 v\u00e5rt verktygstips.\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>efter<\/strong> anv\u00e4nds f\u00f6r att utforma inneh\u00e5llet i verktygstipset.\n<\/p>\n<p>\n  L\u00e5t oss se hur det g\u00f6rs.\n<\/p>\n<p>\n  F\u00f6rst skapar vi den lilla triangeln l\u00e4ngst ner p\u00e5 verktygstipset.\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\u00f6r anv\u00e4nda <strong>inneh\u00e5ll:””;<\/strong> attribut f\u00f6r att visa att det h\u00e4r elementet inte har n\u00e5got inneh\u00e5ll. Eftersom vi har injicerat lite <strong>tomt inneh\u00e5ll<\/strong> kan vi nu styla det.\n<\/p>\n<p>\n  Vi kan <strong>skapa trianglar i CSS<\/strong> med attributet <strong>border-width<\/strong>.\n<\/p>\n<p>\n  Genom denna linje,\n<\/p>\n<p>\n  <code>border-width: 10px 8px 08px;<\/code>\n<\/p>\n<p>\n  Vi har specificerat att kantbredden till toppen \u00e4r 10 pixlar, h\u00f6ger \u00e4r 8 pixlar, ner 0 pixlar och v\u00e4nster 8 pixlar.\n<\/p>\n<p>\n  Detta kommer att skapa en triangel f\u00f6r oss.\n<\/p>\n<p>\n  D\u00e4refter ska vi skapa en <strong>solid ram<\/strong> f\u00f6r det h\u00e4r avsnittet och <strong>g\u00f6ra de h\u00f6gra, nedre och v\u00e4nstra omr\u00e5dena genomskinliga<\/strong>, s\u00e5 att bara det \u00f6vre ”triangelomr\u00e5det” syns.\n<\/p>\n<pre><code>border-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code><\/pre>\n<p>\n  Efter att ha gjort b\u00e5rden fast, applicerar vi f\u00e4rger f\u00f6r den \u00f6vre, h\u00f6gra, nedre och v\u00e4nstra sidan av b\u00e5rden.\n<\/p>\n<p>\n  Vi b\u00f6r anv\u00e4nda samma ” <strong>border-color:rgba();<\/strong> ”-attribut h\u00e4r, som vi anv\u00e4nde f\u00f6r att styla cirkeln runt fr\u00e5getecknet.\n<\/p>\n<p>\n  <code>border-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code>\n<\/p>\n<p>\n  H\u00e4r har vi gett <strong>svart f\u00e4rg<\/strong> (0,0,0) f\u00f6r den <strong>\u00f6vre delen<\/strong> av kanten och <strong>minskat dess opacitet till 0,3<\/strong> f\u00f6r att ge oss en m\u00f6rkgr\u00f6n f\u00e4rg, precis som vi gjorde f\u00f6r att f\u00e5 stilen f\u00f6r cirkeln runt ”?”.\n<\/p>\n<p>\n  Vi gjorde de <strong>h\u00f6gra, nedre och v\u00e4nstra<\/strong> delarna av b\u00e5rden g\u00f6mda genom att g\u00f6ra den <strong>genomskinliga<\/strong>.\n<\/p>\n<p>\n  \u00c4ven om vi hade skapat de h\u00f6gra och v\u00e4nstra gr\u00e4nserna \u00e4r de genomskinliga. Den enda kanten med f\u00e4rg \u00e4r den \u00f6vre kanten. Vad detta kommer att g\u00f6ra \u00e4r att den <strong>dolda kanten till v\u00e4nster och h\u00f6ger ger oss en triangeleffekt tillsammans med den f\u00e4rgade \u00f6vre kanten<\/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  Slutresultatet kommer att se ut s\u00e5 h\u00e4r.\n<\/p>\n<p>\n  Om du g\u00f6r en Google-s\u00f6kning efter ”i” kommer du att l\u00e4ra dig mer om det.\n<\/p>\n<p>\n  Attributen ” <strong>Margin-v\u00e4nster<\/strong> ” och ” <strong>topp<\/strong> ” anv\u00e4nds f\u00f6r att placera denna triangel centrerad ovanf\u00f6r cirkeln.\n<\/p>\n<pre><code>top: -20px;\nmargin-left: -8px;<\/code><\/pre>\n<p>\n  Nu <strong>har vi skapat den triangul\u00e4ra svansen<\/strong> l\u00e4ngst ner p\u00e5 v\u00e5rt verktygstips, som pekar p\u00e5 ”?” skylt.\n<\/p>\n<p>\n  D\u00e4refter m\u00e5ste vi formatera det rundade rektangelomr\u00e5det i verktygstipset d\u00e4r informationen visas. F\u00f6r detta kommer vi att anv\u00e4nda attributet <strong>::after .<\/strong>\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  D\u00e4rf\u00f6r har jag anv\u00e4nt,\n<\/p>\n<p>\n  <code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  I den inledande delen av pseudoklassen <strong>.tooltip::after<\/strong>\n<\/p>\n<p>\n  Nu m\u00e5ste vi ge det h\u00e4r avsnittet <strong>samma bakgrundsf\u00e4rg som<\/strong> vi anv\u00e4nde f\u00f6r att skapa triangelomr\u00e5det (som \u00e4r svart, med en alfa\/opacitet p\u00e5 0,3).\n<\/p>\n<p>\n  S\u00e5 jag har lagt till,\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  Sedan har jag centrerat det h\u00e4r avsnittet med v\u00e5rt ”fr\u00e5getecken”, som tidigare. Jag anv\u00e4nder en bredd p\u00e5 300 px f\u00f6r den rundade rektangelrutan och en marginal p\u00e5 -150 px f\u00f6r att centrera den i f\u00f6rh\u00e5llande till fr\u00e5getecknet.\n<\/p>\n<pre><code>top: -20px;\nwidth:300px;\nmargin-left: -150px;<\/code><\/pre>\n<p>\n  Nu kommer vi att ge stoppning och g\u00f6ra kanterna p\u00e5 rektangeln rundade (genom att applicera gr\u00e4nsradie).\n<\/p>\n<pre><code>border-radius: 10px;\ncolor: #fff;\npadding: 14px;<\/code><\/pre>\n<p>\n  Detta kommer ocks\u00e5 att st\u00e4lla in f\u00e4rgen p\u00e5 texten inuti den rundade rektangeln som vit (#fff).\n<\/p>\n<p>\n  Nu \u00e4r det rundade rektangelomr\u00e5det som visar inneh\u00e5ll klart. Men \u00e4nd\u00e5 \u00e4r den <strong>inte korrekt placerad<\/strong>. Den aktuella HTML-sidan kommer att se ut som n\u00e5got som visas nedan.\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 grund och botten ligger den rundade rektangeln <strong>ovanf\u00f6r ”triangelomr\u00e5det”<\/strong> som vi skapade, eftersom b\u00e5de ::f\u00f6re och ::efter anv\u00e4nder samma marginal och placeras 20 pixlar ovanf\u00f6r fr\u00e5getecknet.\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\u00e5ste <strong>ta med den rundade rektangelrutan precis ovanf\u00f6r den triangul\u00e4ra sektionen<\/strong> vi skapade tidigare, s\u00e5 att de b\u00e5da tillsammans kommer att visas som en <strong>chattruta<\/strong>.\n<\/p>\n<p>\n  Vi vet inte vad den exakta h\u00f6jden p\u00e5 den rundade rektangeln f\u00f6r att placera den precis ovanf\u00f6r triangeln, vad vi vill \u00e4r att <strong>transformera 100% h\u00f6jd p\u00e5 den rundade rektangeln vertikalt<\/strong> s\u00e5 att den kommer att placeras precis ovanf\u00f6r triangeln.\n<\/p>\n<p>\n  Eftersom b\u00e5da dessa element (triangel och rundad rektangel) anv\u00e4nds <code>top: -20px;<\/code>beh\u00f6ver vi bara <strong>transformera toppen av den rundade rektangeln vertikalt till en pixelh\u00f6jd<\/strong> lika med dess egen h\u00f6jd.\n<\/p>\n<p>\n  F\u00f6r detta anv\u00e4nder 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  Nu har vi en ordentlig struktur som ser ut som en informationsl\u00e5da.\n<\/p>\n<h5>\n  Steg 7: F\u00e5 den faktiska informationen i verktygstipset<br \/>\n<\/h5>\n<p>\n  V\u00e5r sista utmaning h\u00e4r \u00e4r att f\u00e5 r\u00e4tt inneh\u00e5ll, som inneh\u00e5ller mer information, i verktygstipset.\n<\/p>\n<p>\n  Kom ih\u00e5g att vi hade placerat inneh\u00e5llet som skulle visas i verktygstipset i v\u00e5r HTML-fil.\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  Med CSS kan vi ta ett attribut fr\u00e5n HTML-element. Vi kommer att g\u00f6ra det med <strong>attr()<\/strong> i <strong>.tooltip::efter<\/strong> pseudo CSS.\n<\/p>\n<p>\n  S\u00e5 ist\u00e4llet f\u00f6r<code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  Vi ska anv\u00e4nda<code>content: attr(data-tooltip);<\/code>\n<\/p>\n<p>\n  H\u00e4r \u00e4r ” <strong>data-tooltip<\/strong> ” v\u00e5rt HTML-attribut.\n<\/p>\n<p>\n  Genom att anv\u00e4nda attributet vi gav f\u00f6r inneh\u00e5llet i HTML kommer vi att kunna kalla det inneh\u00e5llet och visa inuti v\u00e5r pseudo CSS. Resultatet av detta blir som visas nedan,\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  Nu. allt vi beh\u00f6ver g\u00f6ra \u00e4r att g\u00f6ra v\u00e5rt verktygstips osynligt i b\u00f6rjan och endast visas n\u00e4r anv\u00e4ndarna h\u00e5ller muspekaren \u00f6ver fr\u00e5getecknet (?).\n<\/p>\n<p>\n  Detta \u00e4r v\u00e4ldigt l\u00e4tt att g\u00f6ra.\n<\/p>\n<p>\n  F\u00f6r att g\u00f6ra verktygstipset osynligt i b\u00f6rjan kommer vi att <strong>g\u00f6ra dess opacitet ”0”<\/strong> i f\u00f6ljande pseudo-CSS som vi har skrivit tidigare.\n<\/p>\n<pre><code>.tooltip::before .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\n}<\/code><\/pre>\n<p>\n  F\u00f6r Hover-effekten kommer vi att l\u00e4gga till en ny pseudo-CSS l\u00e4ngst ned i v\u00e5r style.css-fil. L\u00e5t oss <strong>g\u00f6ra opaciteten till ”1” f\u00f6r det sv\u00e4vade tillst\u00e5ndet<\/strong> s\u00e5 att verktygstipset endast visas vid hovring.\n<\/p>\n<pre><code>\/* CSS for Hover effects *\/\n \ntooltip:hover::before.tooltip:hover::after{\nOpacity:1;\n}<\/code><\/pre>\n<p>\n  Denna pseudo-CSS best\u00e4mmer bara det sv\u00e4vade tillst\u00e5ndet, eftersom vi har anv\u00e4nt ”:hover” efter huvud-CSS .tooltip\n<\/p>\n<p>\n  Nu \u00e4r v\u00e5rt CSS-verktygstips klart.\n<\/p>\n<p>\n  Men \u00f6verg\u00e5ngen av verktygstips blir inte s\u00e5 smidig som du f\u00f6rv\u00e4ntar dig.\n<\/p>\n<p>\n  Du kan g\u00f6ra \u00f6verg\u00e5ngseffekterna \u00e4nnu b\u00e4ttre med CSS. F\u00f6r detta beh\u00f6ver du bara l\u00e4gga till \u00f6verg\u00e5ngsregeln nedan i CSS f\u00f6r ::f\u00f6re och ::efter pseudoklasser.\n<\/p>\n<p>\n  F\u00f6r att veta mer om \u00f6verg\u00e5ngsstilar som kan g\u00f6ras med CSS l\u00e4s v\u00e5r artikel ” <a href=\"https:\/\/inform.click\/sv\/ge-dina-webbsidor-liv-med-css-animationer-och-overgangar\/\" title=\"CSS-animationer och \u00f6verg\u00e5ngar\">CSS-animationer och \u00f6verg\u00e5ngar<\/a> ”.\n<\/p>\n<pre><code>.tooltip::before.tooltip::after {\ntransition: all ease 0.3s;\n}<\/code><\/pre>\n<p>\n  Denna process \u00e4r mycket enklare och mindre komplicerad j\u00e4mf\u00f6rt med implementeringen av verktygstips med JavaScript.\n<\/p>\n<p>\n  F\u00f6r din referens, hitta den slutliga HTML- och CSS-filen f\u00f6r att \u00f6va p\u00e5 detta.\n<\/p>\n<h4>\n  Slutlig HTML-fil f\u00f6r att testa verktygstipset<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>Slutlig CSS-fil Skapa ett verktygstips<\/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-verktygstipset<\/a> i aktion.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Inspelningsk\u00e4lla: <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 f\u00f6rmodligen redan vad ett verktygstips \u00e4r. Ett verktygstips \u00e4r en ikon eller text, som n\u00e4r du h\u00e5ller muspekaren \u00f6ver ger oss mer information i en bubbla eller popup. Du hittar vanligtvis verktygstips i formul\u00e4r, men du kan placera dem d\u00e4r anv\u00e4ndarna beh\u00f6ver mer information. I bilden ovan visar cirkeln med fr\u00e5getecknet inom ett verktygstips. N\u00e4r du h\u00e5ller muspekaren \u00f6ver ger det h\u00e4r verktygstipset mer information om vilka typer av tecken ditt l\u00f6senord m\u00e5ste inneh\u00e5lla. Du kan f\u00e5 ramverk f\u00f6r att implementera verktygstips p\u00e5 din webbplats, men f\u00f6r det mesta anv\u00e4nder dessa ramverk JavaScript f\u00f6r att \u00e5stadkomma detta. I denna \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":[74,61,126],"tags":[],"class_list":["post-264926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-10","category-web-och-wordpress","category-web-verktyg"],"_links":{"self":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/264926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/comments?post=264926"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/264926\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media\/223378"}],"wp:attachment":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media?parent=264926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/categories?post=264926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/tags?post=264926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}