How to Add Tooltip in Weebly Site?

Weebly not only offers the possibility of building your site in minutes but also offers numerous customizing opportunities to add any additional features you want. Allowing free users to edit the source CSS and HTML code is the major reason for Weebly’s success. We have already written lot of tips and tricks as well as widgets for making your Weebly site more professional. And in this article we will continue our widget series with the tooltip widget.

What is a Tooltip?

Tooltip is a popup appears when the mouse is hovered over on a particular term or a help icon. On a mobile device appearance and disappearance of tooltip are touch events or it can be completely deactivated. Tooltips can be used in many useful ways:

• Add an abbreviation, synonyms and acronyms.
• Showcase one of your products and link the tooltip term to a product page.
• Place an advertisement or affiliate links inside tooltip.
• Show related image to the linked term.
• Place a translated word in a different language.
• Provide more information on the term.

Tooltip is one of the features most of you wanted to insert in your Weebly site to provide additional information on specific content. There are lots of ways to add tooltip to your content:

• Using HTML Title tag.
• Using simple CSS.
• Using advanced CSS.

In this article we will explain how to add tooltip to Weebly site using simple HTML and CSS code. It is also possible to add tooltips using scripts which we will not cover in this tutorial.

Adding Tooltip with HTML Title Tag

The simplest way to add tooltip to any specific term on your content is to use Title tag. The box of the tooltip will be based on the browser’s default style and you do not need to add any CSS for this. Below is an example of adding tooltip using Title tag, move your mouse over the highlighted content to see the tooltip.

move your mouse over here

In your Weebly editor, use “Embed Code” element to add the content along with Title tag to insert a tooltip. Below is an example of using Title tag within 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.

Customizing the Tooltip Box with CSS

The above method is very simple and not attractive enough. You can add custom tooltip box using CSS to ensure it looks more attractive.

Move your mouse over to see this tooltip with custom CSS code

The HTML for the above tooltip is as below:

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

And the CSS is as below:

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

Tooltips Using Advanced CSS

It is not always necessary to add tooltip to a particular term; most of the time you can create an additional help box (typically a question mark symbol) to provide more explanation. This needs a use of advanced CSS to customize the tooltip box and here we provide three ways to create such a tooltip containing simple text, HTML content and an image.

Adding Tooltip with Simple Text

Below is a simple tooltip appears on mouse hover and disappear when the mouse is mouse is moved out. This contains only a text and the box is customized with the CSS code.

Tooltip with HTML Content

What if you want to add links or any HTML content inside the tooltip? Check out the below demo and you can add any HTML tags like link, bold, etc. inside the tooltip.

Image Inside a Tooltip

The third case is to add an image inside the tooltip and check out the below demo showing an image within the tooltip box.

The CSS for all the above three tooltips are same as below:

<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 code all three tooltips is below:

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

You can copy / paste both CSS and HTML content used for this demo and customize according to your need. Replace the link and image URL with your own.

Adding CSS and HTML in Weebly Site

There are two ways to add CSS in Weebly:

• Add it in “main.less” to apply the styles throughout your site.
• Add it in “Header Code” section of a particular page to make the CSS effective only that page.

Adding Custom HTML

The HTML part of the tooltip is to be placed on your content area where you want to insert a tooltip using “Embed Code” element.