Forecast tooltips hang over edge of card

[scotty1395]

Checklist:

• [x] I updated to the latest version available
• [x] I cleared the cache of my browser

Release with the issue: 0.0.2

Last working release (if known):

Browser and Operating System: Windows 11/Firefox, iOS/HA app

Description of problem:

The forecast tooltips hang over the edge of the card. This causes the card to take up empty horizontal space even when they are not displayed or disabled. This results in the next card on the dashboard to be displayed below rather than next to the platinum card when there is room to display them side by side. This also causes the dashboard on the iOS app to be horizontally scrollable into empty space.

Reducing the number of days displayed to 2 stops the tooltip from hanging over the edge of the card and solves the problem, but isn't ideal only having two days displayed.

Javascript errors shown in the web inspector (if applicable):

Additional information:

[Makin-Things]

Acknowledged but a low priority right now. I need to get to writing some half decent doco for the new card as a priority. I personally had the tooltips and would prefer to just get rid of them. Have you tried the new vertical daily forecast layout?

[Makin-Things]

I have done a fix for this. The easiest way was to simply reduce the width (back to the what the previous card used), which stops it hanging over the edges. I did a release earlier today (0.0.3b2), but only made this change after that so it's not in the wild yet, but the next pre-release or full release will have the change.

[Makin-Things]

0.0.3 has been released that addresses this.

[lichenophile]

I still run into this issue on 0.0.3

To solve it, I added the solution I used for the bom-weather-card, tooltip_width: 90 This seems to be the maximum value I could use for the card to display correctly on all my devices.

As I understand it, YAML options not added to the visual editor are planned to be removed. As such, I would greatly appreciate it's addition to the visual editor.

Another thing to note is that the line height when displaying 2 lines of tooltip seems like it could do with a reduction.

I really hope the tooltips remain an option, as they quickly allow give an overview for upcoming days where the same icon is used for various related conditions such as "shower or two", "a few showers", "showers developing" etc.

[DavidFW1960]

We have not included any styling in the GUI editor yet but the card still uses some of the yaml options. Styling is going to be added to the card

[Makin-Things]

Reopening to remind me to take another look at this. For the default width of tooltips (110px) to not fit I think you must not be showing cards at full size (HA tries to keep cards 492px wide if there is enough space).

[Makin-Things]

@grastraa can I get an update on this from you. I am keen to understand why you are having issues. What environment are you having a problem in and if you are able to use debug tools, what is the width of the card?

[lichenophile]

Home Assistant 2022.7.6 Supervisor 2022.07.0 Operating System 8.2 Frontend 20220707.1 - latest Default Masonry view with code as follows:

type: vertical-stack
cards:
  - card_config_version: 4
    custom1_icon: phu:outside-temp
    custom1_units: °C
    custom1_value: sensor.balcony_temperature
    custom2_icon: si:rainmeter
    custom2_units: '%'
    custom2_value: sensor.balcony_humidity
    custom3_icon: tc:dew-point-perception-hand
    custom3_units: ‎
    custom3_value: sensor.balcony_perception
    custom4_icon: tc:thermal-perception-hand
    custom4_value: sensor.balcony_simmerzone
    daily_extended_forecast_days: 7
    daily_extended_name_attr: state
    daily_extended_use_attr: true
    daily_forecast_days: 5
    daily_forecast_layout: horizontal
    [_entity list truncated_]
    extended_name_attr: state
    extended_use_attr: true
    option_daily_show_extended: true
    option_icon_set: hybrid
    option_pressure_decimals: 1
    option_static_icons: false
    option_time_format: 24hour
    option_today_decimals: false
    option_tooltips: true
    section_order:
      - title
      - overview
      - extended
      - slots
      - daily_forecast
    show_decimals: true
    show_section_title: true
    show_separator: true
    slot_l1: observed_min
    slot_l2: observed_max
    slot_l3: rainfall
    slot_l4: uv_summary
    slot_l5: wind
    slot_l6: custom1
    slot_l7: custom4
    slot_l8: remove
    slot_r1: forecast_min
    slot_r2: forecast_max
    slot_r3: popforecast
    slot_r4: fire_summary
    slot_r5: pressure
    slot_r6: custom2
    slot_r7: custom3
    slot_r8: remove
    type: custom:platinum-weather-card

Latest HA app for Android on a OnePlus7 1080 x 2340 pixels: browser_mod sensor info for this device reports: width: 384 height: 804 Mozilla/5.0 (Linux; Android 11; GM1900 Build/RKQ1.201022.002; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/103.0.5060.71 Mobile Safari/537.36 Home Assistant/2022.6.0-2398 (Android 11; GM1900)

There appears to be an issue with dead-space either side of the text displayed. Perhaps there are two overlapping issues here?

Simulating a similar mobile view on firefox based on the user agent and resolution reported by this sensor (+ already known and assumed DPR): This results in a much milder overspill as the dead-space issue doesn't seem to be present for some reason. Dev tools using this simulated view gives me the following: When tweaking the simulations screen width from 384 to 410 the issue is elliminated. I know this sandbox doesn't seem quite the same as the HA app for whatever reason, but it's all I knew how to do. I'm also unsure if the value needed to eliminate this issue will chance depending on the length of text displayed.

I have also had this issue on my partners Pixel 6 with the old weather card, thought I haven't had a chance to look since updating to this card. When attempting to simulate her device which reports as 412x852 via browser_mod, the issue is not present, probably because the issue present milder in my firefox sandbox where the dead-space isn't present.

I have a slew of common HACS lovelace components installed that I use, which I realise may be effecting the situation. Unfortunate that I don't have a set up I can sandbox a clean HA instance into to control for that.

[lichenophile]

I forgot to add, I also use browser_mod for it's popup card feature which exhibits this issue when placing this card within it. The default popup size reports a width of 400 all the way down to the platinum-weather-card itself, and the issue presents on every device I open HA on, regardless of window size (as the width seems to be set as static (unless smaller than 400 ig)): Result; the minor version of the issue is present:

[Makin-Things]

I have released a beta 0.0.5b6 that should address this. The tooltip is now a constant size (the width of the card) and the caret just gets moved to point to the correct day. Can you test and let me know if it solves your problem.

[scotty1395]

Looks good, but “tomorrow” hangs over for some reason. Other days are fine.

[Makin-Things]

What browser is that on? Also it could be a caching issue.

[scotty1395]

Those screen shots were from the iOS app. Reset the cache but same as the screenshots.

[scotty1395]

Apologies Simon. Checked again today and "tomorrow" now shows as expected. Suspect it was a caching issue.

[Makin-Things]

Cool. Thanks for letting me know. The frame for the tooltip should always stay in the same spot. You can actually put longer text (ie. a more detailed forecast) and the box will grow upwards.