{"id":249446,"date":"2022-12-23T11:14:00","date_gmt":"2022-12-23T08:14:00","guid":{"rendered":"https:\/\/inform.click\/tyokaluvihjeen-luominen-css-n-avulla\/"},"modified":"2022-12-23T11:59:00","modified_gmt":"2022-12-23T08:59:00","slug":"tyokaluvihjeen-luominen-css-n-avulla","status":"publish","type":"post","link":"https:\/\/inform.click\/fi\/tyokaluvihjeen-luominen-css-n-avulla\/","title":{"rendered":"Ty\u00f6kaluvihjeen luominen CSS:n avulla"},"content":{"rendered":"

\n Tied\u00e4t varmaan jo, mik\u00e4 ty\u00f6kaluvihje on.\n<\/p>\n

\n Ty\u00f6kaluvinkki on kuvake tai teksti, jonka p\u00e4\u00e4lle viem\u00e4ll\u00e4 saat lis\u00e4tietoja kuplassa tai ponnahdusikkunassa.\n<\/p>\n

\n Ty\u00f6kaluvinkkej\u00e4 l\u00f6ytyy yleens\u00e4 lomakkeista, mutta voit sijoittaa ne sinne, miss\u00e4 k\u00e4ytt\u00e4j\u00e4t tarvitsevat lis\u00e4tietoja.\n<\/p>\n

\n Yll\u00e4 olevassa kuvassa ympyr\u00e4, jonka sis\u00e4ll\u00e4 on kysymysmerkki, n\u00e4ytt\u00e4\u00e4 ty\u00f6kaluvihjeen<\/strong>. Kun hiiren osoitin vie sen p\u00e4\u00e4lle, t\u00e4m\u00e4 ty\u00f6kaluvinkki antaa lis\u00e4tietoja siit\u00e4, mink\u00e4 tyyppisi\u00e4 merkkej\u00e4 salasanasi tulee sis\u00e4lt\u00e4\u00e4.\n<\/p>\n

\n Voit hankkia kehyksi\u00e4 ty\u00f6kaluvihjeiden toteuttamiseksi verkkosivustollasi, mutta useimmiten n\u00e4m\u00e4 puitteet k\u00e4ytt\u00e4v\u00e4t JavaScripti\u00e4 t\u00e4m\u00e4n saavuttamiseksi.\n<\/p>\n

\n T\u00e4ss\u00e4 artikkelissa opimme luomaan ty\u00f6kaluvihjeit\u00e4 pelk\u00e4ll\u00e4 CSS<\/strong> :ll\u00e4 suhteellisen yksinkertaisella tavalla.\n<\/p>\n

\n Ennen kuin aloitamme, lopullinen HTML- ja CSS-tiedosto ty\u00f6kaluvihjeen toteuttamista varten on saatavilla t\u00e4m\u00e4n blogin lopussa<\/strong>. Olemme kuvanneet yksityiskohtaisesti jokaisen HTML:ss\u00e4 ja CSS:ss\u00e4 k\u00e4ytetyn elementin ty\u00f6kaluvihjeen toteuttamiseksi helpoimmalla mahdollisella tavalla.\n<\/p>\n

\n Voit ottaa ty\u00f6kaluvihje-ominaisuuden k\u00e4ytt\u00f6\u00f6n mill\u00e4 tahansa verkkosivustolla k\u00e4ytt\u00e4m\u00e4ll\u00e4 vain HTML- ja CSS-koodia, kun olet k\u00e4ynyt t\u00e4m\u00e4n artikkelin kokonaan l\u00e4pi.\n<\/p>\n

\n Joten Aloitetaan\u2026\n<\/p>\n

\n Aloitamme luomalla yksinkertaisen HTML-sivun, joka kysyy salasanaa.\n<\/p>\n

\n Vaihe 1: Yksinkertaisen HTML-sivun luominen n\u00e4ytett\u00e4v\u00e4ksi ty\u00f6kaluvihjeeksi
\n<\/h5>\n

\n T\u00e4ss\u00e4 on lomakesivun HTML-peruskoodi<\/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>Kuten n\u00e4et, olemme linkitt\u00e4neet \" <strong>style.css<\/strong> \" -tiedostomme yll\u00e4 olevaan html-tiedostoon.<\/code>\n<\/p>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<p>\n  <code>Luomme ty\u00f6kaluvinkin k\u00e4ytt\u00e4m\u00e4ll\u00e4 t\u00e4t\u00e4 CSS-tiedostoa.<\/code>\n<\/p>\n<p>\n  <code>K\u00e4yt\u00e4mme ty\u00f6kaluvihjetoimintoa <strong>yksinkertaisella lomakkeella .<\/strong> T\u00e4ss\u00e4 lomakkeessa on vain yksi kentt\u00e4, joka on merkitty \" <strong>Salasana<\/strong> \", koska k\u00e4yt\u00e4mme sit\u00e4 vain ty\u00f6kaluvihjeiden toiminnan havainnollistamiseen.<\/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>Olemme k\u00e4ytt\u00e4neet luokkaa \" <strong>tooltip<\/strong> \" toteuttaaksemme ty\u00f6kaluvihje-ominaisuuden CSS:n avulla. T\u00e4st\u00e4 keskustelemme seuraavassa jaksossa.<\/code>\n<\/p>\n<h5>\n  <code>Vaihe 2: CSS-perustyylit HTML-sivullemme<\/code><br \/>\n<\/h5>\n<p>\n  <code>Ennen kuin luot CSS:n ty\u00f6kaluvihjeelle, meid\u00e4n on luotava joitain <strong>CSS-perustyylej\u00e4 html-sivullemme<\/strong>.<\/code>\n<\/p>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}<\/code><\/code><\/pre>\n<p>\n  T\u00e4m\u00e4 antaa html-sivun kauniilla vihre\u00e4ll\u00e4 taustalla. Olemme my\u00f6s valinneet verdana-fontin ja fontin v\u00e4rin valkoiseksi.\n<\/p>\n<pre><code>form{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}<\/code><\/pre>\n<p>\n  Olemme sijoittaneet lomakkeen ”suhteellisesti”, maksimileveydell\u00e4 600 pikseli\u00e4 ja marginaalilla 20 %.\n<\/p>\n<pre><code>Formlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}<\/code><\/pre>\n<p>\n  Lomaketarraluokka on tarkoitettu k\u00e4ytett\u00e4v\u00e4n tarratekstin fontin koon ja kirjainv\u00e4lin m\u00e4\u00e4ritt\u00e4miseen.\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  T\u00e4ss\u00e4 on lomakekent\u00e4n tyylit. T\u00e4ss\u00e4 tyyliss\u00e4 ei ole mit\u00e4\u00e4n monimutkaista. Olemme antaneet <strong>sopivan marginaalin<\/strong> ja <strong>t\u00e4yt\u00f6n<\/strong> sek\u00e4 <strong>m\u00e4\u00e4ritt\u00e4neet kirjasinkoon<\/strong> ja <strong>v\u00e4rin<\/strong> lomakekentille.\n<\/p>\n<p>\n  N\u00e4m\u00e4 ovat siis oletusarvoiset css-tyylimme lomakesivullemme, joita k\u00e4yt\u00e4mme ty\u00f6kaluvihje-ominaisuuden toteuttamiseen CSS:n avulla.\n<\/p>\n<h3>\n  Luodaan ty\u00f6kaluvihje CSS:n avulla<br \/>\n<\/h3>\n<h5>\n  Vaihe 4: CSS-tyyli ty\u00f6kaluvihjeelle<br \/>\n<\/h5>\n<p>\n  Olet ehk\u00e4 huomannut, ett\u00e4 olemme k\u00e4ytt\u00e4neet luokkaa ” <strong>tooltip<\/strong> ” html-tiedostossamme. T\u00e4t\u00e4 tyyli\u00e4 aiomme soveltaa kysymysmerkkiin (?”), joka toimii ty\u00f6kaluvinkkin\u00e4.\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  Meid\u00e4n on ensin sijoitettava ty\u00f6kaluvihje suhteellisesti k\u00e4ytt\u00e4m\u00e4ll\u00e4 ” <strong>position: suhteellinen;<\/strong> ”tyyliin. Syy ty\u00f6kaluvihjeen suhteelliselle sijoittelulle on se, ett\u00e4 k\u00e4yt\u00e4mme my\u00f6hemmin t\u00e4ss\u00e4 menetelm\u00e4ss\u00e4 <strong>pseudoelementtej\u00e4, jotka voidaan sijoittaa ”absoluuttisesti”.<\/strong> Joten haluamme, ett\u00e4 pseudo-luokat ”absoluuttiset” sijoitetaan suhteessa t\u00e4h\u00e4n elementtiin.\n<\/p>\n<p>\n  Seuraavaksi annamme ty\u00f6kaluvihjeelle <strong>mustan taustav\u00e4rin<\/strong> rgba()-menetelm\u00e4ll\u00e4,\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  jossa r,g,b tarkoittaa punaista, vihre\u00e4\u00e4 ja sinist\u00e4 ja a tarkoittaa ' <strong>alpha<\/strong> ', joka <strong>ohjaa opasiteettia<\/strong>.\n<\/p>\n<p>\n  Annamme ty\u00f6kaluvihjeillemme mustan taustan ja pienenn\u00e4mme sen opasiteetin arvoon 0,3, jotta se muistuttaa <strong>tummanvihre\u00e4\u00e4 v\u00e4ri\u00e4<\/strong>.\n<\/p>\n<p>\n  Seuraavaksi aiomme soveltaa joitain perustyylej\u00e4 ja reunas\u00e4teen tyylej\u00e4 kysymysmerkkimerkkiin (?”), jotta ty\u00f6kaluvihjeemme n\u00e4ytt\u00e4isi hyv\u00e4lt\u00e4.\n<\/p>\n<pre><code>padding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;<\/code><\/pre>\n<p>\n  Yll\u00e4 olevalla CSS:ll\u00e4 lis\u00e4\u00e4mme ympyr\u00e4\u00e4, jossa on ”?”, ja teemme reunan s\u00e4teest\u00e4 100 %, jotta siit\u00e4 tulee t\u00e4ysi ympyr\u00e4.\n<\/p>\n<p>\n  Fontin koko m\u00e4\u00e4ritt\u00e4\u00e4 ”?” merkki, jota k\u00e4yt\u00e4mme ty\u00f6kaluvihjeen\u00e4 t\u00e4ss\u00e4 esimerkiss\u00e4.\n<\/p>\n<p>\n  Lis\u00e4\u00e4mme my\u00f6s ” <strong>cursor:help;<\/strong> ” CSS:ss\u00e4, t\u00e4m\u00e4 antaa kysymysmerkkimerkin hiiren osoittimen alle, kun viet hiiren osoittimen kyseisen elementin p\u00e4\u00e4lle, kuten alla olevassa kuvassa n\u00e4kyy.\n<\/p>\n<p>\n  Vihje sis\u00e4lt\u00e4\u00e4 jonkin verran sis\u00e4lt\u00f6\u00e4 (t\u00e4ss\u00e4 esimerkiss\u00e4 annamme lis\u00e4tietoja merkist\u00e4, jotka tulisi sis\u00e4llytt\u00e4\u00e4 ”salasana”-kentt\u00e4\u00e4n).\n<\/p>\n<h5>\n  Vaihe 5: Anna ty\u00f6kaluvihjeen sis\u00e4lt\u00f6 HTML:n sis\u00e4\u00e4n<br \/>\n<\/h5>\n<p>\n  Seuraava haaste edess\u00e4mme on, mihin sijoittaa t\u00e4m\u00e4 sis\u00e4lt\u00f6 ty\u00f6kaluvihjeen sis\u00e4\u00e4n?\n<\/p>\n<p>\n  T\u00e4m\u00e4n teht\u00e4v\u00e4n suorittamiseksi lis\u00e4\u00e4mme <strong>attribuutin<\/strong> aiemmin luomaan HTML-tiedostoon.\n<\/p>\n<pre><code><span class=\"tooltip\">?<\/span><\/code><\/pre>\n<p>\n  T\u00e4ss\u00e4 emme halua lis\u00e4t\u00e4 ylim\u00e4\u00e4r\u00e4isi\u00e4 merkint\u00f6j\u00e4, kuten luoda uutta jaksoa sis\u00e4ll\u00f6n lis\u00e4\u00e4miseksi ty\u00f6kaluvihjeen sis\u00e4\u00e4n.\n<\/p>\n<p>\n  Voimme sis\u00e4llytt\u00e4\u00e4 ty\u00f6kaluvihjeen sis\u00e4ll\u00f6n t\u00e4lle ajanjaksolle.\n<\/p>\n<p>\n  Teemme t\u00e4m\u00e4n lis\u00e4\u00e4m\u00e4ll\u00e4 ” <strong>data<\/strong> ”-attribuutin. Tietom\u00e4\u00e4ritteen nimi t\u00e4ss\u00e4 tulee olemaan ” <strong>tooltip<\/strong> ”.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"\">?<\/span><\/code><\/pre>\n<p>\n  <strong>data-tooltip<\/strong> on tietom\u00e4\u00e4ritteemme, jonka avulla lis\u00e4\u00e4mme ty\u00f6kaluvihjeen sis\u00e4lle n\u00e4ytett\u00e4v\u00e4n sis\u00e4ll\u00f6n.\n<\/p>\n<p>\n  Seuraavaksi aiomme lis\u00e4t\u00e4 ohjeet koskien merkki\u00e4, jonka pit\u00e4isi olla salasanassa, data-tooltip-attribuuttiamme.\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  Nyt olemme <strong>lis\u00e4nneet tekstin<\/strong>, jonka pit\u00e4isi n\u00e4ky\u00e4 ty\u00f6kaluvihjeen sis\u00e4ll\u00e4. Seuraavaksi opimme, kuinka <strong>t\u00e4m\u00e4 teksti saadaan n\u00e4kyviin ty\u00f6kaluvihjeeseen,<\/strong> kun k\u00e4ytt\u00e4j\u00e4t pit\u00e4v\u00e4t hiiren osoittimen kysymysmerkkimerkin p\u00e4\u00e4ll\u00e4.\n<\/p>\n<h5>\n  Vaihe 6: Ty\u00f6kaluvihje-s\u00e4il\u00f6n luominen pseudoelementeill\u00e4<br \/>\n<\/h5>\n<p>\n  Ensin meid\u00e4n on luotava s\u00e4ili\u00f6t, joiden sis\u00e4ll\u00e4 ty\u00f6kaluvihjeen sis\u00e4lt\u00f6 on n\u00e4ytett\u00e4v\u00e4.\n<\/p>\n<p>\n  T\u00e4t\u00e4 varten palataan style.css-tiedostoon ja tehd\u00e4\u00e4n pseudoelementtej\u00e4 <strong>.tooltip<\/strong> <strong>–<\/strong> luokkaan.\n<\/p>\n<p>\n  Aiomme luoda <strong>::after<\/strong> ja <strong>::before<\/strong> pseudo-luokkia, jotta ty\u00f6kaluvinkkimme sis\u00e4lt\u00f6 tulee n\u00e4kyviin.\n<\/p>\n<p>\n  Periaatteessa k\u00e4ytt\u00e4m\u00e4ll\u00e4 pseudoluokkaa, kuten ” <strong>::after<\/strong> ”, voit kohdistaa sijaintiin heti elementin j\u00e4lkeen, joka k\u00e4ytt\u00e4\u00e4 p\u00e4\u00e4luokkaa ja tyyli\u00e4.\n<\/p>\n<p>\n  Vastaavasti k\u00e4ytt\u00e4m\u00e4ll\u00e4 pseudoluokkaa ::before voit muotoilla sijainnin juuri ennen sit\u00e4 elementti\u00e4, jossa p\u00e4\u00e4luokkaa k\u00e4ytet\u00e4\u00e4n (t\u00e4ss\u00e4 tapauksessa ”?” on se elementti).\n<\/p>\n<p>\n  Se on eritt\u00e4in hy\u00f6dyllinen pseudoluokka lis\u00e4sis\u00e4ll\u00f6n lis\u00e4\u00e4miseen sivulle.\n<\/p>\n<p>\n  Luomme pseudoluokan ”tootlipille” alla olevan kuvan mukaisesti.\n<\/p>\n<pre><code>.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\n}<\/code><\/pre>\n<p>\n  Luomme yhteist\u00e4 luokkaa ::ennen ja ::affter -tyyleille.\n<\/p>\n<p>\n  T\u00e4ss\u00e4 olemme <strong>ehdottomasti sijoittaneet<\/strong> molemmat ::ennen ja ::j\u00e4lkeen -tyylej\u00e4, koska haluamme niiden olevan 'kysymysmerkin' yl\u00e4puolella ja haluamme niiden olevan keskell\u00e4 ”?”.\n<\/p>\n<p>\n  Jos haluat asettaa ty\u00f6kaluvihjeen keskelle ”?” meid\u00e4n on k\u00e4ytett\u00e4v\u00e4 ” <strong>vasen:50%;<\/strong> ”-attribuutti.\n<\/p>\n<p>\n  K\u00e4yt\u00e4mme nyt ty\u00f6kaluvinkkimme alareunassa olevan pienen kolmion tyylist\u00e4 <strong>::ennen .<\/strong>\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>::after<\/strong> – merkki\u00e4 k\u00e4ytet\u00e4\u00e4n ty\u00f6kaluvihjeen sis\u00e4ll\u00f6n tyyliin.\n<\/p>\n<p>\n  Katsotaan kuinka se tehd\u00e4\u00e4n.\n<\/p>\n<p>\n  Ensin luodaan pieni kolmio ty\u00f6kaluvihjeen alaosaan.\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  Meid\u00e4n pit\u00e4isi k\u00e4ytt\u00e4\u00e4 <strong>sis\u00e4lt\u00f6\u00e4:””;<\/strong> attribuutti osoittaa, ett\u00e4 t\u00e4ll\u00e4 elementill\u00e4 ei ole sis\u00e4lt\u00f6\u00e4. Koska olemme lis\u00e4nneet <strong>tyhj\u00e4\u00e4 sis\u00e4lt\u00f6\u00e4<\/strong>, voimme nyt muokata sit\u00e4.\n<\/p>\n<p>\n  Voimme <strong>luoda kolmioita CSS:ss\u00e4<\/strong> k\u00e4ytt\u00e4m\u00e4ll\u00e4 <strong>border-width<\/strong> -attribuuttia.\n<\/p>\n<p>\n  T\u00e4ll\u00e4 linjalla,\n<\/p>\n<p>\n  <code>border-width: 10px 8px 08px;<\/code>\n<\/p>\n<p>\n  Olemme m\u00e4\u00e4ritt\u00e4neet, ett\u00e4 yl\u00e4reunan leveys on 10 pikseli\u00e4, oikealla 8 pikseli\u00e4, alas 0 pikseli\u00e4 ja vasemmalla 8 pikseli\u00e4.\n<\/p>\n<p>\n  T\u00e4m\u00e4 luo meille kolmion.\n<\/p>\n<p>\n  Seuraavaksi aiomme luoda <strong>kiinte\u00e4n reunuksen<\/strong> t\u00e4lle osalle ja <strong>tehd\u00e4 oikeasta, ala- ja vasemmasta alueesta l\u00e4pin\u00e4kyv\u00e4<\/strong> niin, ett\u00e4 vain ylempi ”kolmio” n\u00e4kyy.\n<\/p>\n<pre><code>border-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code><\/pre>\n<p>\n  Kun reunus on tehty kiinte\u00e4ksi, k\u00e4yt\u00e4mme v\u00e4rej\u00e4 reunuksen yl\u00e4-, oikea-, ala- ja vasemmalle puolelle.\n<\/p>\n<p>\n  Meid\u00e4n pit\u00e4isi k\u00e4ytt\u00e4\u00e4 samaa ” <strong>border-color:rgba();<\/strong> ” attribuutti t\u00e4ss\u00e4, jota k\u00e4ytimme muotoilemaan ympyr\u00e4\u00e4 kysymysmerkin ymp\u00e4rille.\n<\/p>\n<p>\n  <code>border-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code>\n<\/p>\n<p>\n  T\u00e4ss\u00e4 olemme antaneet <strong>mustan v\u00e4rin<\/strong> (0,0,0) reunuksen <strong>yl\u00e4osalle<\/strong> ja <strong>pienent\u00e4neet sen l\u00e4pin\u00e4kyvyytt\u00e4 0,3<\/strong> :een saadaksemme meille tummanvihre\u00e4n v\u00e4rin, aivan kuten teimme tyylin saamiseksi ympyr\u00e4n ”?” ymp\u00e4rille.\n<\/p>\n<p>\n  Teimme reunuksen <strong>oikean, ala- ja vasemman<\/strong> osan piiloon tekem\u00e4ll\u00e4 <strong>l\u00e4pin\u00e4kyv\u00e4st\u00e4<\/strong>.\n<\/p>\n<p>\n  Vaikka olisimme luoneet oikean ja vasemman reunan, ne ovat l\u00e4pin\u00e4kyvi\u00e4. Ainoa v\u00e4rillinen reuna on yl\u00e4reuna. T\u00e4m\u00e4 tekee siit\u00e4, ett\u00e4 <strong>piilotettu reuna vasemmalla ja oikealla antaa meille kolmiovaikutelman yhdess\u00e4 v\u00e4rillisen yl\u00e4reunuksen kanssa<\/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  Lopputulos n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4.\n<\/p>\n<p>\n  Jos teet Google-haun sanalla ”i”, saat lis\u00e4tietoja siit\u00e4.\n<\/p>\n<p>\n  ” <strong>Margin-left<\/strong> ” ja ” <strong>top<\/strong> ” attribuutteja k\u00e4ytet\u00e4\u00e4n sijoittamaan t\u00e4m\u00e4 kolmio keskelle ympyr\u00e4n yl\u00e4puolelle.\n<\/p>\n<pre><code>top: -20px;\nmargin-left: -8px;<\/code><\/pre>\n<p>\n  Nyt <strong>olemme luoneet<\/strong> ty\u00f6kaluvihjeemme alaosaan kolmion muotoisen h\u00e4nn\u00e4n, joka osoittaa ”?” merkki.\n<\/p>\n<p>\n  Seuraavaksi meid\u00e4n on muotoiltava ty\u00f6kaluvihjeen py\u00f6ristetty suorakaidealue, jossa tiedot n\u00e4ytet\u00e4\u00e4n. T\u00e4t\u00e4 varten k\u00e4yt\u00e4mme <strong>::after<\/strong> – attribuuttia.\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  Siksi olen k\u00e4ytt\u00e4nyt,\n<\/p>\n<p>\n  <code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  Pseudoluokan avausosassa <strong>.tooltip::after<\/strong>\n<\/p>\n<p>\n  Nyt meid\u00e4n on annettava t\u00e4lle osalle <strong>sama taustav\u00e4ri<\/strong>, jota k\u00e4ytimme kolmioalueen luomiseen (joka on musta ja jonka alfa\/opasiteetti on 0,3).\n<\/p>\n<p>\n  Olen siis lis\u00e4nnyt,\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  Sitten olen keskitt\u00e4nyt t\u00e4m\u00e4n osan ”kysymysmerkill\u00e4mme”, kuten ennenkin. K\u00e4yt\u00e4n py\u00f6ristetyn suorakaiteen laatikon leveytt\u00e4 300 px ja -150 px marginaalia sen keskitt\u00e4miseksi kysymysmerkkiin n\u00e4hden.\n<\/p>\n<pre><code>top: -20px;\nwidth:300px;\nmargin-left: -150px;<\/code><\/pre>\n<p>\n  Nyt tehd\u00e4\u00e4n pehmusteet ja py\u00f6ristet\u00e4\u00e4n suorakulmion reunat (raja-s\u00e4dett\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4).\n<\/p>\n<pre><code>border-radius: 10px;\ncolor: #fff;\npadding: 14px;<\/code><\/pre>\n<p>\n  T\u00e4m\u00e4 asettaa my\u00f6s py\u00f6ristetyn suorakulmion sis\u00e4ll\u00e4 olevan tekstin v\u00e4rin valkoiseksi (#fff).\n<\/p>\n<p>\n  Nyt sis\u00e4ll\u00f6n n\u00e4ytt\u00e4v\u00e4 py\u00f6ristetty suorakaidealue on valmis. Mutta silti sit\u00e4 ei <strong>ole sijoitettu oikein<\/strong>. Nykyinen HTML-sivu n\u00e4ytt\u00e4\u00e4 alla esitetylt\u00e4.\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  Pohjimmiltaan py\u00f6ristetty suorakaide <strong>peitt\u00e4\u00e4 luomamme ”kolmio”-alueen yl\u00e4puolella<\/strong>, koska sek\u00e4 ::ennen ett\u00e4 ::after k\u00e4ytt\u00e4v\u00e4t samaa marginaalia ja ne on sijoitettu 20 pikseli\u00e4 kysymysmerkin yl\u00e4puolelle.\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  Meid\u00e4n on <strong>tuotava py\u00f6ristetty suorakaidelaatikko juuri aiemmin luomamme kolmion muotoisen osan yl\u00e4puolelle<\/strong>, jotta ne molemmat yhdess\u00e4 n\u00e4kyv\u00e4t <strong>keskustelulaatikona<\/strong>.\n<\/p>\n<p>\n  Emme tied\u00e4, mik\u00e4 on py\u00f6ristetyn suorakulmion tarkka korkeus sijoittaaksemme sen kolmion yl\u00e4puolelle, mutta haluamme <strong>muuttaa py\u00f6ristetyn suorakulmion 100 % korkeudesta pystysuoraan<\/strong> siten, ett\u00e4 se sijoitetaan juuri kolmion yl\u00e4puolelle.\n<\/p>\n<p>\n  Koska molemmat elementit (kolmio ja py\u00f6ristetty suorakulmio) k\u00e4ytt\u00e4v\u00e4t <code>top: -20px;<\/code>, meid\u00e4n on vain <strong>muutettava py\u00f6ristetyn suorakulmion yl\u00e4osa pystysuunnassa pikselin korkeudeksi,<\/strong> joka on yht\u00e4 suuri kuin sen oma korkeus.\n<\/p>\n<p>\n  T\u00e4t\u00e4 varten k\u00e4yt\u00e4mme<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  Nyt meill\u00e4 on kunnollinen rakenne, joka n\u00e4ytt\u00e4\u00e4 tietolaatikolta.\n<\/p>\n<h5>\n  Vaihe 7: Hanki todelliset tiedot ty\u00f6kaluvihjeest\u00e4<br \/>\n<\/h5>\n<p>\n  Viimeinen haasteemme on saada ty\u00f6kaluvihjeeseen oikea sis\u00e4lt\u00f6, joka sis\u00e4lt\u00e4\u00e4 enemm\u00e4n tietoa.\n<\/p>\n<p>\n  Muista, ett\u00e4 olimme sijoittaneet sis\u00e4ll\u00f6n, jonka pit\u00e4isi n\u00e4ky\u00e4 ty\u00f6kaluvihjeess\u00e4 HTML-tiedostoomme.\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  CSS:n avulla voimme napata attribuutin HTML-elementist\u00e4. Teemme sen k\u00e4ytt\u00e4m\u00e4ll\u00e4 <strong>attr()<\/strong> :t\u00e4 <strong>.tooltip::n j\u00e4lkeen pseudoCSS:ss\u00e4<\/strong>.\n<\/p>\n<p>\n  Joten sen sijaan,<code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  Aiomme k\u00e4ytt\u00e4\u00e4<code>content: attr(data-tooltip);<\/code>\n<\/p>\n<p>\n  T\u00e4ss\u00e4 ” <strong>data-ty\u00f6kaluvinkki<\/strong> ” on HTML-m\u00e4\u00e4ritteemme.\n<\/p>\n<p>\n  K\u00e4ytt\u00e4m\u00e4ll\u00e4 attribuuttia, jonka annoimme sis\u00e4ll\u00f6lle HTML-muodossa, voimme kutsua t\u00e4t\u00e4 sis\u00e4lt\u00f6\u00e4 ja n\u00e4ytt\u00e4\u00e4 sen pseudo-CSS:ss\u00e4mme. T\u00e4m\u00e4n tulos on alla olevan kuvan mukainen,\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  Nyt. meid\u00e4n tarvitsee vain tehd\u00e4 ty\u00f6kaluvihjest\u00e4mme n\u00e4kym\u00e4t\u00f6n alussa ja se tulee n\u00e4kyviin vain, kun k\u00e4ytt\u00e4j\u00e4t pit\u00e4v\u00e4t hiiren osoittimen kysymysmerkin (?) p\u00e4\u00e4ll\u00e4.\n<\/p>\n<p>\n  T\u00e4m\u00e4 on eritt\u00e4in helppo tehd\u00e4.\n<\/p>\n<p>\n  Jotta ty\u00f6kaluvihjeest\u00e4 tulisi n\u00e4kym\u00e4t\u00f6n alussa, <strong>teemme sen opasiteetiksi ”0”<\/strong> seuraavassa aiemmin kirjoittamassamme pseudo-CSS:ss\u00e4.\n<\/p>\n<pre><code>.tooltip::before .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\n}<\/code><\/pre>\n<p>\n  Hover-tehostetta varten lis\u00e4\u00e4mme uuden pseudo-CSS:n style.css-tiedostomme alaosaan. Tehd\u00e4\u00e4n <strong>opasiteetiksi ”1”<\/strong> osoitintilalle, jotta ty\u00f6kaluvihje n\u00e4ytet\u00e4\u00e4n vain osoitinta liikuttaessa.\n<\/p>\n<pre><code>\/* CSS for Hover effects *\/\n \ntooltip:hover::before.tooltip:hover::after{\nOpacity:1;\n}<\/code><\/pre>\n<p>\n  T\u00e4m\u00e4 pseudo-CSS m\u00e4\u00e4ritt\u00e4\u00e4 vain leijutun tilan, koska olemme k\u00e4ytt\u00e4neet ”:hover” p\u00e4\u00e4-CSS:n .-ty\u00f6kaluvihjeen j\u00e4lkeen.\n<\/p>\n<p>\n  Nyt CSS-ty\u00f6kaluvinkkimme on valmis.\n<\/p>\n<p>\n  Mutta ty\u00f6kaluvihjeen siirtyminen ei ole niin sujuvaa kuin odotit.\n<\/p>\n<p>\n  Voit tehd\u00e4 siirtym\u00e4tehosteista entist\u00e4 parempia k\u00e4ytt\u00e4m\u00e4ll\u00e4 CSS:\u00e4\u00e4. T\u00e4t\u00e4 varten sinun tarvitsee vain lis\u00e4t\u00e4 alla oleva siirtym\u00e4s\u00e4\u00e4nt\u00f6 CSS:\u00e4\u00e4n ::before ja ::after pseudo-luokille.\n<\/p>\n<p>\n  Saat lis\u00e4tietoja siirtym\u00e4tyyleist\u00e4, joita voidaan tehd\u00e4 CSS:n avulla, lukemalla artikkelimme ” <a href=\"https:\/\/inform.click\/fi\/herata-verkkosivusi-henkiin-css-animaatioilla-ja-siirtymilla\/\" title=\"CSS-animaatiot ja siirtym\u00e4t\">CSS-animaatiot ja siirtym\u00e4t<\/a> ”.\n<\/p>\n<pre><code>.tooltip::before.tooltip::after {\ntransition: all ease 0.3s;\n}<\/code><\/pre>\n<p>\n  T\u00e4m\u00e4 prosessi on paljon helpompi ja v\u00e4hemm\u00e4n monimutkainen verrattuna ty\u00f6kaluvihjeen toteuttamiseen JavaScriptill\u00e4.\n<\/p>\n<p>\n  Etsi viitteesi lopullinen HTML- ja CSS-tiedosto harjoittelemaan t\u00e4t\u00e4.\n<\/p>\n<h4>\n  Lopullinen HTML-tiedosto ty\u00f6kaluvihjeen testaamista varten<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>Lopullinen CSS-tiedosto Ty\u00f6kaluvihjeen luominen<\/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  Katso <a href=\"http:\/\/www.instantshift.com\/demo\/css-tooltip\/\" target=\"_blank\" rel=\"noopener\">Live CSS -ty\u00f6kaluvinkki<\/a> toiminnassa.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  : <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>Tied\u00e4t varmaan jo, mik\u00e4 ty\u00f6kaluvihje on. Ty\u00f6kaluvinkki on kuvake tai teksti, jonka p\u00e4\u00e4lle viem\u00e4ll\u00e4 saat lis\u00e4tietoja kuplassa tai ponnahdusikkunassa. Ty\u00f6kaluvinkkej\u00e4 l\u00f6ytyy yleens\u00e4 lomakkeista, mutta voit sijoittaa ne sinne, miss\u00e4 k\u00e4ytt\u00e4j\u00e4t tarvitsevat lis\u00e4tietoja. Yll\u00e4 olevassa kuvassa ympyr\u00e4, jonka sis\u00e4ll\u00e4 on kysymysmerkki, n\u00e4ytt\u00e4\u00e4 ty\u00f6kaluvihjeen. Kun hiiren osoitin vie sen p\u00e4\u00e4lle, t\u00e4m\u00e4 ty\u00f6kaluvinkki antaa lis\u00e4tietoja siit\u00e4, mink\u00e4 tyyppisi\u00e4 merkkej\u00e4 salasanasi tulee sis\u00e4lt\u00e4\u00e4. Voit hankkia kehyksi\u00e4 ty\u00f6kaluvihjeiden toteuttamiseksi verkkosivustollasi, mutta useimmiten n\u00e4m\u00e4 puitteet k\u00e4ytt\u00e4v\u00e4t JavaScripti\u00e4 t\u00e4m\u00e4n saavuttamiseksi. T\u00e4ss\u00e4 \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":[66,53,118],"tags":[],"class_list":["post-249446","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-6","category-web-ja-wordpress-2","category-web-tyokalut"],"_links":{"self":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts\/249446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/comments?post=249446"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts\/249446\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/media\/223378"}],"wp:attachment":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/media?parent=249446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/categories?post=249446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/tags?post=249446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}