{"id":257954,"date":"2022-12-23T11:14:00","date_gmt":"2022-12-23T08:14:00","guid":{"rendered":"https:\/\/inform.click\/tworzenie-podpowiedzi-za-pomoca-css\/"},"modified":"2022-12-23T11:22:00","modified_gmt":"2022-12-23T08:22:00","slug":"tworzenie-podpowiedzi-za-pomoca-css","status":"publish","type":"post","link":"https:\/\/inform.click\/pl\/tworzenie-podpowiedzi-za-pomoca-css\/","title":{"rendered":"Tworzenie podpowiedzi za pomoc\u0105 CSS"},"content":{"rendered":"

\n Prawdopodobnie ju\u017c wiesz, czym jest podpowied\u017a.\n<\/p>\n

\n Podpowied\u017a to ikona lub tekst, na kt\u00f3ry po najechaniu kursorem uzyskujemy wi\u0119cej informacji w dymku lub wyskakuj\u0105cym okienku.\n<\/p>\n

\n Zwykle podpowiedzi znajduj\u0105 si\u0119 w formularzach, ale mo\u017cna je umie\u015bci\u0107 wsz\u0119dzie tam, gdzie u\u017cytkownicy potrzebuj\u0105 wi\u0119cej informacji.\n<\/p>\n

\n Na powy\u017cszym obrazku okr\u0105g ze znakiem zapytania w \u015brodku pokazuje podpowied\u017a<\/strong>. Po najechaniu na ni\u0105 kursorem ta podpowied\u017a zawiera wi\u0119cej informacji o typach znak\u00f3w, kt\u00f3re musi zawiera\u0107 has\u0142o.\n<\/p>\n

\n Mo\u017cesz uzyska\u0107 frameworki do implementacji podpowiedzi w swojej witrynie, ale przez wi\u0119kszo\u015b\u0107 czasu te frameworki u\u017cywaj\u0105 JavaScript, aby to osi\u0105gn\u0105\u0107.\n<\/p>\n

\n W tym artykule nauczymy si\u0119, jak tworzy\u0107 podpowiedzi za pomoc\u0105 samego CSS<\/strong> w stosunkowo prosty spos\u00f3b.\n<\/p>\n

\n Zanim zaczniemy, ko\u0144cowy plik HTML i CSS do implementacji podpowiedzi jest dost\u0119pny na ko\u0144cu tego bloga<\/strong>. Szczeg\u00f3\u0142owo opisali\u015bmy ka\u017cdy element u\u017cywany w HTML i CSS, aby jak najpro\u015bciej zaimplementowa\u0107 podpowied\u017a.\n<\/p>\n

\n Po ca\u0142kowitym przejrzeniu tego artyku\u0142u b\u0119dziesz m\u00f3g\u0142 zaimplementowa\u0107 funkcj\u0119 podpowiedzi na dowolnej stronie internetowej przy u\u017cyciu tylko HTML i CSS.\n<\/p>\n

\n Zacznijmy wi\u0119c\u2026\n<\/p>\n

\n Zaczniemy od stworzenia prostej strony HTML z pytaniem o has\u0142o.\n<\/p>\n

\n Krok 1: Tworzenie prostej strony HTML do wy\u015bwietlania podpowiedzi
\n<\/h5>\n

\n Oto podstawowy kod HTML strony formularza<\/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>Jak wida\u0107, zamie\u015bcili\u015bmy link do naszego pliku \u201e <strong>style.css<\/strong> \" w powy\u017cszym html.<\/code>\n<\/p>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<p>\n  <code>B\u0119dziemy tworzy\u0107 podpowied\u017a przy u\u017cyciu tego pliku CSS.<\/code>\n<\/p>\n<p>\n  <code>U\u017cywamy <strong>prostego formularza<\/strong>, aby wypr\u00f3bowa\u0107 funkcj\u0119 podpowiedzi. Ten formularz ma tylko jedno pole oznaczone jako \u201e <strong>Has\u0142o<\/strong> \", poniewa\u017c u\u017cywamy go tylko do zilustrowania dzia\u0142ania podpowiedzi.<\/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>U\u017cyli\u015bmy klasy \u201e <strong>tooltip<\/strong> \", aby zaimplementowa\u0107 funkcj\u0119 podpowiedzi za pomoc\u0105 CSS. To om\u00f3wimy w nast\u0119pnej sekcji.<\/code>\n<\/p>\n<h5>\n  <code>Krok 2: Podstawowe style CSS dla naszej strony HTML<\/code><br \/>\n<\/h5>\n<p>\n  <code>Przed utworzeniem CSS dla \u201epodpowiedzi\" musimy stworzy\u0107 kilka <strong>podstawowych styl\u00f3w CSS dla naszej strony HTML<\/strong>.<\/code>\n<\/p>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}<\/code><\/code><\/pre>\n<p>\n  To da stron\u0119 HTML z \u0142adnym zielonym t\u0142em. Wybrali\u015bmy r\u00f3wnie\u017c czcionk\u0119 verdana i kolor czcionki jako bia\u0142y.\n<\/p>\n<pre><code>form{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}<\/code><\/pre>\n<p>\n  Formularz u\u0142o\u017cyli\u015bmy \u201ewzgl\u0119dnie”, z maksymaln\u0105 szeroko\u015bci\u0105 600 pikseli i marginesem 20%.\n<\/p>\n<pre><code>Formlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}<\/code><\/pre>\n<p>\n  Klasa etykiety formularza s\u0142u\u017cy do okre\u015blenia rozmiaru czcionki i odst\u0119p\u00f3w mi\u0119dzy literami dla tekstu etykiety, kt\u00f3rego b\u0119dziemy u\u017cywa\u0107.\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  Tutaj mamy style dla pola formularza. W tym stylu nie ma nic skomplikowanego. Podali\u015bmy <strong>odpowiedni margines<\/strong> i <strong>dope\u0142nienie<\/strong> wraz z <strong>okre\u015bleniem rozmiaru<\/strong> i <strong>koloru<\/strong> czcionki dla p\u00f3l formularza.\n<\/p>\n<p>\n  To s\u0105 nasze domy\u015blne style css dla naszej strony formularza, kt\u00f3rych u\u017cyjemy do zademonstrowania, jak zaimplementowa\u0107 funkcj\u0119 podpowiedzi za pomoc\u0105 CSS.\n<\/p>\n<h3>\n  Utw\u00f3rzmy podpowied\u017a za pomoc\u0105 CSS<br \/>\n<\/h3>\n<h5>\n  Krok 4: Styl CSS dla podpowiedzi<br \/>\n<\/h5>\n<p>\n  By\u0107 mo\u017ce zauwa\u017cy\u0142e\u015b, \u017ce w naszym pliku html u\u017cyli\u015bmy klasy \u201e <strong>podpowied\u017a „.<\/strong> To jest styl, kt\u00f3ry zastosujemy dla znaku zapytania (\u201e?”), kt\u00f3ry b\u0119dzie dzia\u0142a\u0142 jako podpowied\u017a.\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  Najpierw musimy ustawi\u0107 podpowied\u017a wzgl\u0119dnie, stosuj\u0105c \u201e <strong>position:wzgl\u0119dna;<\/strong> styl. Powodem wzgl\u0119dnego pozycjonowania podpowiedzi jest to, \u017ce p\u00f3\u017aniej w tej metodzie b\u0119dziemy u\u017cywa\u0107 <strong>pseudoelement\u00f3w,<\/strong> kt\u00f3re mo\u017cna ustawi\u0107 \u201ebezwzgl\u0119dnie”. Chcemy wi\u0119c, aby te pseudoklasy by\u0142y \u201eabsolutne” pozycjonowane wzgl\u0119dem tego elementu.\n<\/p>\n<p>\n  Nast\u0119pnie podajemy <strong>czarny kolor t\u0142a<\/strong> podpowiedzi za pomoc\u0105 metody rgba(),\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  gdzie r,g,b oznacza czerwony, zielony i niebieski, a a oznacza \u201e <strong>alfa<\/strong> „, kt\u00f3ra <strong>kontroluje krycie<\/strong>.\n<\/p>\n<p>\n  Dodamy czarne t\u0142o do naszego ko\u0142a podpowiedzi i zmniejszymy jego krycie do 0,3, aby przypomina\u0142o <strong>ciemnozielony kolor<\/strong>.\n<\/p>\n<p>\n  Nast\u0119pnie zastosujemy kilka podstawowych styl\u00f3w wype\u0142nienia i promienia obramowania do znaku zapytania (\u201e?”), aby nasza podpowied\u017a wygl\u0105da\u0142a dobrze.\n<\/p>\n<pre><code>padding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;<\/code><\/pre>\n<p>\n  W powy\u017cszym CSS stosujemy dope\u0142nienie do okr\u0119gu otaczaj\u0105cego \u201e?” i ustawiamy promie\u0144 obramowania na 100%, aby by\u0142 to pe\u0142ny okr\u0105g.\n<\/p>\n<p>\n  Rozmiar czcionki okre\u015bla rozmiar \u201e?” znak, kt\u00f3rego u\u017cywamy jako podpowiedzi w tym przyk\u0142adzie.\n<\/p>\n<p>\n  Dodajemy r\u00f3wnie\u017c \u201e <strong>kursor:pomoc;<\/strong> ” w CSS spowoduje to wy\u015bwietlenie znaku zapytania pod wska\u017anikiem myszy po najechaniu na ten element, jak pokazano na poni\u017cszym obrazku.\n<\/p>\n<p>\n  Podpowied\u017a zawiera pewn\u0105 tre\u015b\u0107 (w tym przyk\u0142adzie podajemy wi\u0119cej informacji o znakach, kt\u00f3re powinny znale\u017a\u0107 si\u0119 w polu \u201ehas\u0142o”).\n<\/p>\n<h5>\n  Krok 5: Podaj tre\u015b\u0107 podpowiedzi w HTML<br \/>\n<\/h5>\n<p>\n  Kolejnym wyzwaniem przed nami jest to, gdzie umie\u015bci\u0107 t\u0119 tre\u015b\u0107 w podpowiedzi?\n<\/p>\n<p>\n  Aby wykona\u0107 to zadanie, dodamy <strong>atrybut<\/strong> do utworzonego wcze\u015bniej pliku HTML.\n<\/p>\n<pre><code><span class=\"tooltip\">?<\/span><\/code><\/pre>\n<p>\n  Tutaj nie chcemy dodawa\u0107 \u017cadnych dodatkowych znacznik\u00f3w, takich jak tworzenie kolejnego zakresu w celu dodania tre\u015bci wewn\u0105trz podpowiedzi.\n<\/p>\n<p>\n  W tym zakresie mo\u017cemy uwzgl\u0119dni\u0107 tre\u015b\u0107 podpowiedzi.\n<\/p>\n<p>\n  Zrobimy to, dodaj\u0105c atrybut \u201e <strong>data „.<\/strong> Nazw\u0105 atrybutu danych b\u0119dzie tutaj \u201e <strong>podpowied\u017a<\/strong> „.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"\">?<\/span><\/code><\/pre>\n<p>\n  <strong>data-tooltip<\/strong> to nasz atrybut danych, za pomoc\u0105 kt\u00f3rego dodajemy tre\u015b\u0107, kt\u00f3ra powinna by\u0107 wy\u015bwietlana wewn\u0105trz podpowiedzi.\n<\/p>\n<p>\n  Nast\u0119pnie dodamy instrukcje dotycz\u0105ce znaku, kt\u00f3ry powinien by\u0107 obecny w ha\u015ble, wewn\u0105trz naszego atrybutu data-tooltip.\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  Teraz <strong>dodali\u015bmy tekst<\/strong>, kt\u00f3ry powinien pojawi\u0107 si\u0119 wewn\u0105trz podpowiedzi. Nast\u0119pnie nauczymy si\u0119, jak <strong>sprawi\u0107, by ten tekst pojawia\u0142 si\u0119 w podpowiedzi<\/strong>, gdy u\u017cytkownik najedzie kursorem na znak zapytania.\n<\/p>\n<h5>\n  Krok 6: Tworzenie kontenera podpowiedzi przy u\u017cyciu pseudoelement\u00f3w<br \/>\n<\/h5>\n<p>\n  Najpierw musimy stworzy\u0107 kontenery, w kt\u00f3rych ma by\u0107 wy\u015bwietlana zawarto\u015b\u0107 podpowiedzi.\n<\/p>\n<p>\n  W tym celu wr\u00f3\u0107my do pliku style.css i utw\u00f3rzmy <strong>pseudoelementy<\/strong> dla klasy <strong>.tooltip .<\/strong>\n<\/p>\n<p>\n  Stworzymy pseudoklasy <strong>::after<\/strong> i <strong>::before<\/strong>, aby wy\u015bwietli\u0107 zawarto\u015b\u0107 naszej podpowiedzi.\n<\/p>\n<p>\n  Zasadniczo, u\u017cywaj\u0105c pseudoklasy, takiej jak \u201e <strong>::after<\/strong> „, mo\u017cesz kierowa\u0107 si\u0119 na pozycj\u0119 zaraz po elemencie, kt\u00f3ry u\u017cywa klasy g\u0142\u00f3wnej, i stylizowa\u0107 t\u0119 pozycj\u0119.\n<\/p>\n<p>\n  Podobnie, u\u017cywaj\u0105c pseudoklasy ::before, mo\u017cesz nada\u0107 styl pozycji tu\u017c przed elementem, w kt\u00f3rym u\u017cywana jest klasa g\u0142\u00f3wna (w tym przypadku \u201e?” jest tym elementem).\n<\/p>\n<p>\n  Jest to bardzo przydatna pseudoklasa do wstrzykiwania dodatkowej tre\u015bci na stron\u0119.\n<\/p>\n<p>\n  Stworzymy pseudoklas\u0119 dla \u201etootlip”, jak pokazano poni\u017cej.\n<\/p>\n<pre><code>.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\n}<\/code><\/pre>\n<p>\n  Tworzymy wsp\u00f3ln\u0105 klas\u0119 dla styl\u00f3w ::before i ::after.\n<\/p>\n<p>\n  Tutaj umie\u015bcili\u015bmy <strong>absolutnie<\/strong> oba style ::before i ::after, poniewa\u017c chcemy, aby by\u0142y umieszczone nad \u201eznakiem zapytania” i chcemy, aby by\u0142y wy\u015brodkowane nad \u201e?”.\n<\/p>\n<p>\n  Aby podpowied\u017a by\u0142a wy\u015brodkowana nad \u201e?” musimy u\u017cy\u0107 \u201e <strong>left:50%;<\/strong> ” atrybut.\n<\/p>\n<p>\n  Teraz u\u017cyjemy <strong>::before<\/strong>, aby nada\u0107 styl ma\u0142emu tr\u00f3jk\u0105towi na dole naszej podpowiedzi.\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> s\u0142u\u017cy do stylizowania tre\u015bci wewn\u0105trz podpowiedzi .\n<\/p>\n<p>\n  Zobaczmy, jak to si\u0119 robi.\n<\/p>\n<p>\n  Najpierw utworzymy ma\u0142y tr\u00f3jk\u0105t na dole podpowiedzi.\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  Powinni\u015bmy u\u017cywa\u0107 <strong>tre\u015bci:””;<\/strong> atrybut, aby pokaza\u0107, \u017ce ten element nie ma tre\u015bci. Poniewa\u017c wstrzykn\u0119li\u015bmy troch\u0119 <strong>pustej tre\u015bci<\/strong>, mo\u017cemy teraz nada\u0107 jej styl.\n<\/p>\n<p>\n  Mo\u017cemy <strong>tworzy\u0107 tr\u00f3jk\u0105ty w CSS<\/strong> za pomoc\u0105 atrybutu <strong>border-width .<\/strong>\n<\/p>\n<p>\n  T\u0105 lini\u0105,\n<\/p>\n<p>\n  <code>border-width: 10px 8px 08px;<\/code>\n<\/p>\n<p>\n  Okre\u015blili\u015bmy, \u017ce szeroko\u015b\u0107 obramowania do g\u00f3ry wynosi 10 pikseli, po prawej 8 pikseli, w d\u00f3\u0142 0 pikseli, a po lewej 8 pikseli.\n<\/p>\n<p>\n  W ten spos\u00f3b utworzymy dla nas tr\u00f3jk\u0105t.\n<\/p>\n<p>\n  Nast\u0119pnie utworzymy <strong>solidne obramowanie<\/strong> dla tej sekcji i sprawimy <strong>, \u017ce prawy, dolny i lewy obszar b\u0119d\u0105 przezroczyste<\/strong>, tak aby widoczny by\u0142 tylko g\u00f3rny obszar \u201etr\u00f3jk\u0105ta”.\n<\/p>\n<pre><code>border-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code><\/pre>\n<p>\n  Po ujednoliceniu obramowania nak\u0142adamy kolory na g\u00f3rn\u0105, praw\u0105, doln\u0105 i lew\u0105 stron\u0119 obramowania.\n<\/p>\n<p>\n  Powinni\u015bmy u\u017cy\u0107 tego samego \u201e <strong>border-color:rgba();<\/strong> ” tutaj, kt\u00f3rego u\u017cyli\u015bmy do stylizacji okr\u0119gu wok\u00f3\u0142 znaku zapytania.\n<\/p>\n<p>\n  <code>border-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code>\n<\/p>\n<p>\n  Tutaj nadali\u015bmy <strong>czarny kolor<\/strong> (0,0,0) dla <strong>g\u00f3rnej cz\u0119\u015bci<\/strong> obramowania i <strong>zmniejszyli\u015bmy jego krycie do 0,3<\/strong>, aby uzyska\u0107 ciemnozielony kolor, tak jak zrobili\u015bmy to w celu uzyskania stylu dla okr\u0119gu wok\u00f3\u0142 \u201e?”.\n<\/p>\n<p>\n  Praw\u0105, doln\u0105 <strong>i lew\u0105<\/strong> cz\u0119\u015b\u0107 obramowania ukryli\u015bmy, czyni\u0105c <strong>przezroczyst\u0105<\/strong>.\n<\/p>\n<p>\n  Nawet gdyby\u015bmy stworzyli praw\u0105 i lew\u0105 granic\u0119, s\u0105 one przezroczyste. Jedynym obramowaniem z kolorem jest g\u00f3rne obramowanie. W ten spos\u00f3b <strong>ukryta ramka po lewej i prawej stronie da nam efekt tr\u00f3jk\u0105ta w po\u0142\u0105czeniu z kolorow\u0105 g\u00f3rn\u0105 ramk\u0105<\/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  Efekt ko\u0144cowy b\u0119dzie wygl\u0105da\u0142 tak.\n<\/p>\n<p>\n  Je\u015bli wyszukasz w Google \u201ei”, dowiesz si\u0119 o nim wi\u0119cej.\n<\/p>\n<p>\n  Atrybuty \u201e <strong>Margines-lewy<\/strong> ” i \u201e <strong>g\u00f3rny<\/strong> ” s\u0142u\u017c\u0105 do umieszczania tego tr\u00f3jk\u0105ta po\u015brodku nad okr\u0119giem.\n<\/p>\n<pre><code>top: -20px;\nmargin-left: -8px;<\/code><\/pre>\n<p>\n  Teraz <strong>stworzyli\u015bmy tr\u00f3jk\u0105tny ogon<\/strong> na dole naszej podpowiedzi, kt\u00f3ry wskazuje na \u201e?” znak.\n<\/p>\n<p>\n  Nast\u0119pnie musimy nada\u0107 styl zaokr\u0105glonemu regionowi prostok\u0105ta podpowiedzi, w kt\u00f3rym wy\u015bwietlane s\u0105 informacje. W tym celu u\u017cyjemy atrybutu <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  Dlatego u\u017cy\u0142em,\n<\/p>\n<p>\n  <code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  W sekcji otwieraj\u0105cej pseudoklas\u0119 <strong>.tooltip::after<\/strong>\n<\/p>\n<p>\n  Teraz musimy nada\u0107 tej sekcji ten <strong>sam kolor t\u0142a<\/strong>, kt\u00f3rego u\u017cyli\u015bmy do utworzenia regionu tr\u00f3jk\u0105ta (kt\u00f3ry jest czarny, z alfa\/przezroczysto\u015bci\u0105 0,3).\n<\/p>\n<p>\n  Wi\u0119c doda\u0142em,\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  Nast\u0119pnie wy\u015brodkowa\u0142em t\u0119 sekcj\u0119 naszym \u201eznakiem zapytania”, tak jak poprzednio. U\u017cywam szeroko\u015bci 300 pikseli dla zaokr\u0105glonego prostok\u0105ta i marginesu -150 pikseli, aby wy\u015brodkowa\u0107 go wzgl\u0119dem znaku zapytania.\n<\/p>\n<pre><code>top: -20px;\nwidth:300px;\nmargin-left: -150px;<\/code><\/pre>\n<p>\n  Teraz nadamy dope\u0142nienie i zaokr\u0105glimy kraw\u0119dzie prostok\u0105ta (poprzez zastosowanie border-radius).\n<\/p>\n<pre><code>border-radius: 10px;\ncolor: #fff;\npadding: 14px;<\/code><\/pre>\n<p>\n  Spowoduje to r\u00f3wnie\u017c ustawienie koloru tekstu wewn\u0105trz zaokr\u0105glonego prostok\u0105ta na bia\u0142y (#fff).\n<\/p>\n<p>\n  Teraz region zaokr\u0105glonego prostok\u0105ta, kt\u00f3ry wy\u015bwietla zawarto\u015b\u0107, jest gotowy. Jednak nadal nie jest <strong>odpowiednio ustawiony<\/strong>. Bie\u017c\u0105ca strona HTML b\u0119dzie wygl\u0105da\u0107 tak, jak pokazano poni\u017cej.\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  Zasadniczo zaokr\u0105glony prostok\u0105t <strong>nak\u0142ada si\u0119 na obszar \u201etr\u00f3jk\u0105ta”,<\/strong> kt\u00f3ry utworzyli\u015bmy, poniewa\u017c zar\u00f3wno ::przed, jak i ::po u\u017cywaj\u0105 tego samego marginesu i s\u0105 umieszczone 20 pikseli nad znakiem zapytania.\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  Musimy <strong>umie\u015bci\u0107 zaokr\u0105glone prostok\u0105tne pole tu\u017c nad tr\u00f3jk\u0105tn\u0105 sekcj\u0105<\/strong>, kt\u00f3r\u0105 stworzyli\u015bmy wcze\u015bniej, aby oba razem wygl\u0105da\u0142y jak <strong>okno czatu<\/strong>.\n<\/p>\n<p>\n  Nie wiemy jak\u0105 dok\u0142adnie wysoko\u015b\u0107 zaokr\u0105glonego prostok\u0105ta umie\u015bci\u0107 tu\u017c nad tr\u00f3jk\u0105tem, chcemy <strong>przekszta\u0142ci\u0107 100% wysoko\u015bci zaokr\u0105glonego prostok\u0105ta w pionie<\/strong> tak, aby znalaz\u0142 si\u0119 tu\u017c nad tr\u00f3jk\u0105tem.\n<\/p>\n<p>\n  Poniewa\u017c oba te elementy (tr\u00f3jk\u0105t i zaokr\u0105glony prostok\u0105t) s\u0105 u\u017cywane <code>top: -20px;<\/code>, wystarczy <strong>przekszta\u0142ci\u0107 g\u00f3rn\u0105 cz\u0119\u015b\u0107 zaokr\u0105glonego prostok\u0105ta w pionie na wysoko\u015b\u0107 piksela<\/strong> r\u00f3wn\u0105 jego w\u0142asnej wysoko\u015bci.\n<\/p>\n<p>\n  Do tego u\u017cywamy,<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  Teraz mamy odpowiedni\u0105 struktur\u0119, kt\u00f3ra wygl\u0105da jak pude\u0142ko informacyjne.\n<\/p>\n<h5>\n  Krok 7: Uzyskanie rzeczywistych informacji w etykiecie narz\u0119dzia<br \/>\n<\/h5>\n<p>\n  Naszym ostatnim wyzwaniem jest umieszczenie odpowiedniej tre\u015bci, kt\u00f3ra zawiera wi\u0119cej informacji, w podpowiedzi.\n<\/p>\n<p>\n  Pami\u0119taj, \u017ce tre\u015b\u0107, kt\u00f3ra powinna pojawi\u0107 si\u0119 wewn\u0105trz podpowiedzi, umie\u015bcili\u015bmy w naszym pliku HTML.\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  Za pomoc\u0105 CSS mo\u017cemy pobra\u0107 atrybut z elementu HTML. Zrobimy to za pomoc\u0105 <strong>attr()<\/strong> w <strong>.tooltip::after<\/strong> pseudo CSS.\n<\/p>\n<p>\n  Wi\u0119c zamiast<code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  b\u0119dziemy korzysta\u0107<code>content: attr(data-tooltip);<\/code>\n<\/p>\n<p>\n  Tutaj \u201e <strong>data-tooltip<\/strong> ” jest naszym atrybutem HTML.\n<\/p>\n<p>\n  Korzystaj\u0105c z atrybutu, kt\u00f3ry nadali\u015bmy tre\u015bci w HTML, b\u0119dziemy mogli wywo\u0142a\u0107 t\u0119 tre\u015b\u0107 i pokaza\u0107 j\u0105 w naszym pseudo CSS. Wynik tego b\u0119dzie taki, jak pokazano poni\u017cej,\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  Ale ju\u017c. wszystko, co musimy zrobi\u0107, to sprawi\u0107, aby nasz tooltip by\u0142 niewidoczny na pocz\u0105tku i pojawia\u0142 si\u0119 tylko wtedy, gdy u\u017cytkownik najedzie kursorem na znak zapytania (?).\n<\/p>\n<p>\n  Jest to bardzo \u0142atwe do zrobienia.\n<\/p>\n<p>\n  Aby podpowied\u017a by\u0142a niewidoczna na pocz\u0105tku, <strong>ustawimy jej krycie na \u201e0″<\/strong> w poni\u017cszym pseudo CSS, kt\u00f3ry napisali\u015bmy wcze\u015bniej.\n<\/p>\n<pre><code>.tooltip::before .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\n}<\/code><\/pre>\n<p>\n  Dla efektu Hover dodamy nowy pseudo CSS na dole naszego pliku style.css. Ustawmy <strong>krycie \u201e1″ dla stanu<\/strong> najechania kursorem, tak aby podpowied\u017a by\u0142a wy\u015bwietlana tylko po najechaniu kursorem.\n<\/p>\n<pre><code>\/* CSS for Hover effects *\/\n \ntooltip:hover::before.tooltip:hover::after{\nOpacity:1;\n}<\/code><\/pre>\n<p>\n  Ten pseudo CSS okre\u015bla tylko stan najechania kursorem, poniewa\u017c u\u017cyli\u015bmy \u201e:hover” po g\u0142\u00f3wnym .tooltip CSS\n<\/p>\n<p>\n  Teraz nasza etykietka CSS jest gotowa.\n<\/p>\n<p>\n  Ale przej\u015bcie podpowiedzi nie b\u0119dzie tak p\u0142ynne, jak mo\u017cna by si\u0119 spodziewa\u0107.\n<\/p>\n<p>\n  Mo\u017cesz ulepszy\u0107 efekty przej\u015bcia za pomoc\u0105 CSS. W tym celu wystarczy doda\u0107 poni\u017csz\u0105 regu\u0142\u0119 przej\u015bcia w CSS dla pseudoklas ::before i ::after.\n<\/p>\n<p>\n  Aby dowiedzie\u0107 si\u0119 wi\u0119cej o stylach przej\u015b\u0107, kt\u00f3re mo\u017cna wykona\u0107 za pomoc\u0105 CSS, przeczytaj nasz artyku\u0142 \u201e <a href=\"https:\/\/inform.click\/pl\/ozyw-swoje-strony-internetowe-za-pomoca-animacji-css-i-przejsc\/\" title=\"Animacje i przej\u015bcia CSS\">Animacje i przej\u015bcia CSS<\/a> „.\n<\/p>\n<pre><code>.tooltip::before.tooltip::after {\ntransition: all ease 0.3s;\n}<\/code><\/pre>\n<p>\n  Ten proces jest o wiele \u0142atwiejszy i mniej skomplikowany w por\u00f3wnaniu do implementacji podpowiedzi za pomoc\u0105 JavaScript.\n<\/p>\n<p>\n  W celach informacyjnych znajd\u017a ko\u0144cowy plik HTML i CSS, aby to prze\u0107wiczy\u0107.\n<\/p>\n<h4>\n  Ostateczny plik HTML do testowania podpowiedzi<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>Ko\u0144cowy plik CSS tworz\u0105cy podpowied\u017a<\/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  Demo na \u017cywo<br \/>\n<\/h3>\n<p>\n  Zobacz <a href=\"http:\/\/www.instantshift.com\/demo\/css-tooltip\/\" target=\"_blank\" rel=\"noopener\">aktywn\u0105 podpowied\u017a CSS<\/a> w akcji.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  \u0179r\u00f3d\u0142o nagrywania: <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>Prawdopodobnie ju\u017c wiesz, czym jest podpowied\u017a. Podpowied\u017a to ikona lub tekst, na kt\u00f3ry po najechaniu kursorem uzyskujemy wi\u0119cej informacji w dymku lub wyskakuj\u0105cym okienku. Zwykle podpowiedzi znajduj\u0105 si\u0119 w formularzach, ale mo\u017cna je umie\u015bci\u0107 wsz\u0119dzie tam, gdzie u\u017cytkownicy potrzebuj\u0105 wi\u0119cej informacji. Na powy\u017cszym obrazku okr\u0105g ze znakiem zapytania w \u015brodku pokazuje podpowied\u017a. Po najechaniu na ni\u0105 kursorem ta podpowied\u017a zawiera wi\u0119cej informacji o typach znak\u00f3w, kt\u00f3re musi zawiera\u0107 has\u0142o. Mo\u017cesz uzyska\u0107 frameworki do implementacji podpowiedzi w swojej witrynie, ale przez wi\u0119kszo\u015b\u0107 czasu te frameworki u\u017cywaj\u0105 JavaScript, aby to osi\u0105gn\u0105\u0107. W tym \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":[71,123,58],"tags":[],"class_list":["post-257954","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-pl","category-narzedzia-internetowe","category-web-i-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts\/257954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/comments?post=257954"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts\/257954\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/media\/223378"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/media?parent=257954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/categories?post=257954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/tags?post=257954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}