Add Popover to list block button

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

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

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

1 Like

Hey @lea,

Yes that worked, thanks :slight_smile:

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

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

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:

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

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:

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

Someone to debug the popovers? :sweat_smile: 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>

ezgif-5-0124cc0033

Thanks a lot @matthieu_chateau :slight_smile: