TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come aggiungere un tooltip nel sito Weebly?

6

Weebly non offre solo la possibilità di costruire il tuo sito in pochi minuti, ma offre anche numerose opportunità di personalizzazione per aggiungere qualsiasi funzionalità aggiuntiva desideri. Consentire agli utenti gratuiti di modificare il codice CSS e HTML sorgente è la ragione principale del successo di Weebly. Abbiamo già scritto molti suggerimenti e trucchi, nonché widget per rendere il tuo sito Weebly più professionale. E in questo articolo continueremo la nostra serie di widget con il widget dei suggerimenti.

Come aggiungere un tooltip nel sito Weebly?

Tooltip è un popup che appare quando si passa il mouse su un particolare termine o un’icona di aiuto. Su un dispositivo mobile l’apparizione e la scomparsa del tooltip sono eventi touch o possono essere completamente disattivati. I tooltip possono essere utilizzati in molti modi utili:

  • Aggiungi un’abbreviazione, sinonimi e acronimi.
  • Mostra uno dei tuoi prodotti e collega il termine del tooltip a una pagina del prodotto.
  • Inserisci un annuncio pubblicitario o link di affiliazione all’interno del tooltip.
  • Mostra l’immagine correlata al termine collegato.
  • Inserisci una parola tradotta in una lingua diversa.
  • Fornisci maggiori informazioni sul termine.

Tooltip è una delle funzionalità che la maggior parte di voi desiderava inserire nel proprio sito Weebly per fornire informazioni aggiuntive su contenuti specifici. Esistono molti modi per aggiungere suggerimenti ai tuoi contenuti:

  • Utilizzo del tag titolo HTML.
  • Utilizzando semplici CSS.
  • Utilizzo di CSS avanzati.

In questo articolo spiegheremo come aggiungere un tooltip al sito Weebly usando un semplice codice HTML e CSS. È anche possibile aggiungere suggerimenti utilizzando script che non tratteremo in questo tutorial.

Aggiunta di suggerimenti con tag titolo HTML

Il modo più semplice per aggiungere una descrizione comando a qualsiasi termine specifico sui tuoi contenuti è utilizzare il tag Title. La casella del suggerimento sarà basata sullo stile predefinito del browser e non è necessario aggiungere alcun CSS per questo. Di seguito è riportato un esempio di aggiunta di un tooltip utilizzando il tag Title, sposta il mouse sul contenuto evidenziato per visualizzare il tooltip.

muovi il mouse qui

Nel tuo editor Weebly, usa l’elemento "Embed Code" per aggiungere il contenuto insieme al tag Title per inserire un suggerimento. Di seguito è riportato un esempio di utilizzo del tag Title all’interno dell’elemento Span:

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

Personalizzazione della casella dei suggerimenti con CSS

Il metodo sopra è molto semplice e non abbastanza attraente. Puoi aggiungere una casella di descrizione comando personalizzata utilizzando CSS per assicurarti che appaia più attraente.

Sposta il mouse sopra per vedere questo suggerimento con codice CSS personalizzato

L’HTML per il suggerimento sopra è il seguente:

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

E il CSS è il seguente:

<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>

Suggerimenti utilizzando CSS avanzati

Non è sempre necessario aggiungere un tooltip a un termine particolare; la maggior parte delle volte è possibile creare una casella di aiuto aggiuntiva (in genere un simbolo di punto interrogativo) per fornire ulteriori spiegazioni. Ciò richiede l’uso di CSS avanzati per personalizzare la casella dei suggerimenti e qui forniamo tre modi per creare un suggerimento contenente testo semplice, contenuto HTML e un’immagine.

Aggiunta di suggerimenti con testo semplice

Di seguito è riportato un semplice suggerimento che appare al passaggio del mouse e scompare quando il mouse viene spostato all’esterno. Questo contiene solo un testo e la casella è personalizzata con il codice CSS.

Descrizione comando con contenuto HTML

Cosa succede se si desidera aggiungere collegamenti o qualsiasi contenuto HTML all’interno del suggerimento? Dai un’occhiata alla demo qui sotto e puoi aggiungere qualsiasi tag HTML come link, grassetto, ecc. all’interno del tooltip.

Immagine all’interno di un tooltip

Il terzo caso consiste nell’aggiungere un’immagine all’interno del tooltip e controllare la demo seguente che mostra un’immagine all’interno della casella del tooltip.

Il CSS per tutti e tre i tooltip precedenti è lo stesso di seguito:

<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>

Il codice HTML di tutti e tre i suggerimenti è di seguito:

<!-- 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>

Puoi copiare/incollare sia il contenuto CSS che HTML utilizzato per questa demo e personalizzarlo in base alle tue necessità. Sostituisci il link e l’URL dell’immagine con il tuo.

Aggiunta di CSS e HTML nel sito Weebly

Ci sono due modi per aggiungere CSS in Weebly :

  • Aggiungilo in "main.less" per applicare gli stili in tutto il tuo sito.
  • Aggiungilo nella sezione " Codice intestazione " di una determinata pagina per rendere effettivo il CSS solo su quella pagina.

Come aggiungere un tooltip nel sito Weebly?

Aggiungi codice intestazione nella pagina

Aggiunta di HTML personalizzato

La parte HTML del tooltip deve essere posizionata nell’area del contenuto in cui si desidera inserire un tooltip utilizzando l’ elemento " Embed Code ".

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More