cooper
December 21, 2022, 10:44pm
1
When using Softr you will notice the use of popovers .
(an enhanced tooltip when you hover over an important button)
If you would like to do the same for your app, add this code to the Code inside footer .
The use case is to add popover text to a button on the list block.
to customize:
Run the app, rIght click on the list block button, click inspect.
Looks for this line above the highlighted line:
<div class="list-field-element MuiBox-root css-abc">
Replace the text css-xxx
in the code with the text css-abc
(will vary)
<script src=https://unpkg.com/@popperjs/core@2></script>
<script src=https://unpkg.com/tippy.js@6></script>
<script>
window.addEventListener('load', function() {
setTimeout(function() {
b=document.getElementsByClassName("css-xxx");
[].forEach.call(b, function (e) {
tippy(e, {
content: 'View details',
placement: 'bottom',
});
});
}, 1200);
});
</script>
2 Likes
Suzie
December 22, 2022, 1:52pm
2
Thanks for sharing @cooper , I’m gonna try this.
lea
January 2, 2023, 8:42am
3
Working well @Suzie ?
Bootstrap also have popovers Popovers · Bootstrap
1 Like
lea
January 3, 2023, 6:37pm
5
@cooper & @Suzie , I tried on my side but in my page with an Inbox block
, I noticed that all my buttons have the same css-ID
. Same on your side? The script works but all the buttons have the same popover suddenly…
cooper
January 4, 2023, 8:34pm
6
When there are multiple buttons, you probably want to have different popovers for each button:
e=document.getElementsByClassName("css-xxx");
tippy(e[0], {content: 'Button 1 text', placement: 'bottom', });
tippy(e[1], {content: 'Button 2 text', placement: 'bottom', });
1 Like
lea
January 4, 2023, 8:45pm
7
Thanks for you help @cooper , but I noticed that all my buttons have the same css-ID
, your script is probably perfect but it’s the softr CSS that is weird ?
cooper
January 4, 2023, 9:20pm
8
it can be tricky for sure. if you wish share the page by dm or otherwise & will see if I spot something.
Suzie
January 9, 2023, 6:43pm
9
Hey @lea ,
I am running many applications for testing and could not find where exactly I used the code.
You can share your a link or I will try to run a test once again and will share the result with you.
lea
January 9, 2023, 6:58pm
10
Here is a demo page with the flollowing popover’s script deployed in footer @Suzie
<script src=https://unpkg.com/@popperjs/core@2></script>
<script src=https://unpkg.com/tippy.js@6></script>
<script>
window.addEventListener('load', function() {
setTimeout(function() {
b=document.getElementsByClassName("css-nth7ip");
[].forEach.call(b, function (e) {
tippy(e, {
content: 'View details',
placement: 'bottom',
});
});
}, 1200);
});
</script>
lea
January 13, 2023, 3:11pm
11
Someone to debug the popovers? A not easy task
Hi Lea,
In order to differentiate the two buttons, you should use the CSS pseudo class :nth-child(). Worked for me, thanks to Artur’s help, with this use case: New - unofficial - feature: TABS - Hide/Show multiple blocks horizontally
‘#cta3 a[data-element=“button”]:nth-child(1)’ being the first button
‘#cta3 a[data-element=“button”]:nth-child(2)’ being the second button
#cta3 being the ID of the block
Is it an inbox block you’re using? If so, it should work too, I checked in the inspector, buttons are made the same as in a CTA block
Or you can use this code, built with cooper’s suggestion (tested and it works)
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
window.addEventListener('load', function() {
setTimeout(function() {
b=document.getElementsByClassName("css-fayjea");
[].forEach.call(b, function (e) {
e=document.getElementsByClassName("css-fayjea");
tippy(e[0], {content: 'Button 1 text', placement: 'bottom', });
tippy(e[1], {content: 'Button 2 text', placement: 'bottom', });
});
}, 1200);
});
</script>
2 Likes
lea
January 29, 2023, 11:25am
14
cooper
February 9, 2023, 3:55pm
15
Looks great! Though we really need to get popovers voted up
; It’s a basic requirement.
Yes but it needs a design system behind it, otherwise the block editor would be a mess.
And as a design system may be in the plan…
1 Like