Thursday, 11 September, 2025г.
Где искать: по сайтам Запорожской области, статьи, видео ролики
пример: покупка автомобиля в Запорожье
Create Wordpress Tooltips using Elementor HTML widget[For Free]
![Create Wordpress Tooltips using Elementor HTML widget[For Free]](https://pic.portall.zp.ua/mq/e/35/7yTbnEXw9A_pe6.jpg)
У вашего броузера проблема в совместимости с HTML5
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.
##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
Теги:
how to add tooltip in wordpress wordpress tooltips plugin wordpress tooltips elementor tooltips elementor css hacks elementor css tutorial elementor css tricks custom css in wordpress custom css elementor wordpress elementor tutorial for beginners elementor pro tutorial wordpress tutorials for beginners wordpress tips and tricks for beginners elementor html widget javascript elementor html code
Похожие видео
Мой аккаунт