TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment ajouter une info-bulle dans le site Weebly ?

23

Weebly offre non seulement la possibilité de créer votre site en quelques minutes, mais offre également de nombreuses possibilités de personnalisation pour ajouter les fonctionnalités supplémentaires que vous souhaitez. Permettre aux utilisateurs gratuits de modifier le code CSS et HTML source est la principale raison du succès de Weebly. Nous avons déjà écrit de nombreux trucs et astuces ainsi que des widgets pour rendre votre site Weebly plus professionnel. Et dans cet article, nous continuerons notre série de widgets avec le widget info-bulle.

Comment ajouter une info-bulle dans le site Weebly ?

L’info-bulle est une fenêtre contextuelle qui apparaît lorsque la souris est survolée sur un terme particulier ou une icône d’aide. Sur un appareil mobile, l’apparition et la disparition de l’info-bulle sont des événements tactiles ou peuvent être complètement désactivées. Les info-bulles peuvent être utilisées de plusieurs manières utiles :

  • Ajoutez une abréviation, des synonymes et des acronymes.
  • Présentez l’un de vos produits et liez le terme de l’info-bulle à une page de produit.
  • Placez une publicité ou des liens d’affiliation dans l’info-bulle.
  • Afficher l’image liée au terme lié.
  • Placez un mot traduit dans une autre langue.
  • Fournissez plus d’informations sur le terme.

L’info-bulle est l’une des fonctionnalités que la plupart d’entre vous souhaitaient insérer dans votre site Weebly pour fournir des informations supplémentaires sur un contenu spécifique. Il existe de nombreuses façons d’ajouter une info-bulle à votre contenu :

  • Utilisation de la balise de titre HTML.
  • Utilisation de CSS simples.
  • Utilisation de CSS avancé.

Dans cet article, nous expliquerons comment ajouter une info-bulle au site Weebly en utilisant un simple code HTML et CSS. Il est également possible d’ajouter des infobulles à l’aide de scripts que nous ne traiterons pas dans ce tutoriel.

Ajout d’une info-bulle avec une balise de titre HTML

Le moyen le plus simple d’ajouter une info-bulle à un terme spécifique de votre contenu consiste à utiliser la balise Title. La boîte de l’info-bulle sera basée sur le style par défaut du navigateur et vous n’avez pas besoin d’ajouter de CSS pour cela. Vous trouverez ci-dessous un exemple d’ajout d’info-bulle à l’aide de la balise Title, déplacez votre souris sur le contenu en surbrillance pour voir l’info-bulle.

passe ta souris ici

Dans votre éditeur Weebly, utilisez l’élément « Embed Code » pour ajouter le contenu avec la balise Title pour insérer une info-bulle. Vous trouverez ci-dessous un exemple d’utilisation de la balise Title dans l’élément Span :

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

Personnalisation de la boîte d’info-bulle avec CSS

La méthode ci-dessus est très simple et pas assez attrayante. Vous pouvez ajouter une boîte d’info-bulle personnalisée à l’aide de CSS pour vous assurer qu’elle est plus attrayante.

Déplacez votre souris pour voir cette info-bulle avec le code CSS personnalisé

Le code HTML de l’info-bulle ci-dessus est le suivant :

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

Et le CSS est comme ci-dessous :

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

Info-bulles à l’aide de CSS avancé

Il n’est pas toujours nécessaire d’ajouter une infobulle à un terme particulier ; la plupart du temps, vous pouvez créer une boîte d’aide supplémentaire (généralement un symbole de point d’interrogation) pour fournir plus d’explications. Cela nécessite l’utilisation de CSS avancé pour personnaliser la boîte d’ infobulle et nous proposons ici trois façons de créer une telle info-bulle contenant du texte simple, du contenu HTML et une image.

Ajout d’une info-bulle avec du texte simple

Ci-dessous, une simple info-bulle apparaît au survol de la souris et disparaît lorsque la souris est déplacée vers l’extérieur. Celui-ci ne contient qu’un texte et la boîte est personnalisée avec le code CSS.

Info-bulle avec contenu HTML

Que faire si vous souhaitez ajouter des liens ou du contenu HTML dans l’info-bulle ? Consultez la démo ci-dessous et vous pouvez ajouter des balises HTML telles que lien, gras, etc. dans l’info-bulle.

Image dans une info-bulle

Le troisième cas consiste à ajouter une image à l’intérieur de l’info-bulle et à consulter la démo ci-dessous montrant une image dans la boîte d’info-bulle.

Les CSS pour les trois info-bulles ci-dessus sont les mêmes que ci-dessous :

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

Le code HTML des trois info-bulles est ci-dessous :

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

Vous pouvez copier/coller le contenu CSS et HTML utilisé pour cette démo et le personnaliser selon vos besoins. Remplacez le lien et l’URL de l’image par les vôtres.

Ajout de CSS et HTML dans le site Weebly

Il existe deux façons d’ ajouter du CSS dans Weebly :

  • Ajoutez-le dans "main.less" pour appliquer les styles sur l’ensemble de votre site.
  • Ajoutez-le dans la section " Code d’en-tête " d’une page particulière pour que le CSS ne soit efficace que sur cette page.

Comment ajouter une info-bulle dans le site Weebly ?

Ajouter un code d’en-tête dans la page

Ajout de HTML personnalisé

La partie HTML de l’info-bulle est à placer sur votre zone de contenu où vous souhaitez insérer une info-bulle à l’aide de l’ élément " Embed Code ".

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails