Create WordPress Tooltips using Elementor HTML widget[For Free]

Hello Designers! Ever wondered how to add a tooltip to your WordPress website? It's quite easy and there are 2 ways to do it all by using the beloved Page Builder, Elementor Pro.

► Get Elementor Pro — https://wpalgoridm.com/elementor

##You can find HTML Code in the first comment##


##CSS CODE FOR VARIOUS TOOLTIPS##

#1 Tooltip Text above Tooltip:
/*New Code starts below*/
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
/*New Code starts below*/

#2 Tooltip text below tooltip[Shown in the Video]
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor:help;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 500%;
background-color: blue;
color: #fff;
border-radius: 6px;
padding: 5px 5px 5px ;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -250%;
}

.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent blue transparent;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

/*New Code starts below*/
#3 Tooltip Text on the right of Tooltip
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/*Code ends above this*/

**Some Important Links**

Elementor Custom Breakpoints Tutorial:
https://youtu.be/xY0_iC72ca4

Join the Facebook Group: https://www.facebook.com/groups/designschoolwp

Design your website: https://www.youtube.com/playlist?list=PL19jB3vK-qIUWYcJE0r2oFjRxMLxPBLFt

Build your website: https://www.youtube.com/playlist?list=PL19jB3vK-qIXBIpyRqq8nrjb6Z14l-7gs

Customise your website:
https://www.youtube.com/playlist?list=PL19jB3vK-qIWUqfAvRsGpbcrkmEnedXd8