Raspberry Pi popup with browser_mod

Hi all, I would like to ask a little bit of help on this, I’ve been struggling around with it, searching through internet but I still can’t understand where is the error on this.

I have the following button_card that I found and loved in internet:

image

It has the following code:

aspect_ratio: 1.2/1
type: custom:button-card
custom_fields:
  cpu: |
    [[[
      return `<ha-icon
        icon="mdi:cpu-64-bit"
        style="width: 12px; height: 12px; color: var(--paper-item-icon-active-color);">
        </ha-icon><span>  CPU: <span style="color: var(--text-color-sensor);">${states['sensor.processor_use'].state}%</span></span>`
    ]]]
  ram: |
    [[[
      return `<ha-icon
        icon="mdi:memory"
        style="width: 12px; height: 12px; color: var(--paper-item-icon-active-color);">
        </ha-icon><span>  RAM: <span style="color: var(--text-color-sensor);">${states['sensor.memory_use_percent'].state}%</span></span>`
    ]]]
  ssd: |
    [[[
      return `<ha-icon 
        icon="mdi:harddisk"
        style="width: 12px; height: 12px; color: var(--paper-item-icon-active-color);">
        </ha-icon><span>  SD: <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent_config'].state}%</span></span>`
    ]]]
  temp: |
    [[[
      return `<ha-icon
        icon="mdi:thermometer"
        style="width: 18px; height: 18px; color: var(--text-color-sensor);">
        </ha-icon><span>${entity.state}°C</span>`
    ]]]
entity: sensor.processor_temperature
icon: mdi:raspberry-pi
name: RPi 3B+
styles:
  card:
    - padding: 10%
    - font-size: 12px
    - text-shadow: 0px 0px 0px black
    - text-transform: uppercase
    - font-variant: small-caps
  custom_fields:
    cpu:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': '[[[ if (states["sensor.processor_use"].state >= 5) return "red"; ]]]'
    ram:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.memory_use_percent"].state >= 80) return "red";
          ]]]
    ssd:
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.disk_use_percent_config"].state >= 80) return
          "red"; ]]]
    temp:
      - align-self: start
      - justify-self: end
      - '--text-color-sensor': >
          [[[ if (entity.state < 50) return 'green'; if (entity.state >= 60 &&
          entity.state < 80) return 'orange'; else return 'red'; ]]]
  grid:
    - grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "ssd ssd"'
  icon:
    - color: |
        [[[
          if (entity.state < 50) return 'green';
          if (entity.state >= 60 && entity.state < 80) return 'orange';
          else return 'red';
        ]]]
    - width: 50%
    - margin-top: '-10%'
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
  name:
    - font-weight: bold
    - font-size: 12px
    - color: black
    - padding-bottom: 4px
    - justify-self: start

Here everything works ok.

Now I would like that if someone clicks on it, a custom “more-info” pop up, the result should be like this:

The code is as follows:

