Egyszerű eszköztippek css
Egyszerű eszköztippek CSS
Végrehajtása egyszerű tipp segítségével attribútumadatokkal-cím
A legegyszerűbb lehetőség - a CSS-styling rutin, szöveges nyomokat. Ehhez meg kell használni adat cím attribútumot. helyett a szokásos cím. hogy elkerüljék a megjelenése két tipp - saját tervezés és szabványos, hogy nem lehet változtatni.
HTML struktúra a következőképpen néz ki:
?
Tabindex attribútumot a tag, hogy azt szeretné, hogy így összpontosítani kattintással - van szükség, valamint az ár-érték (!) - bármely egész. Ellenkező esetben, hivatkozással vagy más pszeudo-tag: fókusz nem fog működni. Egyedülálló az attribútum értékét az oldalon nem fontos.
Tipp jelenik segítségével ál: korábban. ennek megfelelően kiadott.
span.support::before tartalom: attr (adat-cím); / * Tedd a kártyát az ál * /
display: none; / * Elrejtése a célzást * /
>
Annak érdekében, hogy megvalósítsa a megjelenése a tippeket kattintva használ CSS-kód:
span.support:focus::before display: block;
>
Ahhoz, hogy egy kényszer átviteli vonal eszközleírás szabványos title attribútumot, vagy tett egy alternatív attribútum - adatok-címet. elég a megfelelő helyen beszúrni HTML karakter transzfer - # 013;
Látható átkattintás címkeimplementálási linkek
Példa, amikor a blokk a tip belül hivatkozások:
a.support:focus .tip display: block;
>
Hely után közvetlenül a link:
a.support-két: focus + .tip blokk .tip-két display: block;
>
További pakolás tippeket blokkolja - konténer .tip-blokk osztály - használható, ha a csúcs található, közvetlenül szomszédos az elem okozza, hogy manipulálják az helyzetbe hozzá képest tippeket abszolút pozicionálás.
tip-blokk kijelző: inline-block;
helyzet: a relatív; / * Kötelező * /
háttér: átlátszó;
margin: 0;
padding: 0;
átnyúló: 0;
magasság: 0;
szélesség: 1px;
>
Létrehozása egy ablak jelenik meg kattintással az INPUT tag
Ha a többfunkciós címke formájában HTML-design egy kicsit bonyolultabb, mint az előző. A példa azt is hozzáadott kiegészítő eleme - a határokon záró utasításokat (tag
Először is el kell távolítani a zászló cellában:
tip-négyzetet display: none;
>
A következő tippeket felépítése a következő:
* .tip-három display: block;
>
Elrejtése a legördülő listában, akkor újra kattintson az ikonra a kérdést, vagy a gombbal záródik nyom díszített kell.
Pszeudo: ellenőrzött felvisszük a elemeket, például kapcsolókat (type = „radio”), vagy dobozok (type = „checkbox”), amikor a kiválasztott, miközben lehetővé teszi a szomszédos fő- és manipulálni (+ vagy
) Elemek, alkalmazni rájuk a szükséges tulajdonságokat.
Szavakkal, ez a trükk, vagy hogy is mondjam - CSS: ellenőrzött hack megszólal valami ilyesmit: „Ha be van jelölve, akkor a következő stílust egy bizonyos elemet.” Példa ez a cikk egy a számos használati esetek: ellenőrizni.
Részletesebb leírás itt található (Eng.).
Tooltip jelenik meg, ha lebeg
Annak érdekében, hogy megszervezze a visszavonását tippeket a képernyőn olyan módon pótlására elegendő ál: a hangsúly ezúttal egy: hover.
Például:
a.support-hover: lebeg .tip display: block;
>
a.support-hover: hover + .tip-blokk .tip display: block;
>
- ha a blokk közvetlen szomszédságában található a hívó összetevő.
Az összes elem a megfelelő választókat. azonnal, akkor meg az általános stílust, hogy ugyanaz lesz bármilyen tervezési:
- A főegység (tétel .support osztály):
támogató kijelző: inline-block;
helyzet: a relatív; / * Kötelező paraméter * /
text-decoration: none;
kurzor: pointer;
>
- végrehajtását egy gombot (tag ):
támogatás em háttér: # FF6600;
határ-sugár: 20 képpont;
border: 1px szilárd # 999;
text-align: center;
szín: #fff;
font: normal 16px Arial félkövér;
padding: 0 4px;
>
- tervezés tippek a blokk - elrejteni alapértelmezésben a tulajdonságokat meghatározó pozícióját és megjelenés:
hegy,
span.support::before/*если használt adatok-cím * / display attribútum: none;
pozíció: abszolút;
z-index: 9998;
top: 0;
bal: 100%;
háttér: #EDEDED;
text-align: left;
color: # 000;
kurzor: default;
padding: 5px;
árrés: -15px 0 0 10px; / * Beállítja a értékek függnek az alkalmazott tervezési * /
szélesség: 200px;
min-magasság: 50 képpont;
magasság: auto;
>
Egyes böngészők, mint például a Google Chrome-ot, amikor megkapja a hangsúly elem, keret is a keretben, akkor minden bizonnyal nagyon hasznos, de nem ebben az esetben. Ahhoz, hogy megszabaduljon egy ilyen keret, akkor a CSS, amelyben a megfelelő tulajdonságokat a megfelelő linkre.
A mi példánkban ez így néz ki:
*: Focus vázlat: none;
>
Most, a változattól függően, továbbra is szervezni funkcionális tooltip, ami a használatát ál.
Ebben a csomagban mindent.
Cool. Akkor kérje, hogy a tartalom nem helyezhető el a címkét „a”, mint amit a második példa, hogy a szkript csináltál? De a második példában a szkript, ha azt nem használják fel, akkor, amikor a Megnyitás gombra a blokk, ő eltűnik, vagy ha a szkript nem kapcsolja ki a készüléket is leállt, ha rákattint a kereszt és hasonló, mint az első kiviteli bármely helyen a képernyőn. Mint az a nélkül script változtatni egy kicsit az első lehetőség az volt, hogy tartalmat lenne a második nagy. köszönöm
Ezt meg lehet tenni, de ez egy másik történet, és egy teljesen más kódot. Mert ez az opció, akkor IMPUTy és pszeudo: ellenőrzik. de aztán CSS regisztrálni kell külön-külön minden kérdésre. Szkript verzióját a legegyszerűbb, és így tett a minimális, annál több funkciót - minél több kódot, akkor nem lehet egy egyszerű script és a plugin. Ha kell használni a forgatókönyvet anélkül, hogy ez az opció lehet elhelyezni benne. kivéve linkeket.
Sajnos már tükrözi egy kicsit, rendben, ez a lehetőség, hogy nem megfelelő forgatókönyvet, de találkozott csak az egyik probléma, a linkeket elhelyezni a készüléket, akkor is kattints át is lehetséges, de ha ebbe a blokklistában tag (select> opció) és kattintson a listán, akkor a készülék azonnal eltűnnek, ha jól értem itt nem helyes? És lehetséges, az új forgatókönyvet, hogy tegyen valamit annak érdekében, hogy ne használja a plug-hoverIntent?
Élveztem az emlékeztető körülbelül 6 hónapos és működött. Az utóbbi időben azonban a csúcs már nem dolgozik.
Próbáltam használni egyéb szolgáltatásokat az én ötletem, és ez nem segít, az eredmény ugyanaz. Ugyanakkor, ha a tooltip szöveget, akkor minden megfelelően működik. És ha rákattint a szövegben megjelenő utasításokat, akkor válassza ki, másolás és még nézd meg a kódot html / Tipp eltűnik, ha rákattintunk nem, és egy másik területet a képernyőn.
Kiderült, a különbség vált, hogy ha használom a kulcsot, ha rákattint egy hegy, akkor eltűnik, és a használata szöveges belül tippeket is, és azt kell, hogy zárja be magát kattintva máshol a képernyőn (például, hogy az I. és kell).
Hogyan tehetek, hogy segítsen nem veszélyeztetett és a tűz gombot sots.setey elme nem is fogom. Én szívesen ötleteket.
Köszönöm, hogy válaszolt nekem. Most oldotta meg a problémát, és ez a változat Szeretem ruhák.
Ahogy már mondtam az összes munkát, és hogy őszinte legyek mindezt kitolja azt gondolom, hogy a világ a feje tetejére áll, és megváltozott néhány érvényesítés a pszeudo-fókusz. Változott meg, hogy lebeg, és működött.
Most, amikor lebeg az egér kapja csúcsa és kattintható.
Köszönjük az anyag) nagyon egyszerű, hozzáférhető és könnyen érthető, és ami a legfontosabb, hogy megfeleljen a követelményeknek, hogy minimalizálni az összes, amit elmarad) Keep)
Helló
További borítás - a tartályt .tip-blokk osztály - használt manipulálni a helyzetben van az, hogy tippeket abszolút pozicionálás.
A kérdés az, hogy miért, ha eltávolítja ezt a teljesen ^ span class „.tip-block” ^ ^ / span ^ a kérdés nem jelenik meg? kérdőjel színe megváltozik, de a csúcs nem jelenik meg. Bár meg van írva, hogy szükség van, hogy manipulálják a helyzetet illetően neki tippeket.