Add Popover to list block button

Custom Coding
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
2

Thanks for sharing @cooper, I’m gonna try this.

3

Working well @Suzie ?
Bootstrap also have popovers Popovers ¡ Bootstrap

1 Like
4

Hey @lea,

Yes that worked, thanks :slight_smile:

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… :slight_smile:

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
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 ? :slight_smile:

8

it can be tricky for sure. if you wish share the page by dm or otherwise & will see if I spot something.

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. :blush:

10

Here is a demo page with the flollowing popover’s script deployed in footer @Suzie :slight_smile:

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

CleanShot 2023-01-09 at 19.57.31

CleanShot 2023-01-09 at 19.55.06@2x
CleanShot 2023-01-09 at 19.55.06@2x2282×1192 411 KB

11

Someone to debug the popovers? :sweat_smile: A not easy task

12

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

13

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>

ezgif-5-0124cc0033

2 Likes
14

Thanks a lot @matthieu_chateau :slight_smile:

15

Looks great! Though we really need to get popovers voted up; It’s a basic requirement.

16

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