TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan legge til verktøytips på Weebly -nettstedet?

5

Weebly tilbyr ikke bare muligheten til å bygge nettstedet ditt på få minutter, men tilbyr også mange tilpasningsmuligheter for å legge til flere funksjoner du ønsker. Å la gratis brukere redigere kilde -CSS og HTML -koden er hovedårsaken til Weeblys suksess. Vi har allerede skrevet mange tips og triks, samt widgets for å gjøre ditt Weebly -nettsted mer profesjonelt. Og i denne artikkelen fortsetter vi widgetserien med verktøytips -widgeten.

Hvordan legge til verktøytips på Weebly -nettstedet?

Verktøytips er en popup som vises når musen holdes over musen på et bestemt begrep eller et hjelpikon. På en mobil enhet er utseende og forsvinning av verktøytips berøringshendelser, eller det kan deaktiveres helt. Verktøytips kan brukes på mange nyttige måter:

  • Legg til en forkortelse, synonymer og akronymer.
  • Vis frem et av produktene dine, og koble verktøytipset til en produktside.
  • Plasser en annonse eller tilknyttede lenker inne i verktøytipset.
  • Vis et relatert bilde til det koblede uttrykket.
  • Plasser et oversatt ord på et annet språk.
  • Gi mer informasjon om begrepet.

Verktøytips er en av funksjonene de fleste av dere ønsket å sette inn på ditt Weebly -nettsted for å gi tilleggsinformasjon om spesifikt innhold. Det er mange måter å legge til verktøytips for innholdet ditt:

  • Bruke HTML Title tag.
  • Ved hjelp av enkel CSS.
  • Ved hjelp av avansert CSS.

I denne artikkelen vil vi forklare hvordan du legger til verktøytips til Weebly -området ved hjelp av enkel HTML- og CSS -kode. Det er også mulig å legge til verktøytips ved hjelp av skript som vi ikke vil dekke i denne opplæringen.

Legger til verktøytips med HTML -tittelmerke

Den enkleste måten å legge til verktøytips til et bestemt begrep på innholdet ditt, er å bruke Tittel -tag. Boksen i verktøytipset vil være basert på nettleserens standardstil, og du trenger ikke legge til noen CSS for dette. Nedenfor er et eksempel på hvordan du legger til verktøytips ved hjelp av Tittel -tag, flytt musen over det markerte innholdet for å se verktøytipset.

flytt musen hit

I Weebly -redigeringsprogrammet bruker du "Embed Code" -elementet for å legge til innholdet sammen med Title -taggen for å sette inn et verktøytips. Nedenfor er et eksempel på bruk av Title -tag i Span -element:

This is a simple tooltip and <span title="Tooltip with Title tag">move your mouse over here </span>to see it in action.

Tilpasse verktøytipset med CSS

Metoden ovenfor er veldig enkel og ikke attraktiv nok. Du kan legge til en tilpasset verktøytipsboks ved hjelp av CSS for å sikre at den ser mer attraktiv ut.

Beveg musen over for å se dette verktøytipset med tilpasset CSS -kode

HTML -koden for verktøytipset ovenfor er som følger:

<p class="demo" data-tool-tip="Tooltip with custom CSS">Move your mouse over to see this tooltip with custom CSS code</p>

Og CSS er som nedenfor:

<style> .demo, .demo p { margin: 4em 0; text-align: center; } [data-tool-tip] { position: relative; z-index: 2; cursor: pointer; } [data-tool-tip]:before, [data-tool-tip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; } [data-tool-tip]:before { position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tool-tip); text-align: center; font-size: 14px; line-height: 1.2; } [data-tool-tip]:after { position: absolute; bottom: 150%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } [data-tool-tip]:hover:before, [data-tool-tip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } </style>

Verktøytips ved hjelp av avansert CSS

Det er ikke alltid nødvendig å legge til verktøytips til et bestemt begrep; mesteparten av tiden kan du opprette en ekstra hjelpeboks (vanligvis et spørsmålstegn) for å gi mer forklaring. Dette krever bruk av avansert CSS for å tilpasse verktøytipset, og her gir vi tre måter å lage et slikt verktøytips på som inneholder enkel tekst, HTML -innhold og et bilde.

