Hello,
I wanna recreate this room stacks like in the video at 2:32min. But I don’t know how. Can anyone help me?
@Cloos In your example posted way back in Oct '23 your top card shows the date (left justified) and and animated weather icon with inside/outside temp (right justified) overlayed on top of the graph that was created by the interior temperature. A buddy of mine and I have been racking our brain on how this is accomplished.
Even more love for the pop-ups!
v1.7.2
Hello everyone!
Here’s another update for our beloved pop-ups, with an additional significant performance boost for users with numerous pop-ups! 
New Features
- Pop-up Content Background Update: In v1.7.0, I added a toggle to allow cameras to be updated in the background (
background_camera: true). This feature has now been replaced bybackground_update: true(not recommended). This is because the pop-ups now remove the entire content, not just the cameras, when they are closed. This should greatly improve performance for some users with many pop-ups!
Bug Fixes and Optimizations
- Dashboard Reload Issue: This update should finally and definitively fix the reload issue discussed here. This issue was occurring on some setups with a lot of pop-ups, primarily on iOS on the Companion app. This fix should also significantly improve performance for users under these conditions! If you don’t see any difference, clear the cache and reboot your iOS device to be sure.
- Displayed State Not Updating: In some cases, the states were not updating in some Bubble Cards, especially when leaving Home Assistant for some time. This issue should now be fixed!
Thank you once again for your continued support!
v1.7.1
If you missed it you can read this changelog.
v1.7.0
Important: Please read this changelog before updating if you missed the v1.7.0 update.
4 Likes
Way too much love for the pop-ups!
v1.7.3
Hi again!
This update was rolled out swiftly, bringing yet another performance enhancement, particularly for some iOS/Safari users, along with some important fixes!
Bug fixes and optimizations
- Dashboard reload issue: I’ve optimized the code that was modified to fix the reload issue discussed here. This should also rectify some issues that were introduced in v1.7.2.
- More code clean up: This update includes further code cleanup, which should reduce CPU usage and even enhance the initialization process. Thank you @Woyken for your help!
Thank you once again for your continued support!
v1.7.2
If you missed it you can read this changelog.
v1.7.1
If you missed it you can read this changelog.
v1.7.0
Important: Please read this changelog before updating if you missed the v1.7.0 update.
4 Likes
Hi
This is my first rodeo with bubble card and I cannot make pop ups work. I read and watch some examples on how to configure pop ups but i’m probably missing something:
First of all I created a vertical stack card with the pop up bubble card and some elements just to try it:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#prueba'
name: prueba
icon: mdi:test-tube
hide_backdrop: true
- type: custom:bubble-card
card_type: separator
name: separador de prueba
icon: mdi:air-conditioner
After that I created an horizontal buttons stack pointing to #prueba. This is the code:
type: custom:bubble-card
card_type: horizontal-buttons-stack
1_link: '#prueba'
1_icon: mdi:chart-line
rise_animation: false
But when I push the button nothing happens. This is the link that is charged in my browser with both buttons.
http://192.168.0.12:8123/lovelace/3#prueba
What am I doing wrong? It didn’t seem very difficult but apparently I’m missing something
I tried also with a typical button, but the result is the same:
works for me in this configuration
title: Home
views:
- path: default_view
title: Home
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#prueba'
name: prueba
icon: mdi:test-tube
- type: custom:bubble-card
card_type: separator
name: separador de prueba
icon: mdi:air-conditioner
- type: custom:bubble-card
card_type: horizontal-buttons-stack
1_link: '#prueba'
1_icon: mdi:chart-line
see if that test code works in a test environment before moving further.
I think its your type in the horizontal stack from looking at it, “- type:”
Ok, I can answer myself. I’m feeling a bit stupid. The pop up card was in another tab, an apparently it has to be in the same tab as the button to open it.
I have another question.
I have successfully configure a pop up to show a graph. The graph is configure to fit in the mobile screen, but after adding the pop up card button at the top of the card, a scroll appears and it’s not possible to see the whole graph without scrolling
Is there any way to hide the pop up card button? As the button to close the card also appears at the button, I think it is redundant.
I’m glad that you fixed your issue! For your question you can change the order of your horizontal buttons stack by putting it before your pop-up, or you can use a regular button to open your pop-up. Here is an example from the documentation:
ok, but that system hide the bottom button, what I want to hide is the pop up card defined in the vertical stack, the one marked in red:
I think the button in the bottom is more useful in a mobile view as your fingers are usually at the bottom of the screen.
To hide the header you can add this to your pop-up card in YAML:
styles: |
.pop-up > :first-child {
display: none !important;
}
Thanks, that worked perfectly.
Hi guys, just start playing with these cards, but how can I get rid of the top “unused” space?
Is there a theme or something? Before I had mushroom 
cards, can I use that theme for mobiel?
Hi,
have a question about the „Separator“ I‘d like to have the icon and font-size a little bigger. How do I achieve this?
I already tried the following approach:
styles: |
ha-card {
font-size: 12px;
}
Just to see if I can change the font-size… but that doesn‘t seem to work
Any help would be much appreciated 
Have you tried with font-size: 20px !important; ?
Yeah, just tried… but makes no difference… nothing changes…
I‘m trying to do this on an iPad… should I better try on a PC?
Edit: PC doesn‘t make a difference either…
I will need to try, it’s maybe a bit different on that one.
Edit: This is working:
styles: |
* {
font-size: 20px !important;
}
Yes, that works for the font-size Thanks! Tried it also for icon-size but there it has no effect…
Edit: just noted that icon-size changes accordingly to the changed font-size
Im trying to integrate a popup on a picture elements card,
But when i load the page, i get an empty card in the middle of the page.
I added the popup fix to the configuraiton.yaml and cleared my cache, but it still displays
- type: custom:hui-element
card_type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#sittingroom'
name: Sitting Room
icon: mdi:sofa
entity: light.sitting_room
back_open: true
style:
left: 50%
top: 50%
