Hvordan vise, plassere og style et verktøytips i HTML og CSS?

En verktøytip blir referert til som et element som gir tilleggsinformasjon angående et HTML -element. Dette ekstra informasjonsstykket vises hver gang brukeren bringer musemarkøren over det aktuelle elementet. Disse verktøytipsene spiller en viktig rolle i å oppgradere en webdesign fordi bruk av dem vil forhindre deg i å vise ekstra informasjon på websiden som kanskje ikke ser bra ut ellers. I denne artikkelen vil vi opplyse om hvordan vi skal vise, plassere og style en verktøytips i HTML og CSS.

Før vi dykker inn i andre detaljer om et verktøytips, la oss først lære å lage en primær verktøytip.

Hvordan lage/vise et verktøytips

Eksemplet nedenfor viser hvordan du lager en grunnleggende verktøytip.

Html

Ta med mus over meg ToolTip -tekst

I koden ovenfor har vi opprettet et DIV -element og plassert noe innhold inne i den og bruker et spennelement vi legger til en verktøytip -tekst inne i DIV -elementet. Merk at diven har fått tildelt klasseverktøytip.

CSS

.verktøytip
Posisjon: relativ;
Display: Inline-block;

.Verktøytip .TOOLTIPPTEXT
Synlighet: skjult;
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;
Border-Radius: 7px;
polstring: 5px 10px;
Posisjon: Absolutt;
z-indeks: 1;

.Verktøytip: Hopp .TOOLTIPPTEXT
synlighet: synlig;

Her gir vi Div-elementet en relativ posisjon til å plassere verktøytip-teksten og vise den som et inline-block-element slik at verktøytipsen er plassert rett ved siden av DIV-elementet. Videre, med hensyn til den div, justerer vi verktøytipsens plassering som absolutt. Dessuten er synligheten til verktøytips skjult, men når musemarkøren blir brakt over Div -elementet, vil verktøytipset være synlig.

Produksjon

En verktøytips er opprettet med hell.

Nå som vi vet hvordan vi lager et verktøytips, la oss utforske hvordan vi kan plassere verktøytipsen.

Hvordan plassere et verktøytips

Det er fire typer stillinger som du kan tilordne til en verktøytip, og disse er nevnt nedenfor.

1. Topp
2. Bunn
3. Venstre
4. Ikke sant

Alle disse stillingene er demonstrert nedenfor ved hjelp av eksempler.

Hvordan plassere en verktøytips øverst

For å plassere en verktøytips øverst skal vi bruke eksemplet som er brukt ovenfor.

CSS

.verktøytip
Posisjon: relativ;
Display: Inline-block;

.Verktøytip .TOOLTIPPTEXT
Synlighet: skjult;
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;
Border-Radius: 7px;
polstring: 5px 10px;
/ * For å angi toppposisjonen til verktøytips */
Posisjon: Absolutt;
z-indeks: 1;
Bunn: 100%;
Venstre: 60%;
margin -venstre: -65px;

.Verktøytip: Hopp .TOOLTIPPTEXT
synlighet: synlig;

For å plassere verktøytips bruker vi den absolutte verdien av posisjonsegenskapen slik at den kan plasseres med hensyn til DIV -elementet. For å plassere det foran elementet gir vi det en stabelbestilling på 1 ved hjelp av Z-Index-egenskap. For å plassere det nøyaktig over elementet har vi satt bunn-, venstre- og margin-venstre egenskaper.

Produksjon

Verktøytipsen har fått topplassering.

Hvordan plassere en verktøytips nederst

For å plassere et verktøytips nederst, bør du vurdere eksemplet nedenfor.

CSS

.verktøytip
Posisjon: relativ;
Display: Inline-block;

.Verktøytip .TOOLTIPPTEXT
Synlighet: skjult;
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;
Border-Radius: 7px;
Polstring: 5px 10px;/ * For å stille inn bunnposisjonen til verktøytipsen */
Posisjon: Absolutt;
z-indeks: 1;
Topp: 100%;
Venstre: 60%;
margin -venstre: -65px;

.Verktøytip: Hopp .TOOLTIPPTEXT
synlighet: synlig;

Den absolutte verdien av posisjonsegenskapen posisjonerer verktøytipsen med hensyn til DIV -elementet. Dessuten er stack -rekkefølgen på verktøytipen satt til 1 for å plassere den foran DIV -beholderen. For å plassere det nøyaktig under elementet har vi satt topp-, venstre- og margin-venstre egenskaper.

Produksjon

Verktøytipset har blitt plassert nederst.

Hvordan plassere en verktøytips til venstre

Hvis du ønsker å plassere verktøytips til venstre for et element, må du ta kontakt med eksemplet nedenfor.

CSS

.verktøytip
Posisjon: relativ;
Display: Inline-block;

.Verktøytip .TOOLTIPPTEXT
Synlighet: skjult;
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;
Border-Radius: 7px;
polstring: 5px 10px;
/ * For å sette venstre plassering av verktøytips */
Posisjon: Absolutt;
z-indeks: 1;
Topp: -6px;
Til høyre: 102%;

