Increase font size tooltips + position then static (#9713)

This commit is contained in:
Bram Kragten 2021-08-04 18:19:38 +02:00 committed by GitHub
parent 028b799d2c
commit 7fcea16c6b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 15 deletions

View File

@ -126,8 +126,10 @@ class HuiEnergyCarbonGaugeCard
<ha-card>
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<paper-tooltip animation-delay="0" for="info" position="left">
This card represents how much of the energy consumed by your home was
generated using non-fossil fuels like solar, wind and nuclear.
<span>
This card represents how much of the energy consumed by your home
was generated using non-fossil fuels like solar, wind and nuclear.
</span>
</paper-tooltip>
${value !== undefined
@ -194,10 +196,14 @@ class HuiEnergyCarbonGaugeCard
top: 4px;
color: var(--secondary-text-color);
}
paper-tooltip > span {
font-size: 12px;
line-height: 12px;
}
paper-tooltip {
width: 80%;
max-width: 250px;
margin-top: 10%;
top: 8px !important;
}
`;
}

View File

@ -98,11 +98,13 @@ class HuiEnergyGridGaugeCard
<ha-card>
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<paper-tooltip animation-delay="0" for="info" position="left">
This card represents your energy dependency.
<br /><br />
If it's green, it means you produced more energy than that you
consumed from the grid. If it's in the red, it means that you relied
on the grid for part of your home's energy consumption.
<span>
This card represents your energy dependency.
<br /><br />
If it's green, it means you produced more energy than that you
consumed from the grid. If it's in the red, it means that you relied
on the grid for part of your home's energy consumption.
</span>
</paper-tooltip>
${value !== undefined
? html`<ha-gauge
@ -162,10 +164,14 @@ class HuiEnergyGridGaugeCard
top: 4px;
color: var(--secondary-text-color);
}
paper-tooltip > span {
font-size: 12px;
line-height: 12px;
}
paper-tooltip {
width: 80%;
max-width: 250px;
margin-top: 10%;
top: 8px !important;
}
`;
}

View File

@ -88,11 +88,14 @@ class HuiEnergySolarGaugeCard
<ha-card>
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<paper-tooltip animation-delay="0" for="info" position="left">
This card represents how much of the solar energy was used by your
home and was not returned to the grid.
<br /><br />
If you frequently produce more than you consume, try to conserve this
energy by installing a battery or buying an electric car to charge.
<span>
This card represents how much of the solar energy was used by your
home and was not returned to the grid.
<br /><br />
If you frequently produce more than you consume, try to conserve
this energy by installing a battery or buying an electric car to
charge.
</span>
</paper-tooltip>
${value !== undefined
? html`<ha-gauge
@ -157,10 +160,14 @@ class HuiEnergySolarGaugeCard
top: 4px;
color: var(--secondary-text-color);
}
paper-tooltip > span {
font-size: 12px;
line-height: 12px;
}
paper-tooltip {
width: 80%;
max-width: 250px;
margin-top: 10%;
top: 8px !important;
}
`;
}