type: custom:vertical-stack-in-card
cards:
  - entities:
      - entity: sensor.last_boot
        icon: mdi:clock
        name: Último Boot
    show_header_toggle: false
    title: Raspberry Pi 3B+
    type: entities
  - cards:
      - color_thresholds:
          - color: '#bf4040'
            from: 50
            to: 100
          - color: '#ffde00'
            from: 10
            to: 49
          - color: '#40bf40'
            from: 0
            to: 9
        entities:
          - entity: sensor.processor_use
            index: 0
            name: Max
            aggregate_func: max
            color: green
            show_fill: false
          - entity: sensor.processor_use
            index: 0
            name: Avg
            aggregate_func: avg
            show_fill: false
          - entity: sensor.processor_use
            index: 0
            name: Min
            aggregate_func: min
            color: lime
            show_fill: false
        icon: mdi:memory
        type: custom:mini-graph-card
      - color_thresholds:
          - color: '#bf4040'
            from: 56
            to: 100
          - color: '#ffde00'
            from: 51
            to: 55
          - color: '#40bf40'
            from: 0
            to: 50
        decimals: 0
        state_adaptive_color: true
        entities:
          - entity: sensor.processor_temperature
            index: 0
            name: max
            aggregate_func: Max
            color: green
            show_fill: false
          - entity: sensor.processor_temperature
            index: 0
            name: avg
            aggregate_func: Avg
            show_fill: false
          - entity: sensor.processor_temperature
            index: 0
            name: Min
            aggregate_func: min
            color: lime
            show_fill: false
        type: custom:mini-graph-card
    type: horizontal-stack
  - cards:
      - aspect_ratio: 1/1
        custom_fields:
          cpu: |
            [[[
              return `<ha-icon
                icon="mdi:cpu-64-bit"
                style="width: 12px; height: 12px; color: var(--paper-item-icon-active-color);">
                </ha-icon><span>  CPU: <span style="color: var(--text-color-sensor);">${states['sensor.processor_use'].state}%</span></span>`
            ]]]
          ram: |
            [[[
              return `<ha-icon
                icon="mdi:memory"
                style="width: 12px; height: 12px; color: var(--paper-item-icon-active-color);">
                </ha-icon><span>  RAM: <span style="color: var(--text-color-sensor);">${states['sensor.memory_use_percent'].state}%</span></span>`
            ]]]
          ssd: |
            [[[
              return `<ha-icon 
                icon="mdi:harddisk"
                style="width: 12px; height: 12px; color: var(--paper-item-icon-active-color);">
                </ha-icon><span>  SD: <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent_config'].state}%</span></span>`
            ]]]
          temp: |
            [[[
              return `<ha-icon
                icon="mdi:thermometer"
                style="width: 18px; height: 18px; color: var(--text-color-sensor);">
                </ha-icon><span>${entity.state}°C</span>`
            ]]]
        entity: sensor.processor_temperature
        icon: mdi:desktop-tower-monitor
        name: Raspberry Pi4 4gb
        styles:
          card:
            - padding: 10%
            - font-size: 12px
            - text-shadow: 0px 0px 0px black
            - text-transform: uppercase
            - font-variant: small-caps
          custom_fields:
            cpu:
              - padding-bottom: 2px
              - align-self: middle
              - justify-self: start
              - '--text-color-sensor': >-
                  [[[ if (states["sensor.processor_use"].state > 5) return
                  "red"; ]]]
            ram:
              - padding-bottom: 2px
              - align-self: middle
              - justify-self: start
              - '--text-color-sensor': >-
                  [[[ if (states["sensor.memory_use_percent"].state > 80) return
                  "red"; ]]]
            ssd:
              - align-self: middle
              - justify-self: start
              - '--text-color-sensor': >-
                  [[[ if (states["sensor.disk_use_percent_config"].state > 80)
                  return "red"; ]]]
            temp:
              - align-self: start
              - justify-self: end
              - '--text-color-sensor': >
                  [[[ if (entity.state < 50) return 'green'; if (entity.state >=
                  60 && entity.state < 80) return 'orange'; else return 'red';
                  ]]]
          grid:
            - grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "ssd ssd"'
          icon:
            - color: |
                [[[
                  if (entity.state < 50) return 'green';
                  if (entity.state >= 60 && entity.state < 80) return 'orange';
                  else return 'red';
                ]]]
            - width: 70%
            - margin-top: '-10%'
          img_cell:
            - justify-content: start
            - align-items: start
            - margin: none
          name:
            - font-weight: bold
            - font-size: 12px
            - padding-bottom: 4px
        type: custom:button-card
      - entity: sensor.speedtest_download
        name: Download (Mbps)
        type: gauge
        unit: []
      - entity: sensor.speedtest_upload
        name: Upload (Mbps)
        type: gauge
        unit: []
    type: horizontal-stack
  - align: split
    animation: auto
    attribute: false
    card_style: false
    charge_entity: false
    columns: 1
    decimal: 0
    delay: 5000
    direction: right
    entities:
      - entity: sensor.disk_use_percent_config
        severity:
          - color: '#40bf40'
            value: 10
          - color: '#ffde00'
            value: 50
          - color: '#bf4040'
            value: 100
      - entity: sensor.memory_use_percent
        severity:
          - color: '#40bf40'
            value: 0
          - color: '#ffde00'
            value: 50
          - color: '#bf4040'
            value: 100
    entity_config: true
    height: 40px
    icon: false
    icon_position: 'off'
    icon_style:
      filter: none
      height: 34px
      width: 34px
    indicator: auto
    limit_value: false
    max: 100
    min: 0
    minmax_style: false
    padding: 5px
    positions:
      icon: 'off'
      indicator: 'off'
      title: outside
    rounding: 5px
    saturation: 50%
    severity:
      - color: '#bf4040'
        from: 50
        to: 100
      - color: '#ffde00'
        from: 20
        to: 49
      - color: '#40bf40'
        from: 0
        to: 19
    show_icon: true
    show_minmax: false
    show_value: true
    speed: 1000
    style: |-
      bar-card-current, bar-card-backgroundbar {
        border-radius: 20px;
      }
      bar-card-value {
        margin-right: auto;
      }
    target: false
    title: false
    title_position: inside
    title_style:
      color: '#00000'
      font-weight: normal
      text-shadow: none
    type: custom:bar-card
    unit_of_measurement: false
    value_style:
      color: '#00000'
      font-size: 18px
      font-weight: normal
      text-shadow: none
    visibility: false
    width: 100%

The problem is that if I introduce this code at the end of the button_card:

...
    tap_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        hide_header: true
        card:
        - type: custom:vertical-stack-in-card
          cards:
            - entities:
                - entity: sensor.last_boot
...

It does nothing. It still shows the original more-info from sensor.processor_temperature:

image

I need your help and knowledge please!!

Thank you very much in advance.