Create Wordpress Tooltips using Elementor HTML widget[For Free]

Create Wordpress Tooltips using Elementor HTML widget[Fo…. Category: Wordpress Design with Elementor, Tags: Custom Css Elementor, Custom Css In Wordpress, Eleme

Create WordPress Tooltips using Elementor HTML widget[For Free]

Create WordPress Tooltips using Elementor HTML widget[Fo…

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:

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

Join the Facebook Group:

Design your website:

Build your website:

Customise your website:
8

…  

View our service SEO Temple Web Design

 

Create WordPress Tooltips using Elementor HTML widget[For Free] Description

Create WordPress Tooltips using Elementor HTML widget[Fo…. Category: WordPress Design with Elementor, Tags: Custom Css Elementor, Custom Css In WordPress, Eleme

Create WordPress Tooltips using Elementor HTML widget[For Free] Tags

Custom Css Elementor, Custom Css In WordPress, Elementor Css Hacks, Elementor Css Tricks, Elementor Css Tutorial, Elementor Html Code, Elementor Html Widget Javascript, Elementor Pro Tutorial, Elementor Tooltips, How To Add Tooltip In WordPress, WordPress Elementor Tutorial For Beginners, WordPress Tips And Tricks For Beginners, WordPress Tooltips, WordPress Tooltips Plugin, WordPress Tutorials For Beginners

Watch Create WordPress Tooltips using Elementor HTML widget[For Free] on YouTube

WordPress Design with Divi

 

Related Posts on MayanSEO Blog

We offer White Label SEO

Our prices start at $300 USD per month

You can reach us using the following form:

[]
1 Step 1
keyboard_arrow_leftPrevious
Nextkeyboard_arrow_right

5 Comments

  1. Design School by Wpalgoridm

    <div>Add Some Text Here
    <div class="tooltip"> Hover over me
    <span class="tooltiptext"> Tooltip text is the best way to see things in bright sunshine exactly above the sky</span>
    </div>
    Add some text here too</div>

    Reply
  2. John Boyd

    Your tips are very useful and practical. Thank You. You did mention there were many different types of cursors and that you would show them in the comments. Perhaps I am missing them, but can you please share. Thank You!

    Reply
  3. Elijah Clark

    You said you can make the tooltip an image, what are some codes for other images you can use other than the plus sign shown in your other video?

    Reply
  4. Rachel Kirk

    Hi I used this tutorial to create tool tips. It worked great, but then I noticed they weren't mobile responsive. Can you help me with that, is there a fix?
    I can set the position of the tool tip to be visible for desktop & tablet, but for mobile I need to give it a different position. Can you please advice me hoe to do this.

    Many thanks.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *