{"id":247500,"date":"2022-12-23T11:14:00","date_gmt":"2022-12-23T08:14:00","guid":{"rendered":"https:\/\/inform.click\/tooriistaspikri-loomine-css-i-abil\/"},"modified":"2022-12-23T11:17:00","modified_gmt":"2022-12-23T08:17:00","slug":"tooriistaspikri-loomine-css-i-abil","status":"publish","type":"post","link":"https:\/\/inform.click\/et\/tooriistaspikri-loomine-css-i-abil\/","title":{"rendered":"T\u00f6\u00f6riistaspikri loomine CSS-i abil"},"content":{"rendered":"

\n T\u00f5en\u00e4oliselt teate juba, mis on t\u00f6\u00f6riistavihje.\n<\/p>\n

\n T\u00f6\u00f6riistavihje on ikoon v\u00f5i tekst, mille kohal kursorit h\u00f5ljutades kuvatakse mulli v\u00f5i h\u00fcpikaknana rohkem teavet.\n<\/p>\n

\n Tavaliselt leiate t\u00f6\u00f6riistavihjeid vormidest, kuid v\u00f5ite need paigutada k\u00f5ikjale, kus kasutajad vajavad lisateavet.\n<\/p>\n

\n \u00dclaltoodud pildil n\u00e4itab k\u00fcsim\u00e4rgiga ring kohtspikri<\/strong>. Kui h\u00f5ljute kursorit, annab see kohtspikker rohkem teavet m\u00e4rkide t\u00fc\u00fcpide kohta, mida teie parool peab sisaldama.\n<\/p>\n

\n Saate hankida raamistikke t\u00f6\u00f6riistavihjete juurutamiseks oma veebisaidil, kuid enamasti kasutavad need raamistikud selle saavutamiseks JavaScripti.\n<\/p>\n

\n Selles artiklis \u00f5pime, kuidas luua suhteliselt lihtsal viisil vihjeid, kasutades ainult CSS -i.<\/strong>\n<\/p>\n

\n Enne alustamist on l\u00f5plik HTML- ja CSS-fail t\u00f6\u00f6riistavihje rakendamiseks saadaval selle ajaveebi l\u00f5pus<\/strong>. Oleme \u00fcksikasjalikult kirjeldanud k\u00f5iki HTML-is ja CSS-is kasutatud elemente, et t\u00f6\u00f6riistavihjet v\u00f5imalikult lihtsal viisil rakendada.\n<\/p>\n

\n P\u00e4rast selle artikli t\u00e4ielikku l\u00e4bimist saate t\u00f6\u00f6riistavihje funktsiooni rakendada mis tahes veebisaidil, kasutades ainult HTML-i ja CSS-i.\n<\/p>\n

\n Nii et alustame\u2026\n<\/p>\n

\n Alustuseks loome lihtsa HTML-lehe, mis k\u00fcsib parooli.\n<\/p>\n

\n 1 samm: lihtsa HTML-lehe loomine kuvamiseks
\n<\/h5>\n

\n Siin on vormilehe p\u00f5hiline HTML-kood<\/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>Nagu n\u00e4ete, oleme \u00fclalolevas html-is linkinud faili \" <strong>style.css \".<\/strong><\/code>\n<\/p>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<p>\n  <code>Loome selle CSS-faili abil t\u00f6\u00f6riistaspikri.<\/code>\n<\/p>\n<p>\n  <code>Kasutame t\u00f6\u00f6riistavihje funktsiooni proovimiseks <strong>lihtsat vormi .<\/strong> Sellel vormil on ainult \u00fcks v\u00e4li, millel on silt \" <strong>Parool<\/strong> \", kuna me kasutame seda ainult t\u00f6\u00f6riistaspikrite toimimise illustreerimiseks.<\/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>Oleme CSS-i abil t\u00f6\u00f6riistavihje funktsiooni rakendamiseks kasutanud klassi \" <strong>kohtspikker \".<\/strong> Seda arutame j\u00e4rgmises osas.<\/code>\n<\/p>\n<h5>\n  <code>2 samm: meie HTML-lehe p\u00f5hilised CSS-stiilid<\/code><br \/>\n<\/h5>\n<p>\n  <code>Enne t\u00f6\u00f6riistavihje jaoks CSS-i loomist peame <strong>oma html-lehe jaoks looma m\u00f5ned p\u00f5hilised CSS-stiilid<\/strong>.<\/code>\n<\/p>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}<\/code><\/code><\/pre>\n<p>\n  See annab kena rohelise taustaga html-lehe. Samuti oleme valinud verdana fondi ja fondi v\u00e4rvi valgeks.\n<\/p>\n<pre><code>form{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}<\/code><\/pre>\n<p>\n  Oleme vormi paigutanud “suhteliselt”, maksimaalse laiusega 600 pikslit ja veerisega 20%.\n<\/p>\n<pre><code>Formlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}<\/code><\/pre>\n<p>\n  Vormisildi klass on ette n\u00e4htud kasutatava sildi teksti fondi suuruse ja t\u00e4htede vahe m\u00e4\u00e4ramiseks.\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  Siin on vormiv\u00e4lja stiilid. Selles stiilis pole midagi keerulist. Oleme andnud <strong>sobiva veerise<\/strong> ja <strong>polsterduse<\/strong> ning m\u00e4\u00e4ranud vormiv\u00e4ljade <strong>fondi suuruse<\/strong> ja <strong>v\u00e4rvi .<\/strong>\n<\/p>\n<p>\n  Nii et need on meie vormilehe vaike-css-stiilid, mida kasutame, et n\u00e4idata, kuidas CSS-i abil t\u00f6\u00f6riistaspikri funktsiooni rakendada.\n<\/p>\n<h3>\n  Loome CSS-i abil t\u00f6\u00f6riistavihje<br \/>\n<\/h3>\n<h5>\n  4 samm: t\u00f6\u00f6riistavihje CSS-stiil<br \/>\n<\/h5>\n<p>\n  V\u00f5ib-olla olete m\u00e4rganud, et oleme oma html-failis kasutanud klassi ” <strong>t\u00f6\u00f6riistavihje “.<\/strong> See on stiil, mida hakkame rakendama k\u00fcsim\u00e4rgim\u00e4rgi (?”) jaoks, mis toimib meie t\u00f6\u00f6riistaspikrina.\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  Esmalt peame kohtspikri suhteliselt positsioneerima, rakendades funktsiooni <strong>asukoht: suhteline;<\/strong> ” stiilis. T\u00f6\u00f6riistavihje suhtelise positsioneerimise p\u00f5hjus on see, et me kasutame selles meetodis hiljem <strong>pseudoelemente<\/strong>, mida saab positsioneerida “absoluutselt”. Seega tahame, et need pseudoklassid oleksid selle elemendi suhtes “absoluutsed”.\n<\/p>\n<p>\n  J\u00e4rgmisena anname t\u00f6\u00f6riistaspikrile <strong>musta taustav\u00e4rvi<\/strong>, kasutades meetodit rgba(),\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  milles r,g,b t\u00e4histab punast, rohelist ja sinist ning a t\u00e4histab ‘ <strong>alpha<\/strong> ‘, mis <strong>reguleerib l\u00e4bipaistmatust<\/strong>.\n<\/p>\n<p>\n  Teeme oma t\u00f6\u00f6riistaspikkeringile musta tausta ja v\u00e4hendame selle l\u00e4bipaistmatust 0,3-ni, et muuta see <strong>tumerohelise v\u00e4rviga<\/strong> sarnaseks .\n<\/p>\n<p>\n  J\u00e4rgmisena rakendame k\u00fcsim\u00e4rgim\u00e4rgile (?”), et meie kohtspikker n\u00e4eks hea v\u00e4lja.\n<\/p>\n<pre><code>padding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;<\/code><\/pre>\n<p>\n  \u00dclaltoodud CSS-iga lisame ringile, mis \u00fcmbritseb “?”, ja muudame \u00e4\u00e4rise raadiuse 100%, et muuta see t\u00e4isringiks.\n<\/p>\n<p>\n  Fondi suurus m\u00e4\u00e4rab “?” suuruse. m\u00e4rk, mida me selles n\u00e4ites oma vihjena kasutame.\n<\/p>\n<p>\n  Lisame ka ” <strong>cursor:help;<\/strong> ” CSS-is annab see hiirekursori alla k\u00fcsim\u00e4rgi, kui h\u00f5ljutate kursorit selle elemendi kohal, nagu on n\u00e4idatud alloleval pildil.\n<\/p>\n<p>\n  Toot-tip sisaldab sisu (selles n\u00e4ites anname rohkem teavet m\u00e4rkide kohta, mis tuleks v\u00e4ljale “parool” lisada).\n<\/p>\n<h5>\n  5 samm: andke t\u00f6\u00f6riistaspikri sisu HTML-i sisse<br \/>\n<\/h5>\n<p>\n  J\u00e4rgmine v\u00e4ljakutse meie ees on see, kuhu see sisu kohtspikri sees paigutada?\n<\/p>\n<p>\n  Selle \u00fclesande t\u00e4itmiseks lisame varem loodud HTML-faili <strong>atribuudi .<\/strong>\n<\/p>\n<pre><code><span class=\"tooltip\">?<\/span><\/code><\/pre>\n<p>\n  Siin ei soovi me lisada t\u00e4iendavaid m\u00e4rgistusi, nagu n\u00e4iteks uue ulatuse loomine, et lisada kohtspikrisse sisu.\n<\/p>\n<p>\n  Sellesse ulatusse saame lisada kohtspikri sisu.\n<\/p>\n<p>\n  Teeme seda atribuudi ” <strong>andmed ” lisamisega.<\/strong> Andmeatribuudi nimi on siin ” <strong>t\u00f6\u00f6riistavihje<\/strong> “.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"\">?<\/span><\/code><\/pre>\n<p>\n  <strong>data-tooltip<\/strong> on meie andmeatribuut, mille abil lisame kohtspikri sees kuvatava sisu.\n<\/p>\n<p>\n  J\u00e4rgmisena lisame oma andmete t\u00f6\u00f6riistavihje atribuudi sisse juhised selle m\u00e4rgi kohta, mis peaks paroolis olema.\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\u00fc\u00fcd oleme <strong>lisanud teksti<\/strong>, mis peaks ilmuma kohtspikri sisse. J\u00e4rgmisena \u00f5pime, kuidas <strong>muuta see tekst kohtspikris kuvamiseks,<\/strong> kui kasutajad h\u00f5ljutavad kursorit k\u00fcsim\u00e4rgi kohal.\n<\/p>\n<h5>\n  6 samm: t\u00f6\u00f6riistavihje konteineri loomine pseudoelementide abil<br \/>\n<\/h5>\n<p>\n  Esiteks peame looma konteinerid, milles tuleb kuvada kohtspikri sisu.\n<\/p>\n<p>\n  Selleks p\u00f6\u00f6rdume tagasi faili style.css juurde ja teeme <strong>pseudoelemendid klassi<\/strong> <strong>.tooltip<\/strong> jaoks .\n<\/p>\n<p>\n  Loome pseudoklassid <strong>::after<\/strong> ja <strong>::before, et meie kohtspikri sisu ilmuks.<\/strong>\n<\/p>\n<p>\n  P\u00f5him\u00f5tteliselt saate pseudoklassi (nt ” <strong>::after<\/strong> “) kasutades sihtida positsiooni vahetult p\u00e4rast p\u00f5hiklassi kasutavat elementi ja selle positsiooni stiili.\n<\/p>\n<p>\n  Samamoodi saate pseudoklassi ::before kasutades kujundada positsiooni vahetult enne elementi, kus kasutatakse p\u00f5hiklassi (antud juhul on see element “?”).\n<\/p>\n<p>\n  See on v\u00e4ga kasulik pseudoklass lehele lisasisu sisestamiseks.\n<\/p>\n<p>\n  Loome “tootlip” jaoks pseudoklassi, nagu allpool n\u00e4idatud.\n<\/p>\n<pre><code>.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\n}<\/code><\/pre>\n<p>\n  Loome \u00fchise klassi stiilide ::enne ja ::after jaoks.\n<\/p>\n<p>\n  Siin oleme <strong>absoluutselt paigutanud<\/strong> m\u00f5lemad stiilid ::enne ja ::after, sest tahame, et need asetseksid k\u00fcsim\u00e4rgi kohal ja et need oleksid tsentreeritud t\u00e4he “?” kohal.\n<\/p>\n<p>\n  T\u00f6\u00f6riistaspikri keskkohaks m\u00e4rki “?” peame kasutama ” <strong>vasak:50%;<\/strong> ” atribuut.\n<\/p>\n<p>\n  N\u00fc\u00fcd kasutame t\u00f6\u00f6riistaspikri allosas oleva v\u00e4ikese kolmnurga kujundamiseks <strong>::enne .<\/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> kasutatakse kohtspikri sisu stiili kujundamiseks.\n<\/p>\n<p>\n  Vaatame, kuidas seda tehakse.\n<\/p>\n<p>\n  K\u00f5igepealt loome t\u00f6\u00f6riistaspikri allosas v\u00e4ikese kolmnurga.\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  Peaksime kasutama <strong>sisu:””;<\/strong> atribuut, mis n\u00e4itab, et sellel elemendil pole sisu. Kuna oleme lisanud <strong>t\u00fchja sisu<\/strong>, saame seda n\u00fc\u00fcd kujundada.\n<\/p>\n<p>\n  CSS-is saame <strong>kolmnurki luua<\/strong> atribuudi <strong>border-width<\/strong> abil .\n<\/p>\n<p>\n  Selle joone j\u00e4rgi,\n<\/p>\n<p>\n  <code>border-width: 10px 8px 08px;<\/code>\n<\/p>\n<p>\n  Oleme t\u00e4psustanud, et \u00e4\u00e4rise laius \u00fcleval on 10 pikslit, paremal on 8 pikslit, alla 0 pikslit ja vasakul 8 pikslit.\n<\/p>\n<p>\n  See loob meie jaoks kolmnurga.\n<\/p>\n<p>\n  J\u00e4rgmisena loome selle jaotise jaoks <strong>kindla \u00e4\u00e4rise ja<\/strong> <strong>muudame parema, alumise ja vasakpoolse ala l\u00e4bipaistvaks<\/strong>, nii et n\u00e4ha on ainult \u00fclemine “kolmnurga” ala.\n<\/p>\n<pre><code>border-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code><\/pre>\n<p>\n  P\u00e4rast \u00e4\u00e4rise tahkeks muutmist rakendame v\u00e4rvid \u00e4\u00e4rise \u00fclemisele, paremale, alumisele ja vasakule k\u00fcljele.\n<\/p>\n<p>\n  Peaksime kasutama sama ” <strong>border-color:rgba();<\/strong> ” atribuut, mida kasutasime k\u00fcsim\u00e4rgi \u00fcmber oleva ringi kujundamiseks.\n<\/p>\n<p>\n  <code>border-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code>\n<\/p>\n<p>\n  Siin oleme andnud \u00e4\u00e4rise <strong>\u00fclemise osa jaoks<\/strong> <strong>musta v\u00e4rvi<\/strong> (0,0,0) ja <strong>v\u00e4hendanud selle l\u00e4bipaistmatust 0,3<\/strong> -ni, et anda meile tumeroheline v\u00e4rv, t\u00e4pselt nagu tegime ringi jaoks stiili saamiseks \u201e?”.\n<\/p>\n<p>\n  Varjasime \u00e4\u00e4rise <strong>parema, alumise ja vasaku<\/strong> osa, muutes <strong>l\u00e4bipaistvaks<\/strong>.\n<\/p>\n<p>\n  Isegi kui oleksime loonud parem- ja vasakpoolsed piirded, on need l\u00e4bipaistvad. Ainus v\u00e4rviline \u00e4\u00e4ris on \u00fclemine \u00e4\u00e4ris. Selle tulemuseks on see, et <strong>peidetud \u00e4\u00e4ris vasakul ja paremal annab meile kolmnurga efekti koos v\u00e4rvilise \u00fclemise \u00e4\u00e4risega<\/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  L\u00f5pptulemus n\u00e4eb v\u00e4lja selline.\n<\/p>\n<p>\n  Kui otsite Google'is “i”, saate selle kohta rohkem teada.\n<\/p>\n<p>\n  Selle kolmnurga paigutamiseks ringist k\u00f5rgemale kasutatakse atribuute ” <strong>Veerine vasak<\/strong> ” ja ” <strong>\u00fclemine “.<\/strong>\n<\/p>\n<pre><code>top: -20px;\nmargin-left: -8px;<\/code><\/pre>\n<p>\n  N\u00fc\u00fcd <strong>oleme loonud<\/strong> t\u00f6\u00f6riistaspikri allosas kolmnurkse saba, mis osutab m\u00e4rgile \u201e?” m\u00e4rk.\n<\/p>\n<p>\n  J\u00e4rgmiseks peame kujundama t\u00f6\u00f6riistaspikri \u00fcmardatud ristk\u00fcliku piirkonna, kus teave kuvatakse. Selleks kasutame atribuuti <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  Seet\u00f5ttu olen kasutanud,\n<\/p>\n<p>\n  <code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  Pseudoklassi avaosas .tooltip <strong>::after<\/strong>\n<\/p>\n<p>\n  N\u00fc\u00fcd peame andma sellele jaotisele <strong>sama taustav\u00e4rvi<\/strong>, mida kasutasime kolmnurga piirkonna loomisel (mis on must, alfa\/l\u00e4bipaistmatusega 0,3).\n<\/p>\n<p>\n  Seega olen lisanud,\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  Seej\u00e4rel asetasin selle jaotise keskele meie “k\u00fcsim\u00e4rgiga”, nagu varem. Kasutan \u00fcmardatud ristk\u00fcliku kasti laiust 300 px ja selle tsentreerimiseks k\u00fcsim\u00e4rgi suhtes veerist -150 px.\n<\/p>\n<pre><code>top: -20px;\nwidth:300px;\nmargin-left: -150px;<\/code><\/pre>\n<p>\n  N\u00fc\u00fcd teeme polsterduse ja teeme ristk\u00fcliku servad \u00fcmaraks (rakendatud \u00e4\u00e4rise raadiusega).\n<\/p>\n<pre><code>border-radius: 10px;\ncolor: #fff;\npadding: 14px;<\/code><\/pre>\n<p>\n  See m\u00e4\u00e4rab ka \u00fcmardatud ristk\u00fcliku sees oleva teksti v\u00e4rviks valge (#fff).\n<\/p>\n<p>\n  N\u00fc\u00fcd on sisu kuvav \u00fcmardatud ristk\u00fclikuala valmis. Kuid see pole <strong>siiski \u00f5igesti paigutatud<\/strong>. Praegune HTML-leht n\u00e4eb v\u00e4lja nagu allpool n\u00e4idatud.\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  P\u00f5him\u00f5tteliselt on \u00fcmardatud ristk\u00fclik <strong>\u00fclekatted meie loodud “kolmnurga” piirkonna kohal<\/strong>, kuna nii ::enne kui ka ::after kasutavad sama veerist ja on paigutatud 20 pikslit k\u00fcsim\u00e4rgist k\u00f5rgemale.\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  Peame <strong>tooma \u00fcmardatud ristk\u00fclikukasti vahetult<\/strong> varem loodud kolmnurkse jaotise kohale, et need m\u00f5lemad koos ilmuksid <strong>vestluskastina<\/strong>.\n<\/p>\n<p>\n  Me ei tea, milline on \u00fcmardatud ristk\u00fcliku t\u00e4pne k\u00f5rgus, et asetada see kolmnurga kohale, vaid tahame <strong>teisendada 100% \u00fcmardatud ristk\u00fcliku k\u00f5rgust vertikaalselt<\/strong> nii, et see asetataks kolmnurga kohale.\n<\/p>\n<p>\n  Kuna m\u00f5lemad need elemendid (kolmnurk ja \u00fcmardatud ristk\u00fclik) on kasutusel <code>top: -20px;<\/code>, peame lihtsalt <strong>teisendama \u00fcmardatud ristk\u00fcliku \u00fclaosa vertikaalselt piksli k\u00f5rguseks, mis on<\/strong> v\u00f5rdne selle enda k\u00f5rgusega.\n<\/p>\n<p>\n  Selleks kasutame,<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\u00fc\u00fcd on meil korralik struktuur, mis n\u00e4eb v\u00e4lja nagu infokast.\n<\/p>\n<h5>\n  7 samm: tegeliku teabe hankimine vihjesse<br \/>\n<\/h5>\n<p>\n  Meie viimane v\u00e4ljakutse on hankida kohtspikrisse \u00f5ige sisu, mis sisaldab rohkem teavet.\n<\/p>\n<p>\n  Pidage meeles, et oleme paigutanud sisu, mis peaks ilmuma meie HTML-faili kohtspikri sisse.\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-i abil saame haarata HTML-elemendist atribuudi. Teeme seda <strong>attr()<\/strong> abil <strong>.tooltip:: p\u00e4rast<\/strong> pseudo-CSS-i.\n<\/p>\n<p>\n  Nii et selle asemel,<code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  Me hakkame kasutama<code>content: attr(data-tooltip);<\/code>\n<\/p>\n<p>\n  Siin on ” <strong>andmete t\u00f6\u00f6riistavihje<\/strong> ” meie HTML-i atribuut.\n<\/p>\n<p>\n  Kasutades atribuuti, mille me HTML-i sisu jaoks andsime, saame seda sisu nimetada ja n\u00e4idata oma pseudo-CSS-is. Selle tulemus on selline, nagu allpool n\u00e4idatud,\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\u00fc\u00fcd. k\u00f5ik, mida me tegema peame, on muuta meie t\u00f6\u00f6riistavihje alguses n\u00e4htamatuks ja kuvada ainult siis, kui kasutajad h\u00f5ljutavad kursorit k\u00fcsim\u00e4rgi (?) kohal.\n<\/p>\n<p>\n  Seda on v\u00e4ga lihtne teha.\n<\/p>\n<p>\n  T\u00f6\u00f6riistaspikri alguses n\u00e4htamatuks muutmiseks muudame j\u00e4rgmises pseudo-CSS-is <strong>selle l\u00e4bipaistmatuse v\u00e4\u00e4rtuseks 0<\/strong>, mille oleme varem kirjutanud.\n<\/p>\n<pre><code>.tooltip::before .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\n}<\/code><\/pre>\n<p>\n  Hover-efekti jaoks lisame faili style.css allossa uue pseudo-CSS-i. Teeme kursoriga h\u00f5ljutatud <strong>oleku l\u00e4bipaistmatuse v\u00e4\u00e4rtuseks 1,<\/strong> nii et t\u00f6\u00f6riistavihje kuvatakse ainult h\u00f5ljutamisel.\n<\/p>\n<pre><code>\/* CSS for Hover effects *\/\n \ntooltip:hover::before.tooltip:hover::after{\nOpacity:1;\n}<\/code><\/pre>\n<p>\n  See pseudo-CSS m\u00e4\u00e4rab ainult h\u00f5ljuva oleku, kuna oleme kasutanud peamise CSS-i t\u00f6\u00f6riistavihje j\u00e4rel “:hover”\n<\/p>\n<p>\n  N\u00fc\u00fcd on meie CSS-i t\u00f6\u00f6riistavihje valmis.\n<\/p>\n<p>\n  Kuid t\u00f6\u00f6riistaspikri \u00fcleminek ei ole nii sujuv, kui ootate.\n<\/p>\n<p>\n  CSS-i abil saate \u00fcleminekuefekte veelgi paremaks muuta. Selleks peate lihtsalt lisama CSS-i alloleva \u00fcleminekureegli ::enne ja ::after pseudoklasside jaoks.\n<\/p>\n<p>\n  CSS-i abil tehtavate \u00fcleminekustiilide kohta lisateabe saamiseks lugege meie artiklit ” <a href=\"https:\/\/inform.click\/et\/muutke-oma-veebilehed-ellu-css-animatsioonide-ja-uleminekutega\/\" title=\"CSS-animatsioonid ja \u00fcleminekud\">CSS-animatsioonid ja \u00fcleminekud<\/a> “.\n<\/p>\n<pre><code>.tooltip::before.tooltip::after {\ntransition: all ease 0.3s;\n}<\/code><\/pre>\n<p>\n  See protsess on palju lihtsam ja v\u00e4hem keerukas v\u00f5rreldes JavaScripti abil t\u00f6\u00f6riistavihje rakendamisega.\n<\/p>\n<p>\n  Selle harjutamiseks otsige \u00fcles l\u00f5plik HTML- ja CSS-fail.\n<\/p>\n<h4>\n  L\u00f5plik HTML-fail t\u00f6\u00f6riistaspikri testimiseks<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>L\u00f5plik CSS-fail t\u00f6\u00f6riistaspikri loomine<\/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  Vaadake <a href=\"http:\/\/www.instantshift.com\/demo\/css-tooltip\/\" target=\"_blank\" rel=\"noopener\">reaalajas CSS<\/a> -i t\u00f6\u00f6riistavihjet t\u00f6\u00f6s.\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>T\u00f5en\u00e4oliselt teate juba, mis on t\u00f6\u00f6riistavihje. T\u00f6\u00f6riistavihje on ikoon v\u00f5i tekst, mille kohal kursorit h\u00f5ljutades kuvatakse mulli v\u00f5i h\u00fcpikaknana rohkem teavet. Tavaliselt leiate t\u00f6\u00f6riistavihjeid vormidest, kuid v\u00f5ite need paigutada k\u00f5ikjale, kus kasutajad vajavad lisateavet. \u00dclaltoodud pildil n\u00e4itab k\u00fcsim\u00e4rgiga ring kohtspikri. Kui h\u00f5ljute kursorit, annab see kohtspikker rohkem teavet m\u00e4rkide t\u00fc\u00fcpide kohta, mida teie parool peab sisaldama. Saate hankida raamistikke t\u00f6\u00f6riistavihjete juurutamiseks oma veebisaidil, kuid enamasti kasutavad need raamistikud selle saavutamiseks JavaScripti. Selles \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":[65,117,52],"tags":[],"class_list":["post-247500","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-5","category-veebitooriistad","category-web-ja-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts\/247500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/comments?post=247500"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts\/247500\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/media\/223378"}],"wp:attachment":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/media?parent=247500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/categories?post=247500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/tags?post=247500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}