As I was trying to respond @itajackass who asked to see code on how tooltips were implemented, I noticed that I can no longer make changes to my original post that started this thread. Apparently this is by design of the admins (see this post: Edit Original Post?). I am not going to weigh in on whether this is a good or bad policy, it is what it is… Unfortunately it means that the code in that post, which no longer works due to the many changes to HA and Lovelace along the way, cannot be corrected.
So, for those interested, I have posted the current version of my card on GitHub. You can get it here:
dark-sky-weather-card.js
For installation / configuration instructions please see the following file: Readme
Please note that my version of the card does not contain all of the changes that others have made to the card. It is based on the original I posted that started this thread. I plan on reviewing the changes that people have made and potentially adding them to my card if appropriate. I will attempt to keep this post updated as I make changes.
This version works with 0.84. and incorporates tooltips to show the daily summary information.
Note that in my version of the card I add an extra forecast day (0). This was in response to a breaking change that was made a couple of versions ago. The original platform provided the 0 (current day) forecast items without explicitly requesting them. The breaking change made this work like the rest of the forecast days which also meant that the entities for forecast day 0 now had a _0 appended to them. This is important so that the overnight low forecast can be correctly set for each day. eg: Day 1’s overnight forecast should come from forecast 0 to match the way it is displayed on the DarkSky website.
Corrected / Added 12 Dec 18
- Fixed Pressure UOM. The value returned from DarkSky is in millibars so the UOM now states mbar.
- Added Tooltips for daily summary
Added 13 Dec 18
- Added configuration flag capability
- Added tooltips flag (turns daily summary tooltips on or off)
- Added static_icons flag (switches between animated and static icons)
Added 14 Dec 18
- Added sunset flag. Allows display of sunset and sunrise icons.
- Added locale flag. Controls display of day names and time formats.
Added 16 Dec 18
- Tooltips now match icon color scheme (change to .css file)
- WInd direction localization now works for en, fr, it and de.
Modified 21 Dec 18
- Refactored the entire card. It is now based on the light weight LitElement class instead of the HTMLElement class.
- Moved all CSS code into the .js file. (The .css file is no longer needed.)
- Added several configuration options for controlling the look and feel of the tooltips.
Special note: If you use this version and beyond you must change the resource type for the card to module from js. Failure to do so will result in the card not loading and an error thrown stating there is an invalid token on line 1.
resources:
- type: module
url: /local/custom_ui/dark-sky-weather-card.js?v=7.2
Old Instructions (prior to 21 Dec Update)
I will leave these in place in case anyone wants to see how tooltips can be implemented but these notes do not reflect how the card currently works.
For those interested in implementing tooltips in other versions of the card, it is probably easiest to use the dark-sky-weather-card.js file linked above as a reference. Below are the modifications I made to it.
- Modify each forecast object by adding a entity summary attribute (last line in block below to each day)
const forecast1 = { date: forecastDate1, condition: this.config.entity_forecast_icon_1, temphigh: this.config.entity_forecast_high_temp_1, templow: this.config.entity_forecast_low_temp_1, summary: this.config.entity_summary_1, };
- Add another css class to the ‘daily’ container (I called mine fcasttooltip)
<div class="forecast clear"> ${forecast.map(daily => ` <div class="day fcasttooltip">
- Add the following line
<span class="fcasttooltiptext">${hass.states[daily.summary].state}</span>
As seen below:
The dark-sky-weather-card.css file also needs modification to implement the visibility and style of the tooltip class. Here are are the additions to the file:
dark-sky-weather-card.css (only showing additions)
.fcasttooltip {
position: relative;
display: inline-block;
}
.fcasttooltip .fcasttooltiptext {
visibility: hidden;
width: 110px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 50%;
left: 0%;
margin-left: -5px;
}
.fcasttooltip .fcasttooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.fcasttooltip:hover .fcasttooltiptext {
visibility: visible;
}
Also make sure to pass in the summary entities in ui-lovelace.yaml
entity_summary_1: sensor.dark_sky_summary_1 entity_summary_2: sensor.dark_sky_summary_2 entity_summary_3: sensor.dark_sky_summary_3 entity_summary_4: sensor.dark_sky_summary_4 entity_summary_5: sensor.dark_sky_summary_5
