Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Tooltip from Regular Labs with Pagebuilder ??

Featured Lock Resolved Issue
Hi,

has someone a clu how to use Tooltip from regular labs in pagebuilder to design nice tooltips?

thanks for solution.

...-> if this does not work - any solution that works to design nice ones?

12 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Your code has a conflict with default bootstrap which also uses class .tooltip, that's why it looks that doesn't work.
---
Just change class names, and it will work

it-may-work.jpg

Attachments (1)

  • it-may-work.jpg
    it-may-work.jpg 24.6 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
Sorry, but by default, shortcodes can not be used in SPPB.
But read SPPB documentation (How To Tips > How to use Shortcodes from plugins).

It may (or not) help.
---

gemini

More than a month ago #Permalink
Hi,
Sorry, but by default, shortcodes can not be used in SPPB.
But read SPPB documentation (How To Tips > How to use Shortcodes from plugins).

It may (or not) help.
---


thank you, any other solution to make tooltips? I want to integrate this in the pricing add-on!

Paul Frankowski - Staff

More than a month ago #Permalink
Maybe consider customizing Pricing addon code.

gemini

More than a month ago #Permalink
I tried to include a template from w3 school: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip


WHAT I DID is I took the CSS elements from the code and placed them in the custom CSS and then took the html element in the text block of the price table.

IT DOES NOT WORK. I wonder, Why does this not work with Custom CSS? Why does this not work?



Here is the code snippet from W3:

<!DOCTYPE html>
<html>
<style>
.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 the tooltip */
position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>

<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>

</body>
</html>

Paul Frankowski - Staff

More than a month ago #Permalink
sorry, Support Policy, customizations are on users hands only, we do not teach HTML nor CSS here as well. Find Front-end developer in your city and talk with him.

gemini

More than a month ago #Permalink
Thank you - very nice answer!

But my question is - WHERE SHOULD I PUT THE CSS in SP pagebuider. I put it in the CSS fo the add on - this does not work!

SO, its a support question! The rest I can do myself

Paul Frankowski - Staff

More than a month ago #Permalink
SPPB documentation: How To Tips > How to use Custom CSS
---
If you use Helix template use custom CSS field or file.
---

Custom CSS areas are fully OK, we can bet for a $.

gemini

More than a month ago #Permalink
Your code has a conflict with default bootstrap which also uses class .tooltip, that's why it looks that doesn't work.
---
Just change class names, and it will work

[attachment]it-may-work.jpg[/attachment]


works excellent! THank you PAUL very kind :)

Paul Frankowski - Staff

More than a month ago #Permalink
Anyway, it was beyond support, so you own me pizza. :D :p

gemini

More than a month ago #Permalink
Anyway, it was beyond support, so you own me pizza. :D :p
At least... ;) .. I appreciate your support


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 121
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 110
Toufiq

Toufiq

Total Accepted Answers: 82
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 5
FUTURECLIENT

FUTURECLIENT

Total Accepted Answers: 2

115

Templates

296316

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us