Legge til verktøytips med enkel tekst

Nedenfor vises et enkelt verktøytips på musen og forsvinner når musen flyttes ut. Denne inneholder bare en tekst, og boksen er tilpasset med CSS -koden.

Verktøytips med HTML -innhold

Hva om du vil legge til lenker eller noe HTML -innhold i verktøytipset? Sjekk ut demoen nedenfor, og du kan legge til HTML -koder som lenke, fet skrift, etc. inne i verktøytipset.

Bilde inne i et verktøytips

Det tredje tilfellet er å legge til et bilde inne i verktøytipset og sjekke ut demoen nedenfor som viser et bilde i verktøytipset.

CSS for alle de tre verktøytipsene ovenfor er de samme som nedenfor:

<style> /* content box */ #tool_tip{ background-color: rgba(128, 128, 128, 0.07); border-radius: 4px; padding: 40px 40px 10px 30px; max-width: 600px; position: relative; margin: 0 auto; /* font-size: 18px; - use only if required /* line-height: 28px; - use only if required */ } /* Tooltip */ .help-tip{ position: absolute; top: 18px; right: 18px; text-align: center; background-color: #4F798E; border-radius: 50%; width: 24px; height: 24px; line-height: 26px; cursor: default; } .help-tip:before{ content:'?'; font-weight: bold; color:#fff; } .help-tip:hover p{ display:block; transform-origin: 100% 0%; -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; } .help-tip p{ display: none; text-align: left; background-color: #1E2021; padding: 20px; width: 300px; position: absolute; border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); right: -4px; color: #FFF; font-size: 13px; /* Change the font size inside tooltip */ line-height: 1.4; } .help-tip p:before{ position: absolute; content: ''; width:0; height: 0; border:6px solid transparent; border-bottom-color:#1E2021; right:10px; top:-12px; } .help-tip p:after{ width:100%; height:40px; content:''; position: absolute; top:-40px; left:0; } @-webkit-keyframes fadeIn { 0% { opacity:0; transform: scale(0.6); } 100% { opacity:100%; transform: scale(1); } } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:100%; } } /* Adjust tooltip size on mobile devices */ @media screen and (max-width: 480px) { .help-tip p{ width: 200px; } } </style>

HTML -kode alle tre verktøytipsene er nedenfor:

<!-- HTML Code for Tooltip --> <!-- Text Tooltip--> <div id="tool_tip"> <div class="help-tip"> <p>This is a tooltip appears on mouse hovering.</p> </div> <p>This is a simple tooltip with just text display on hovering. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div> <!-- Tooltip with HTML Content --> <div id="tool_tip"> <div class="help-tip"> <p>This is a tooltip with <b>HTML tags!</b> inside. <a href="https://www.webnots.com/">Here is a link!</a> You can insert any <i>HTML tag!</i></p> </div> <p>This tooltip has HTML tags inside. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div> <!-- Tooltip with Image inside --> <div id="tool_tip"> <div class="help-tip"> <p>This tooltip has a picture too! < /br>< /br></p><p><img data-src="https://img.webnots.com/2015/06/Weebly-Site-Building.png" width="300" /></p> </div> <p>Also include a showcasing image inside the tooltip. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div>

Du kan kopiere / lime inn både CSS- og HTML -innhold som brukes for denne demoen og tilpasse etter behov. Erstatt lenken og bildens URL med din egen.

Legger til CSS og HTML i Weebly Site

Det er to måter å legge til CSS i Weebly :

  • Legg det til i "main.less" for å bruke stilene på hele nettstedet ditt.
  • Legg den til i " Header Code " -delen på en bestemt side for å gjøre CSS bare den siden effektiv.

Hvordan legge til verktøytips på Weebly -nettstedet?

Legg til topptekst på siden

Legger til tilpasset HTML

HTML -delen av verktøytipset skal plasseres på innholdsområdet ditt der du vil sette inn et verktøytips ved hjelp av " Embed Code " -elementet.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon