Custom Card in More-Info

Is it possible to customize the more-info pop up?

Example, have a “Lights” button and if i held it down or changed toggle to more-info have the popup display a few lights from different rooms…

Yes, using card mod. See: https://github.com/thomasloven/hass-browser_mod#popup

Awesome, thanks man.

I am a little confused on where the popup card should go in my yaml. It sounds like from the documentation it should be listed as a regular view and would be assigned to everything on that lovelace page? I was hoping to use a custom popup for a few different buttons on the same page. I may be reading that wrong, this is what I have and I dont get a popup at all, even the regular more-info.

(i do have button card and browser mod installed from HACS…this config works, but when I add the popup nothing happens when I touch it or hold it)

THank you.

          - type: "custom:button-card"
            entity: light.living_room_lights
            name: pp
            size: 80px
            show_name: false
            tap_action: more-info
            service: browser_mod.popup
            service_data:
            card:
              type: entities
              entities:
                - light.living_room_lights
                - light.kitchen_lights
                - light.basement_lights

EDIT: Fixed Copy/Paste Error

I don’t actually use it but that’s not what I got from reading the instructions. All you need to do is define the pop-up in the service data for the button, and watch your indentation, it’s important. Like this:

          - type: "custom:button-card"
            entity: light.living_room_lights
            name: pp
            size: 80px
            show_name: false
            tap_action: more-info
            service: browser_mod.popup
            service_data:
               deviceID:
                 - this
                 - dashboard
               card:
                 type: entities
                 title: If You Want One
                 entities:
                   - light.living_room_lights
                   - light.kitchen_lights
                   - light.basement_lights

Thanks for helping. Ive been playing with that and Im getting an error i cant figure out in the logs. The button cards works in a few other lovelace pages, it displays fine here but when i click on it i get nothing. the log shows

2020-04-16 09:29:31 ERROR (MainThread) [frontend.js.latest.202004072] http://ha:8123/hacsfiles/button-card/button-card.js:1867:55 Uncaught TypeEr
ror: Cannot assign to read only property '0' of string 'more-info'

config…

          - type: "custom:button-card"
            entity: light.living_room_lights
            name: pp
            size: 80px
            show_name: false
            tap_action: more-info
            service: browser_mod.popup
            service_data:
              deviceID:
                - bb882c14_c066b6ee
              card:
                type: entities
                title: If You Want One
                entities:
                  - light.living_room_lights
                  - light.kitchen_lights
                  - light.basement_lights

I dont have have hacsfiles dir, the error looks like it is trying to find something there… here is my dir structure.

[email protected]:/home/homeassistant/.homeassistant$ ls www
 bg.png   blue.jpg   community   d.png   main_floor.jpg   plex.jpeg  'PRA-Client  Info-form-rev fillable fixed.pdf'   shit.jpg   wb.jpg
[email protected]:/home/homeassistant/.homeassistant$ 
[email protected]:/home/homeassistant/.homeassistant$ 
[email protected]:/home/homeassistant/.homeassistant$ ls www/community/
atomic_calendar       entity-attributes-card                          lovelace-layout-card          nest-layout-card.js
banner-card           garbage-collection-card                         lovelace-mini-thermostat      search-card
bar-card              Home-Assistant-Lovelace-Local-Conditional-card  lovelace-more-info-card       sidebar-card
button-card           Homekit-panel-card                              lovelace-multiple-entity-row  simple-thermostat
button-entity-row     light-entity-card                               lovelace-paper-buttons-row    simple-weather-card
button-text-card      light-entity-row                                lovelace-roomba-vacuum-card   stack-in-card
button-toolbar        light-popup-card                                lovelace-slider-entity-row    swipe-card
calendar-card         lovelace-auto-entities                          lovelace-state-switch         text-divider-row
check-button-card     lovelace-card-mod                               lovelace-text-input-row       text-element
config-template-card  lovelace-card-preloader                         lovelace-thermostat-card      thermostat-popup-card
custom-header         lovelace-card-tools                             media_player-popup-card       vertical-stack-in-card
custom-sonos-card     lovelace-fold-entity-row                        mini-graph-card               weather-card
decluttering-card     lovelace-gap-card                               mini-media-player
[email protected]:/home/homeassistant/.homeassistant$

again, thank you much

I can’t see anything wrong with what you have. You could ask for help here: 🔹 Card-mod - Add css styles to any lovelace card

That error has nothing to do with card-mod.
Tap_action likely does not have that syntax.

Thanks guys appreciate you taking a look. I removed the tap_action and got the same result. I guess I will have to go another route, I thought I had seen people on here doing that but I must have been wrong. No biggie, thanks again

Normally you use tap action like so:

tap_action:
  action: more-info

Ugh that’s what it is, wrong tap action. Should be call-service, not more-info

            tap_action: call-service
            service: browser_mod.popup
            service_data:
               deviceID:
                 - this
                 - dashboard
               card:
                 type: entities
                 title: If You Want One
                 entities:
                   - light.living_room_lights
                   - light.kitchen_lights
                   - light.basement_lights

Thanks again, that makes sense. I tried it and still nothing, with a tap or a hold. Ive tried this on a couple devices too.

I get this in the logs. Ive tried reinstalling button_card too.

2020-04-17 01:11:15 ERROR (MainThread) [frontend.js.latest.202004072] http://ha:8123/hacsfiles/button-card/button-card.js:1867:55 Uncaught TypeError: Cannot assign to read only property '0' of string 'call-service'
2020-04-17 01:11:16 ERROR (MainThread) [frontend.js.latest.202004072] http://ha:8123/hacsfiles/button-card/button-card.js:1867:55 Uncaught TypeError: Cannot assign to read only property '0' of string 'call-service'
2020-04-17 01:11:20 ERROR (MainThread) [frontend.js.latest.202004072] http://ha:8123/hacsfiles/button-card/button-card.js:1867:55 Uncaught TypeError: Cannot assign to read only property '0' of string 'call-service'
2020-04-17 01:11:46 WARNING (MainThread) [aiohttp.websocket] websocket connection is closing.
2020-04-17 01:11:47 ERROR (MainThread) [hacs] Tried to serve up '/config/www/community/button-text-card/index.m.js.map' but it does not exist

EDIT: I also see this in the inspect…

button-card.js:1867 Uncaught TypeError: Cannot assign to read only property '0' of string 'call-service'
    at button-card.js:1867
    at Array.forEach (<anonymous>)
    at n (button-card.js:1866)
    at HTMLElement._evalActions (button-card.js:1868)
    at HTMLElement._handleTap (button-card.js:1875)
    at HTMLElement._handleAction (button-card.js:1871)
    at A.handleEvent (button-card.js:287)
    at HTMLElement.A.__boundHandleEvent (button-card.js:276)
    at zt (button-card.js:874)