Excuse me to revive a 1.5 year old post but is there any way to get rid of this annoying tooltip (set to the title, which is mandatory)?
Itās everywhere on the screen, even outside the popup.
Using Chromeās Inspector I cannot find any hint on any :hover attribute so Iām unable to kill the tooltip with card_mod.
Help!
Edit: I saw the FR in the github repository.
@thomasloven: Can you ājustā remove the title="whatever" from the <card-tools-popup>? 
Hi, Iāve created a popup card with a custom button-card inside, containing more button cards etc. For example Iāve created a button to toggle lights, the toggle is working, only the card is not updated and not showing the changed styles/icon. The card is working as a normal lovelace card. Any ideas how to fix this? Thanks
styles:
card:
- border: |
[[[
if (states['light.woonkamer'].state == "on")
return "2px solid gold";
else return "2px solid var(--accent-color)"
]]]
Hi,
is it possible to insert a tab navigation in a browser mod popup, like in the Screenshot? Thanks
Hello,
i installed it over HACS and made in the configuration.yaml the entry : browser_mod:
but when i click on my custom card always comes a error that he cant find the service.
here is my code perhaps someone has a hint?
- type: custom:button-card
icon: mdi:window-open-variant
name: Fenster
tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- type: custom:bar-card
entity: sensor.tempr_bedroom1
- type: vertical-stack
cards:
- type: custom:mini-graph-card
entity: sensor.tempr_backyard
- type: custom:mini-graph-card
entity: sensor.tempbedroom1_humidity
type: horizontal-stack
deviceID:
- this
large: true
style:
background: '#141414'
title: Temperatures
I got the popup to work and it is showing my live feed when the doorbell is pressed but the popup is very small. Any thoughts on how i can make it fullscreen or at least bigger then the small popup showing up now?
Thanks in advance
What did you try/do?
Perhaps as a starting point
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: ABC
large: false
style: |
@media (min-width: 812px) {
:host .content {
width: 90vw;
height: 80vh;
}
Thanks! i didnt know where to begin but maybe this wil helpā¦
Look at my code there is hide_header: true
What must I add in the configuration.yaml when I installed it over hacs?
until now i only installed it over hacs, not more.
i tried the other method with fire-dom-event because the wiki says that this is better for more than one device.
now i get no error, but no popup.
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: kitchen's light
card:
type: button
entity: light.deckenlampe_2_3
i tried this basic code aswell, but no popup,
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: ABC
large: false
style: |
@media (min-width: 812px) {
:host .content {
width: 90vw;
height: 80vh;
}
Hey, your first post was missing the attribute, I added it in my quote. What error message are you getting? Iām not familiar with HACS as I install everything locally myself. But I could understand that in your first code example the hide_header attribute was missing because no title was set.
Did you try to add browser_mod without HACS?
okay without hacs it works.
i had another problem, i can paste by style what i want but nothing changes in the popup
tap_action:
action: call-service
service: browser_mod.popup
service_data:
style:
align-items: center
background-color: rgba(190, 190, 190, 0.2)
opacity: 0.2
padding-bottom: 50px
border-radius: 60px
'--ha-card-border-radius': 15px
'--ha-card-background': '#fff5bc'
hide_header: false
card:
cards:
Thanks, made my day as well.
okay, now i figured it out, the popup now works well.
i played a little bit with the css style functions.
in my firefox it works well. than i went to my tablet with fully kiosk browser, there works the css not, and then i checked my iphone with the official home assistant app, and there is NO css.
thats really weired,
can i do there something?
style: |
@media (min-width: 812px) {
:host .content {
width: 40vw;
overflow: hidden;
height: 28vh;
padding-top: 10px;
align-items: center;
background: center / cover no-repeat url("/local/profilbilder/background.jpg")
}
I do not use IPhones neither use fully kiosk.
I have an android tablet with wallpanel in full screen mode.
That works perfectly.
Maybe reduce some customizings and start simply with height and width.
My stomach feeling is, that the background item line causes problems on your other devices.
Is there a min-width fitting to the,edia query? This was only an example.
@arganto
yeah you are right, the
@media (min-width: 812px) {
caused the problem. i removed it and now it works on both devices.
the background image works fine. but thank you both
another question,
is it possible to save the code in a extra file? and include it in the lovelance ?
this would save much space.
i tried it so
tap_action: '!include /config/popup/fenster.yaml'
and the file
action: fire-dom-event
browser_mod:
deviceID:
- laptop_julia
- firehd_tablet
command: popup
auto_close: false
title: Fenster Sensoren
theme: Custom Background Theme
large: false
style: |
:host .content {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: center / cover no-repeat url("/local/profilbilder/background.jpg");
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
size: 40px
entity: binary_sensor.fenstersensor_badezimmer
name: Bade Zimmer
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 10px
- font-weight: bold
- font-size: 13px
- text-transform: uppercase
state:
- justify-self: center
- padding-left: 0px
- font-weight: light
- font-size: 12px
state:
- value: 'on'
styles:
icon:
- color: red
- type: custom:button-card
size: 40px
entity: binary_sensor.fenstersensor_toilette
name: Toilette
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 10px
- font-weight: bold
- font-size: 13px
- text-transform: uppercase
state:
- justify-self: center
- padding-left: 0px
- font-weight: light
- font-size: 12px
state:
- value: 'on'
styles:
icon:
- color: red
- type: custom:button-card
size: 40px
entity: binary_sensor.fenstersensor_kinderzimmer
name: Kinder Zimmer
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 10px
- font-weight: bold
- font-size: 13px
- text-transform: uppercase
state:
- justify-self: center
- padding-left: 0px
- font-weight: light
- font-size: 12px
state:
- value: 'on'
styles:
icon:
- color: red
- type: horizontal-stack
cards:
- type: custom:button-card
size: 40px
entity: binary_sensor.fenstersensor_schlafzimmer
name: Schlaf Zimmer
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 10px
- font-weight: bold
- font-size: 13px
- text-transform: uppercase
state:
- justify-self: center
- padding-left: 0px
- font-weight: light
- font-size: 12px
state:
- value: 'on'
styles:
icon:
- color: red
- type: custom:button-card
size: 40px
entity: binary_sensor.fenstersensor_wohnzimmer
name: Wohn Zimmer
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 10px
- font-weight: bold
- font-size: 13px
- text-transform: uppercase
state:
- justify-self: center
- padding-left: 0px
- font-weight: light
- font-size: 12px
state:
- value: 'on'
styles:
icon:
- color: red
- type: horizontal-stack
cards:
- type: custom:button-card
name: Mehr Informationen
color_type: icon
tap_action:
action: navigate
navigation_path: /lovelace/fenster
color: rgb(3,169,244)
icon: mdi:weather-night
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- height: 50px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
name:
- padding-left: 0px
- font-weight: bold
- font-size: 13px
- text-transform: uppercase
state:
- justify-self: start
- padding-left: 10px
i get this error in the logs
http://192.168.0.73:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:547:3849 TypeError: 0 is read-only
I just started trying browser_mod. So far I just use it to replace a few more-info dialogs, but itās fascinating seeing all the creativity it brings.
I have two questions:
Can I template somehow to inherit the entity so I dont have to specify each sensor again - like in template-entity-row? I tried a few combinations, but havenāt succeeded so far. See mockup below.
When I use another card for more-info, the close X isnāt centered and the dividing row is missing(?). Expected behavior, a bug or something I can do? https://imgur.com/a/kOctecU
My config:
popup_cards:
sensor.floor_1_temperature_tmpl:
title: EntrƩplan
card:
type: custom:mini-graph-card
entities:
- [config.entity]
show:
icon: false
name: false
How I can popup this window directly from input_datetime.mami_google_calendar_date
I try like this:
service: browser_mod.more_info
data:
entity_id: input_datetime.mami_google_calendar_date
but I get this:
and then I must click on date to get what I wanna heave.
browser_mod.more_info does nothing else like:
tap_action:
action: more-info
you should use the command popup like in many examples above
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Calendar
card:
type: calendar
entities:
- calendar.gmail_1
- calendar.gmail_2
initial_view: dayGridMonth