.Verktøytip: Hopp .TOOLTIPPTEXT
synlighet: synlig;

Bortsett fra posisjon og z-indeksegenskaper bruker vi toppen og høyre egenskaper i tillegg til å plassere verktøytips nøyaktig til venstre for det spesifiserte elementet.

Produksjon

Vellykket plassert verktøytips til venstre.

Hvordan plassere en verktøytips til høyre

Her har vi demonstrert hvordan du kan plassere et verktøytips til høyre for et element.

CSS

.verktøytip
Posisjon: relativ;
Display: Inline-block;

.Verktøytip .TOOLTIPPTEXT
Synlighet: skjult;
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;
Border-Radius: 7px;
Polstring: 5px 10px;/ * For å stille riktig plassering av verktøytip *//
Posisjon: Absolutt;
z-indeks: 1;
Topp: -6px;
Venstre: 102%;

.Verktøytip: Hopp .TOOLTIPPTEXT
synlighet: synlig;

Her bruker vi topp- og venstre egenskaper for å stille inn verktøyets plassering til høyre for et element.

Produksjon

Verktøytipset er justert til høyre.

Hvordan style et verktøytips

I eksemplene ovenfor har vi stylet verktøytipsen ved å bruke noen grunnleggende CSS-egenskaper som bakgrunnsfarge, farge, tekst-align, grense-radius og polstring. Imidlertid er det andre måter å style en verktøytips også. Her har vi vist deg noen av dem.

Legge til en pil til verktøytips

For å legge til en pil, som en boble -tale, bør du vurdere eksemplet nedenfor.

CSS

.verktøytip
Posisjon: relativ;
Display: Inline-block;

.Verktøytip .TOOLTIPPTEXT
Synlighet: skjult;
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;
Border-Radius: 7px;
polstring: 5px 10px;
Posisjon: Absolutt;
z-indeks: 1;
Bunn: 150%;
Venstre: 50%;
margin -venstre: -60px;

.Verktøytip .TOOLTIPTEXT :: etter
innhold: "";
Posisjon: absolutt;/ * for å plassere verktøytips */
Topp: 100%;
Venstre: 50%;
margin -venstre: -6px;
/ * For å legge til en pil */
Grense: 6px faststoff;
grensefarge: rosybrown gjennomsiktig gjennomsiktig gjennomsiktig;

.Verktøytip: Hopp .TOOLTIPPTEXT
synlighet: synlig;

Her bruker vi: Etter pseudo-element for å vise pilen fra en bestemt side av verktøytipsen, derfor er innholdet etter verktøytipen tom. For å lage pilen brukes imidlertid grenseegenskapen. For å holde pilen i midten av verktøytipsen, bør grensbredden og margin-venstre egenskaper gis de samme ennå motsatte i tegnverdier.

Vi bruker grensenfargen for å gi farge til hver kant av pilen. Bare toppgrensen får fargen rosybrown og resten er satt til gjennomsiktig. Hvis disse alle fikk litt farge, ville pilen vises som en firkant.

Til slutt har verktøytipsen og pilen blitt plassert over elementet. Hvis du ønsker å plassere verktøytipset sammen med en pil til noen annen stilling, må du ta kontakt med eksemplene gitt ovenfor.

Produksjon

Lagt til en pil til verktøytips.

Hvordan legge til en fade-in-effekt til verktøytips

For å gi en viss effekt, for eksempel en falme effekt på verktøytips, bør du vurdere eksemplet nedenfor.

CSS

.verktøytip
Posisjon: relativ;
Display: Inline-block;

.Verktøytip .TOOLTIPPTEXT
Synlighet: skjult;
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;
Border-Radius: 7px;
polstring: 5px 10px;
Posisjon: Absolutt;
z-indeks: 1;
Bunn: 150%;
Venstre: 50%;
Margin-venstre: -60px;/ * For å legge til en fade-in-effekt til verktøytipsen */
Opacitet: 0;
Overgang: Opacity 2s;

.Verktøytip: Hopp .TOOLTIPPTEXT
synlighet: synlig;
Opacitet: 1;

I koden ovenfor, for å få verktøytipsen til å falme inn når musen svever over elementet, brukes overgangsegenskapen sammen med opacitetseiendommen. Varigheten av overgangen er satt til 2 sekunder, noe som betyr at det vil ta 2 sekunder før verktøytipset går fra å være usynlig til helt synlig.

Produksjon

Fade-in-effekten fungerer som den skal.

Konklusjon

En verktøytip blir referert til som et element som gir ekstra informasjon om et element hver gang en musemarkør blir brakt over det elementet. For å legge til en verktøytips på et element, brukes posisjonsegenskapen basert på stedet der du vil vise verktøytips. I tillegg til dette, kan du legge til en pil, eller en fade-in-effekt til verktøytips for å gi den litt stil. I denne oppskrivningen har vi opplyst om hvordan vi skal vise, plassere og style en verktøytip ved hjelp av HTML og CSS.