jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-19 10:57:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace simple-tooltip with ha-tooltip (#24384)

Browse Source 
* Start with simple-tooltip migration

* Remove simple-tooltip

* Fix tooltip in hassio-repositories

* Remove space

* Update hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/components/ha-icon-overflow-menu.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/components/ha-target-picker.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/components/media-player/ha-media-player-browse.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/components/ha-target-picker.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Fix content props

* Use ha-tooltip in data-table-icon

* Update src/panels/config/areas/ha-config-area-page.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/panels/config/devices/ha-config-device-page.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/panels/config/integrations/ha-integration-card.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/panels/config/integrations/ha-integration-card.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/panels/config/integrations/ha-integration-list-item.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/panels/config/integrations/ha-integration-list-item.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Wendelin 2025-02-25 14:58:38 +01:00 committed by GitHub
parent 10c3e4c6f8
commit a7b1c45c00
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
42 changed files with 426 additions and 518 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
hassio/src/backups/hassio-backups.ts
View File

@ -253,13 +253,9 @@ export class HassioBackups extends LitElement {
"backup.delete_selected"
)}
.path=${mdiDelete}
id="delete-btn"
class="warning"
@click=${this._deleteSelected}
></ha-icon-button>
<simple-tooltip animation-delay="0" for="delete-btn">
${this.supervisor.localize("backup.delete_selected")}
</simple-tooltip>
`}
</div>
</div> `

25
hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
View File

@ -1,6 +1,5 @@
import "@material/mwc-button/mwc-button";
import { mdiDelete, mdiDeleteOff } from "@mdi/js";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -8,6 +7,7 @@ import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import { caseInsensitiveStringCompare } from "../../../../src/common/string/compare";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-tooltip";
import "../../../../src/components/ha-circular-progress";
import { createCloseHeading } from "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-icon-button";
@ -118,7 +118,16 @@ class HassioRepositoriesDialog extends LitElement {
<div>${repo.maintainer}</div>
<div>${repo.url}</div>
</div>
<div class="delete" slot="end">
<ha-tooltip
class="delete"
slot="end"
.content=${this._dialogParams!.supervisor.localize(
usedRepositories.includes(repo.slug)
? "dialog.repositories.used"
: "dialog.repositories.remove"
)}
>
<div>
<ha-icon-button
.disabled=${usedRepositories.includes(repo.slug)}
.slug=${repo.slug}
@ -128,18 +137,8 @@ class HassioRepositoriesDialog extends LitElement {
@click=${this._removeRepository}
>
</ha-icon-button>
<simple-tooltip
animation-delay="0"
position="bottom"
offset="1"
>
${this._dialogParams!.supervisor.localize(
usedRepositories.includes(repo.slug)
? "dialog.repositories.used"
: "dialog.repositories.remove"
)}
</simple-tooltip>
</div>
</ha-tooltip>
</ha-md-list-item>
`
)

1
package.json
View File

@ -56,7 +56,6 @@
"@lit-labs/motion": "1.0.8",
"@lit-labs/observers": "2.0.5",
"@lit-labs/virtualizer": "2.1.0",
"@lrnwebcomponents/simple-tooltip": "8.0.2",
"@material/chips": "=14.0.0-canary.53b3cad2f.0",
"@material/data-table": "=14.0.0-canary.53b3cad2f.0",
"@material/mwc-base": "0.27.0",

39
src/components/data-table/ha-data-table-icon.ts
View File

@ -1,7 +1,8 @@
import type { PropertyValues, TemplateResult } from "lit";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { customElement, property } from "lit/decorators";
import "../ha-svg-icon";
import "../ha-tooltip";
@customElement("ha-data-table-icon")
class HaDataTableIcon extends LitElement {
@ -9,30 +10,14 @@ class HaDataTableIcon extends LitElement {
@property() public path!: string;
@state() private _hovered = false;
protected render(): TemplateResult {
return html`
${this._hovered ? html`<div>${this.tooltip}</div>` : ""}
<ha-tooltip .content=${this.tooltip}>
<ha-svg-icon .path=${this.path}></ha-svg-icon>
</ha-tooltip>
`;
}
protected override firstUpdated(changedProps: PropertyValues): void {
super.firstUpdated(changedProps);
const show = () => {
this._hovered = true;
};
const hide = () => {
this._hovered = false;
};
this.addEventListener("mouseenter", show);
this.addEventListener("focus", show);
this.addEventListener("mouseleave", hide);
this.addEventListener("blur", hide);
this.addEventListener("tap", hide);
}
static styles = css`
:host {
display: inline-block;
@ -41,20 +26,6 @@ class HaDataTableIcon extends LitElement {
ha-svg-icon {
color: var(--secondary-text-color);
}
div {
position: absolute;
right: 28px;
inset-inline-end: 28px;
inset-inline-start: initial;
z-index: 1002;
outline: none;
font-size: 10px;
line-height: 1;
background-color: var(--simple-tooltip-background, #616161);
color: var(--simple-tooltip-text-color, white);
padding: 8px;
border-radius: 2px;
}
`;
}

8
src/components/entity/state-info.ts
View File

@ -1,4 +1,3 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import type { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
@ -6,6 +5,7 @@ import { computeStateName } from "../../common/entity/compute_state_name";
import type { HomeAssistant } from "../../types";
import "../ha-relative-time";
import "./state-badge";
import "../ha-tooltip";
@customElement("state-info")
class StateInfo extends LitElement {
@ -36,13 +36,13 @@ class StateInfo extends LitElement {
</div>
${this.inDialog
? html`<div class="time-ago">
<ha-tooltip>
<ha-relative-time
.hass=${this.hass}
.datetime=${this.stateObj.last_changed}
capitalize
></ha-relative-time>
<simple-tooltip animation-delay="0">
<div>
<div slot="content">
<div class="row">
<span class="column-name">
${this.hass.localize(
@ -68,7 +68,7 @@ class StateInfo extends LitElement {
></ha-relative-time>
</div>
</div>
</simple-tooltip>
</ha-tooltip>
</div>`
: html`<div class="extra-info"><slot></slot></div>`}
</div>`;

24
src/components/ha-help-tooltip.ts
View File

@ -1,25 +1,33 @@
import { mdiHelpCircle } from "@mdi/js";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import "./ha-svg-icon";
import "./ha-tooltip";
@customElement("ha-help-tooltip")
export class HaHelpTooltip extends LitElement {
@property() public label!: string;
@property() public position = "top";
@property() public position:
| "top"
| "bottom"
| "left"
| "right"
| "top-start"
| "top-end"
| "right-start"
| "right-end"
| "bottom-start"
| "bottom-end"
| "left-start"
| "left-end" = "top";
protected render(): TemplateResult {
return html`
<ha-tooltip .placement=${this.position} .content=${this.label}>
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
<simple-tooltip
offset="4"
.position=${this.position}
.fitToVisibleBounds=${true}
>${this.label}</simple-tooltip
>
</ha-tooltip>
`;
}

19
src/components/ha-icon-overflow-menu.ts
View File

@ -1,7 +1,6 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { mdiDotsVertical } from "@mdi/js";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { haStyle } from "../resources/styles";
@ -10,6 +9,7 @@ import "./ha-button-menu";
import "./ha-icon-button";
import "./ha-list-item";
import "./ha-svg-icon";
import "./ha-tooltip";
export interface IconOverflowMenuItem {
[key: string]: any;
@ -70,25 +70,20 @@ export class HaIconOverflowMenu extends LitElement {
<!-- Icon representation for big screens -->
${this.items.map((item) =>
item.narrowOnly
? ""
? nothing
: item.divider
? html`<div role="separator"></div>`
: html`<div>
${item.tooltip
? html`<simple-tooltip
animation-delay="0"
position="left"
: html`<ha-tooltip
.disabled=${!item.tooltip}
.content=${item.tooltip ?? ""}
>
${item.tooltip}
</simple-tooltip>`
: ""}
<ha-icon-button
@click=${item.action}
.label=${item.label}
.path=${item.path}
?disabled=${item.disabled}
></ha-icon-button>
</div> `
</ha-tooltip>`
)}
`}
`;

1
src/components/ha-network.ts
View File

@ -1,5 +1,4 @@
import { mdiStar } from "@mdi/js";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";

30
src/components/ha-target-picker.ts
View File

@ -1,4 +1,3 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
// @ts-ignore
import chipStyles from "@material/chips/dist/mdc.chips.min.css";
import "@material/mwc-button/mwc-button";
@ -47,6 +46,7 @@ import { floorDefaultIconPath } from "./ha-floor-icon";
import "./ha-icon-button";
import "./ha-input-helper-text";
import "./ha-svg-icon";
import "./ha-tooltip";
@customElement("ha-target-picker")
export class HaTargetPicker extends SubscribeMixin(LitElement) {
@ -339,6 +339,11 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
${type === "entity_id"
? ""
: html`<span role="gridcell">
<ha-tooltip
.content=${this.hass.localize(
`ui.components.target-picker.expand_${type}`
)}
>
<ha-icon-button
class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
.label=${this.hass.localize(
@ -350,13 +355,14 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
.type=${type}
@click=${this._handleExpand}
></ha-icon-button>
<simple-tooltip class="expand" animation-delay="0"
>${this.hass.localize(
`ui.components.target-picker.expand_${type}`
)}</simple-tooltip
>
</ha-tooltip>
</span>`}
<span role="gridcell">
<ha-tooltip
.content=${this.hass.localize(
`ui.components.target-picker.remove_${type}`
)}
>
<ha-icon-button
class="mdc-chip__icon mdc-chip__icon--trailing"
.label=${this.hass.localize("ui.components.target-picker.remove")}
@ -366,11 +372,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
.type=${type}
@click=${this._handleRemove}
></ha-icon-button>
<simple-tooltip animation-delay="0"
>${this.hass.localize(
`ui.components.target-picker.remove_${type}`
)}</simple-tooltip
>
</ha-tooltip>
</span>
</div>
`;
@ -828,9 +830,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
.mdc-chip:hover {
z-index: 5;
}
simple-tooltip.expand {
min-width: 200px;
}
:host([disabled]) .mdc-chip {
opacity: var(--light-disabled-opacity);
pointer-events: none;
@ -844,6 +843,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
display: block;
width: 100%;
}
ha-tooltip {
--ha-tooltip-arrow-size: 0;
}
`;
}
}

11
src/components/media-player/ha-media-player-browse.ts
View File

@ -4,7 +4,6 @@ import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list";
import "@material/mwc-list/mwc-list-item";
import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import {
@ -50,6 +49,7 @@ import "../ha-circular-progress";
import "../ha-fab";
import "../ha-icon-button";
import "../ha-svg-icon";
import "../ha-tooltip";
import "./ha-browse-media-tts";
import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
import { loadVirtualizer } from "../../resources/virtualizer";
@ -603,12 +603,9 @@ export class HaMediaPlayerBrowse extends LitElement {
`
: ""}
</div>
<div class="title">
${child.title}
<simple-tooltip fitToVisibleBounds position="top" offset="4"
>${child.title}</simple-tooltip
>
</div>
<ha-tooltip distance="-4" .content=${child.title}>
<div class="title">${child.title}</div>
</ha-tooltip>
</ha-card>
</div>
`;

1
src/dialogs/config-flow/step-flow-form.ts
View File

@ -1,4 +1,3 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import "@material/mwc-button";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";

8
src/dialogs/more-info/controls/more-info-weather.ts
View File

@ -9,6 +9,7 @@ import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
import { formatTime } from "../../../common/datetime/format_time";
import { formatNumber } from "../../../common/number/format_number";
import "../../../components/ha-svg-icon";
import "../../../components/ha-tooltip";
import type {
ForecastEvent,
ModernForecastType,
@ -157,14 +158,13 @@ class MoreInfoWeather extends LitElement {
${this.hass.formatEntityState(this.stateObj)}
</div>
<div class="time-ago">
<ha-tooltip>
<ha-relative-time
id="last_changed"
.hass=${this.hass}
.datetime=${this.stateObj.last_changed}
capitalize
></ha-relative-time>
<simple-tooltip animation-delay="0" for="last_changed">
<div>
<div slot="content">
<div class="row">
<span class="column-name">
${this.hass.localize(
@ -190,7 +190,7 @@ class MoreInfoWeather extends LitElement {
></ha-relative-time>
</div>
</div>
</simple-tooltip>
</ha-tooltip>
</div>
</div>
<div class="temp-attribute">

1
src/layouts/hass-tabs-subpage-data-table.ts
View File

@ -1,5 +1,4 @@
import { ResizeController } from "@lit-labs/observers/resize-controller";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import "@material/mwc-button/mwc-button";
import {
mdiArrowDown,

31
src/panels/config/areas/ha-config-area-page.ts
View File

@ -20,6 +20,7 @@ import "../../../components/ha-icon-button";
import "../../../components/ha-icon-next";
import "../../../components/ha-list-item";
import "../../../components/ha-button-menu";
import "../../../components/ha-tooltip";
import type { AreaRegistryEntry } from "../../../data/area_registry";
import {
deleteAreaRegistryEntry,
@ -549,7 +550,11 @@ class HaConfigAreaPage extends LitElement {
}
private _renderScene(name: string, entityState: SceneEntity) {
return html`<div>
return html`<ha-tooltip
.distance=${-4}
.disabled=${!!entityState.attributes.id}
.content=${this.hass.localize("ui.panel.config.devices.cant_edit")}
>
<a
href=${ifDefined(
entityState.attributes.id
@ -562,18 +567,15 @@ class HaConfigAreaPage extends LitElement {
<ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item>
</a>
${!entityState.attributes.id
? html`
<simple-tooltip animation-delay="0">
${this.hass.localize("ui.panel.config.devices.cant_edit")}
</simple-tooltip>
`
: ""}
</div>`;
</ha-tooltip>`;
}
private _renderAutomation(name: string, entityState: AutomationEntity) {
return html`<div>
return html`<ha-tooltip
.disabled=${!!entityState.attributes.id}
.distance=${-4}
.content=${this.hass.localize("ui.panel.config.devices.cant_edit")}
>
<a
href=${ifDefined(
entityState.attributes.id
@ -586,14 +588,7 @@ class HaConfigAreaPage extends LitElement {
<ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item>
</a>
${!entityState.attributes.id
? html`
<simple-tooltip animation-delay="0">
${this.hass.localize("ui.panel.config.devices.cant_edit")}
</simple-tooltip>
`
: ""}
</div>`;
</ha-tooltip>`;
}
private _renderScript(name: string, entityState: ScriptEntity) {

16
src/panels/config/automation/action/ha-automation-action-row.ts
View File

@ -33,6 +33,7 @@ import "../../../../components/ha-card";
import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-service-icon";
import "../../../../components/ha-tooltip";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import { ACTION_ICONS, YAML_ONLY_ACTION_TYPES } from "../../../../data/action";
import type { AutomationClipboard } from "../../../../data/automation";
@ -231,14 +232,14 @@ export default class HaAutomationActionRow extends LitElement {
${type !== "condition" &&
(this.action as NonConditionAction).continue_on_error === true
? html`<div slot="icons">
<ha-svg-icon .path=${mdiAlertCircleCheck}></ha-svg-icon>
<simple-tooltip animation-delay="0">
${this.hass.localize(
? html`<ha-tooltip
slot="icons"
.content=${this.hass.localize(
"ui.panel.config.automation.editor.actions.continue_on_error"
)}
</simple-tooltip>
</div> `
>
<ha-svg-icon .path=${mdiAlertCircleCheck}></ha-svg-icon>
</ha-tooltip>`
: nothing}
<ha-md-button-menu
@ -659,6 +660,9 @@ export default class HaAutomationActionRow extends LitElement {
ha-md-menu-item > ha-svg-icon {
--mdc-icon-size: 24px;
}
ha-tooltip {
cursor: default;
}
`,
];
}

2
src/panels/config/automation/ha-automation-picker.ts
View File

@ -1,6 +1,5 @@
import { consume } from "@lit-labs/context";
import { ResizeController } from "@lit-labs/observers/resize-controller";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
mdiChevronRight,
mdiCog,
@ -58,7 +57,6 @@ import "../../../components/ha-filter-entities";
import "../../../components/ha-filter-floor-areas";
import "../../../components/ha-filter-labels";
import "../../../components/ha-icon-button";
import "../../../components/ha-icon-overflow-menu";
import "../../../components/ha-md-menu-item";
import type { HaMdMenuItem } from "../../../components/ha-md-menu-item";
import "../../../components/ha-menu";

6
src/panels/config/backup/ha-config-backup-backups.ts
View File

@ -428,15 +428,9 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
"ui.panel.config.backup.backups.delete_selected"
)}
.path=${mdiDelete}
id="delete-btn"
class="warning"
@click=${this._deleteSelected}
></ha-icon-button>
<simple-tooltip animation-delay="0" for="delete-btn">
${this.hass.localize(
"ui.panel.config.backup.backups.delete_selected"
)}
</simple-tooltip>
`}
</div>

1
src/panels/config/blueprint/ha-blueprint-overview.ts
View File

@ -1,4 +1,3 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
mdiAlertCircle,
mdiDelete,

44
src/panels/config/devices/ha-config-device-page.ts
View File

@ -1,5 +1,4 @@
import { consume } from "@lit-labs/context";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
mdiCog,
mdiDelete,
@ -30,6 +29,7 @@ import "../../../components/ha-icon-button";
import "../../../components/ha-icon-next";
import "../../../components/ha-svg-icon";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-tooltip";
import { getSignedPath } from "../../../data/auth";
import type {
ConfigEntry,
@ -444,7 +444,13 @@ export class HaConfigDevicePage extends LitElement {
${this._related.automation.map((automation) => {
const entityState = this.hass.states[automation];
return entityState
? html`<div>
? html`<ha-tooltip
placement="left"
.disabled=${!!entityState.attributes.id}
.content=${this.hass.localize(
"ui.panel.config.devices.cant_edit"
)}
>
<a
href=${ifDefined(
entityState.attributes.id
@ -461,17 +467,8 @@ export class HaConfigDevicePage extends LitElement {
<ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item>
</a>
${!entityState.attributes.id
? html`
<simple-tooltip animation-delay="0">
${this.hass.localize(
"ui.panel.config.devices.cant_edit"
)}
</simple-tooltip>
`
: ""}
</div> `
: "";
</ha-tooltip>`
: nothing;
})}
</div>
`
@ -536,7 +533,13 @@ export class HaConfigDevicePage extends LitElement {
const entityState = this.hass.states[scene];
return entityState
? html`
<div>
<ha-tooltip
placement="left"
.disabled=${!!entityState.attributes.id}
.content=${this.hass.localize(
"ui.panel.config.devices.cant_edit"
)}
>
<a
href=${ifDefined(
entityState.attributes.id
@ -553,18 +556,9 @@ export class HaConfigDevicePage extends LitElement {
<ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item>
</a>
${!entityState.attributes.id
? html`
<simple-tooltip animation-delay="0">
${this.hass.localize(
"ui.panel.config.devices.cant_edit"
)}
</simple-tooltip>
</ha-tooltip>
`
: ""}
</div>
`
: "";
: nothing;
})}
</div>
`

1
src/panels/config/devices/ha-config-devices-dashboard.ts
View File

@ -1,5 +1,4 @@
import { consume } from "@lit-labs/context";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
mdiChevronRight,
mdiDotsVertical,

38
src/panels/config/entities/ha-config-entities.ts
View File

@ -1,5 +1,4 @@
import { consume } from "@lit-labs/context";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
mdiAlertCircle,
mdiCancel,
@ -66,6 +65,7 @@ import "../../../components/ha-icon-button";
import "../../../components/ha-md-menu-item";
import "../../../components/ha-sub-menu";
import "../../../components/ha-svg-icon";
import "../../../components/ha-tooltip";
import type { ConfigEntry, SubEntry } from "../../../data/config_entries";
import { getConfigEntries, getSubEntries } from "../../../data/config_entries";
import { fullEntitiesContext } from "../../../data/context";
@ -367,22 +367,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
tabindex="0"
style="display:inline-block; position: relative;"
>
<ha-svg-icon
style=${styleMap({
color: entry.unavailable ? "var(--error-color)" : "",
})}
.path=${entry.restored
? mdiRestoreAlert
: entry.unavailable
? mdiAlertCircle
: entry.disabled_by
? mdiCancel
: entry.hidden_by
? mdiEyeOff
: mdiPencilOff}
></ha-svg-icon>
<simple-tooltip animation-delay="0" position="left">
${entry.restored
<ha-tooltip
placement="left"
.content=${entry.restored
? this.hass.localize(
"ui.panel.config.entities.picker.status.not_provided"
)
@ -401,7 +388,22 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
: this.hass.localize(
"ui.panel.config.entities.picker.status.unmanageable"
)}
</simple-tooltip>
>
<ha-svg-icon
style=${styleMap({
color: entry.unavailable ? "var(--error-color)" : "",
})}
.path=${entry.restored
? mdiRestoreAlert
: entry.unavailable
? mdiAlertCircle
: entry.disabled_by
? mdiCancel
: entry.hidden_by
? mdiEyeOff
: mdiPencilOff}
></ha-svg-icon>
</ha-tooltip>
</div>
`
: "—",

22
src/panels/config/helpers/dialog-helper-detail.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -10,6 +9,7 @@ import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
import "../../../components/ha-circular-progress";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-list-item";
import "../../../components/ha-tooltip";
import { getConfigFlowHandlers } from "../../../data/config_flow";
import { createCounter } from "../../../data/counter";
import { createInputBoolean } from "../../../data/input_boolean";
@ -210,6 +210,14 @@ export class DialogHelperDetail extends LitElement {
const isLoaded =
!(domain in HELPERS) || isComponentLoaded(this.hass, domain);
return html`
<ha-tooltip
.disabled=${isLoaded}
.content=${this.hass.localize(
"ui.dialogs.helper_settings.platform_not_loaded",
{ platform: domain }
)}
>
<div>
<ha-list-item
.disabled=${!isLoaded}
hasmeta
@ -233,16 +241,8 @@ export class DialogHelperDetail extends LitElement {
<span class="item-text"> ${label} </span>
<ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item>
${!isLoaded
? html`
<simple-tooltip animation-delay="0"
>${this.hass.localize(
"ui.dialogs.helper_settings.platform_not_loaded",
{ platform: domain }
)}</simple-tooltip
>
`
: ""}
</div>
</ha-tooltip>
`;
})}
</mwc-list>

12
src/panels/config/helpers/ha-config-helpers.ts
View File

@ -1,6 +1,5 @@
import { consume } from "@lit-labs/context";
import { ResizeController } from "@lit-labs/observers/resize-controller";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
mdiAlertCircle,
mdiCancel,
@ -52,6 +51,7 @@ import "../../../components/ha-icon-overflow-menu";
import "../../../components/ha-md-divider";
import "../../../components/ha-state-icon";
import "../../../components/ha-svg-icon";
import "../../../components/ha-tooltip";
import type { CategoryRegistryEntry } from "../../../data/category_registry";
import {
createCategoryRegistryEntry,
@ -359,12 +359,14 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
tabindex="0"
style="display:inline-block; position: relative;"
>
<ha-svg-icon .path=${mdiPencilOff}></ha-svg-icon>
<simple-tooltip animation-delay="0" position="left">
${this.hass.localize(
<ha-tooltip
placement="left"
.content=${this.hass.localize(
"ui.panel.config.entities.picker.status.unmanageable"
)}
</simple-tooltip>
>
<ha-svg-icon .path=${mdiPencilOff}></ha-svg-icon>
</ha-tooltip>
</div>
`
: ""}

1
src/panels/config/integrations/ha-config-integration-page.ts
View File

@ -1,4 +1,3 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import "@material/mwc-list/mwc-list";
import {
mdiAlertCircle,

44
src/panels/config/integrations/ha-integration-card.ts
View File

@ -1,4 +1,3 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { mdiFileCodeOutline, mdiPackageVariant, mdiWeb } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit";
@ -10,6 +9,7 @@ import "../../../components/ha-button";
import "../../../components/ha-card";
import "../../../components/ha-ripple";
import "../../../components/ha-svg-icon";
import "../../../components/ha-tooltip";
import type { ConfigEntry } from "../../../data/config_entries";
import { ERROR_STATES } from "../../../data/config_entries";
import type { DeviceRegistryEntry } from "../../../data/device_registry";
@ -162,43 +162,40 @@ export class HaIntegrationCard extends LitElement {
? "overwrites"
: "custom"}"
>
<ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon>
<simple-tooltip
animation-delay="0"
.position=${computeRTL(this.hass) ? "right" : "left"}
offset="4"
>${this.hass.localize(
<ha-tooltip
.placement=${computeRTL(this.hass) ? "right" : "left"}
.content=${this.hass.localize(
this.manifest.overwrites_built_in
? "ui.panel.config.integrations.config_entry.custom_overwrites_core"
: "ui.panel.config.integrations.config_entry.custom_integration"
)}</simple-tooltip
)}
>
<ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon>
</ha-tooltip>
</span>`
: nothing}
${this.manifest && this.manifest.iot_class?.startsWith("cloud_")
? html`<div class="icon cloud">
<ha-svg-icon .path=${mdiWeb}></ha-svg-icon>
<simple-tooltip
animation-delay="0"
.position=${computeRTL(this.hass) ? "right" : "left"}
offset="4"
>${this.hass.localize(
<ha-tooltip
.placement=${computeRTL(this.hass) ? "right" : "left"}
.content=${this.hass.localize(
"ui.panel.config.integrations.config_entry.depends_on_cloud"
)}</simple-tooltip
)}
>
<ha-svg-icon .path=${mdiWeb}></ha-svg-icon>
</ha-tooltip>
</div>`
: nothing}
${this.manifest && !this.manifest?.config_flow
? html`<div class="icon yaml">
<ha-svg-icon .path=${mdiFileCodeOutline}></ha-svg-icon>
<simple-tooltip
animation-delay="0"
.position=${computeRTL(this.hass) ? "right" : "left"}
offset="4"
>${this.hass.localize(
<ha-tooltip
.placement=${computeRTL(this.hass) ? "right" : "left"}
.content=${this.hass.localize(
"ui.panel.config.integrations.config_entry.no_config_flow"
)}</simple-tooltip
)}
>
<ha-svg-icon .path=${mdiFileCodeOutline}></ha-svg-icon
></ha-tooltip>
</div>`
: nothing}
</div>
@ -367,9 +364,6 @@ export class HaIntegrationCard extends LitElement {
height: 24px;
display: block;
}
simple-tooltip {
white-space: nowrap;
}
.spacer {
height: 36px;
}

47
src/panels/config/integrations/ha-integration-list-item.ts
View File

@ -12,6 +12,7 @@ import { brandsUrl } from "../../../util/brands-url";
import type { IntegrationListItem } from "./dialog-add-integration";
import "../../../components/ha-svg-icon";
import "../../../components/ha-icon-next";
import "../../../components/ha-tooltip";
@customElement("ha-integration-list-item")
export class HaIntegrationListItem extends ListItemBase {
@ -73,43 +74,45 @@ export class HaIntegrationListItem extends ListItemBase {
}
return html`<span class="mdc-deprecated-list-item__meta material-icons">
${this.integration.cloud
? html`<span
><ha-svg-icon .path=${mdiWeb}></ha-svg-icon
><simple-tooltip animation-delay="0" position="left"
>${this.hass.localize(
? html`<ha-tooltip
placement="left"
.content=${this.hass.localize(
"ui.panel.config.integrations.config_entry.depends_on_cloud"
)}</simple-tooltip
></span
>`
: ""}
)}
><ha-svg-icon .path=${mdiWeb}></ha-svg-icon
></ha-tooltip>`
: nothing}
${!this.integration.is_built_in
? html`<span
class=${this.integration.overwrites_built_in
? "overwrites"
: "custom"}
><ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon
><simple-tooltip animation-delay="0" position="left"
>${this.hass.localize(
><ha-tooltip
placement="left"
.content=${this.hass.localize(
this.integration.overwrites_built_in
? "ui.panel.config.integrations.config_entry.custom_overwrites_core"
: "ui.panel.config.integrations.config_entry.custom_integration"
)}</simple-tooltip
></span
>`
: ""}
)}
><ha-svg-icon
.path=${mdiPackageVariant}
></ha-svg-icon></ha-tooltip
></span>`
: nothing}
${!this.integration.config_flow &&
!this.integration.integrations &&
!this.integration.iot_standards
? html`<span
><simple-tooltip animation-delay="0" position="left"
>${this.hass.localize(
? html`<ha-tooltip
placement="left"
.content=${this.hass.localize(
"ui.panel.config.integrations.config_entry.yaml_only"
)}</simple-tooltip
><ha-svg-icon
)}
>
<ha-svg-icon
.path=${mdiFileCodeOutline}
class="open-in-new"
></ha-svg-icon
></span>`
></ha-svg-icon>
</ha-tooltip>`
: html`<ha-icon-next></ha-icon-next>`}
</span>`;
}

11
src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit";
@ -9,6 +8,7 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-circular-progress";
import { createCloseHeading } from "../../../../../components/ha-dialog";
import "../../../../../components/ha-svg-icon";
import "../../../../../components/ha-tooltip";
import type {
AttributeConfigurationStatus,
Cluster,
@ -295,16 +295,15 @@ class DialogZHAReconfigureDevice extends LitElement {
`
: html`
<span class="stage">
<simple-tooltip
animation-delay="0"
position="top"
<ha-tooltip
placement="top"
.content=${attribute.status}
>
${attribute.status}
</simple-tooltip>
<ha-svg-icon
.path=${mdiCloseCircle}
class="failed"
></ha-svg-icon>
</ha-tooltip>
</span>
`}
</span>

1
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
View File

@ -15,7 +15,6 @@ import { classMap } from "lit/directives/class-map";
import "../../../../../components/ha-card";
import "../../../../../components/ha-expansion-panel";
import "../../../../../components/ha-fab";
import "../../../../../components/ha-help-tooltip";
import "../../../../../components/ha-icon-button";
import "../../../../../components/ha-icon-next";
import "../../../../../components/ha-svg-icon";

1
src/panels/config/logs/dialog-system-log-detail.ts
View File

@ -1,4 +1,3 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { mdiClose, mdiContentCopy } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";

16
src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
View File

@ -1,4 +1,3 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
mdiCheck,
mdiCheckCircleOutline,
@ -24,6 +23,7 @@ import "../../../../components/ha-fab";
import "../../../../components/ha-icon";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-svg-icon";
import "../../../../components/ha-tooltip";
import type { LovelacePanelConfig } from "../../../../data/lovelace";
import type { LovelaceRawConfig } from "../../../../data/lovelace/config/types";
import {
@ -153,17 +153,19 @@ export class HaConfigLovelaceDashboards extends LitElement {
${dashboard.title}
${dashboard.default
? html`
<ha-tooltip
.content=${this.hass.localize(
`ui.panel.config.lovelace.dashboards.default_dashboard`
)}
placement="right"
>
<ha-svg-icon
style="padding-left: 10px; padding-inline-start: 10px; direction: var(--direction);"
.path=${mdiCheckCircleOutline}
></ha-svg-icon>
<simple-tooltip animation-delay="0">
${this.hass.localize(
`ui.panel.config.lovelace.dashboards.default_dashboard`
)}
</simple-tooltip>
</ha-tooltip>
`
: ""}
: nothing}
`,
},
};

12
src/panels/config/scene/ha-scene-dashboard.ts
View File

@ -1,6 +1,5 @@
import { consume } from "@lit-labs/context";
import { ResizeController } from "@lit-labs/observers/resize-controller";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
mdiChevronRight,
mdiCog,
@ -57,6 +56,7 @@ import "../../../components/ha-md-menu-item";
import "../../../components/ha-state-icon";
import "../../../components/ha-sub-menu";
import "../../../components/ha-svg-icon";
import "../../../components/ha-tooltip";
import { createAreaRegistryEntry } from "../../../data/area_registry";
import type { CategoryRegistryEntry } from "../../../data/category_registry";
import {
@ -314,17 +314,19 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
template: (scene) =>
!scene.attributes.id
? html`
<simple-tooltip animation-delay="0" position="left">
${this.hass.localize(
<ha-tooltip
placement="left"
.content=${this.hass.localize(
"ui.panel.config.scene.picker.only_editable"
)}
</simple-tooltip>
>
<ha-svg-icon
.path=${mdiPencilOff}
style="color: var(--secondary-text-color)"
></ha-svg-icon>
</ha-tooltip>
`
: "",
: nothing,
},
actions: {
title: "",

1
src/panels/config/users/ha-config-users.ts
View File

@ -12,7 +12,6 @@ import type {
} from "../../../components/data-table/ha-data-table";
import "../../../components/data-table/ha-data-table-icon";
import "../../../components/ha-fab";
import "../../../components/ha-help-tooltip";
import "../../../components/ha-svg-icon";
import type { User } from "../../../data/user";
import {

22
src/panels/config/voice-assistants/expose/expose-assistant-icon.ts
View File

@ -1,4 +1,3 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { mdiAlertCircle } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
@ -7,6 +6,7 @@ import { voiceAssistants } from "../../../../data/expose";
import type { HomeAssistant } from "../../../../types";
import { brandsUrl } from "../../../../util/brands-url";
import "../../../../components/ha-svg-icon";
import "../../../../components/ha-tooltip";
@customElement("voice-assistants-expose-assistant-icon")
export class VoiceAssistantExposeAssistantIcon extends LitElement {
@ -25,6 +25,10 @@ export class VoiceAssistantExposeAssistantIcon extends LitElement {
if (!this.assistant || !voiceAssistants[this.assistant]) return nothing;
return html`
<ha-tooltip
.disabled=${!this.unsupported && !this.manual}
placement="left"
>
<div class="container">
<img
class="logo"
@ -49,14 +53,8 @@ export class VoiceAssistantExposeAssistantIcon extends LitElement {
></ha-svg-icon>
`
: nothing}
${this.manual || this.unsupported
? html`
<simple-tooltip
animation-delay="0"
position="top"
offset="4"
fitToVisibleBounds
>
</div>
<span slot="content">
${this.unsupported
? this.hass.localize(
"ui.panel.config.voice_assistants.expose.not_supported"
@ -68,10 +66,8 @@ export class VoiceAssistantExposeAssistantIcon extends LitElement {
"ui.panel.config.voice_assistants.expose.manually_configured"
)
: nothing}
</simple-tooltip>
`
: ""}
</div>
</span>
</ha-tooltip>
`;
}

26
src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
View File

@ -1,5 +1,4 @@
import { consume } from "@lit-labs/context";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
mdiCloseBoxMultiple,
mdiCloseCircleOutline,
@ -28,6 +27,7 @@ import type {
SortingChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/ha-fab";
import "../../../components/ha-tooltip";
import type { AlexaEntity } from "../../../data/alexa";
import { fetchCloudAlexaEntities } from "../../../data/alexa";
import type { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud";
@ -599,32 +599,34 @@ export class VoiceAssistantsExpose extends LitElement {
>
`
: html`
<ha-tooltip
.content=${this.hass.localize(
"ui.panel.config.voice_assistants.expose.expose"
)}
placement="left"
>
<ha-icon-button
id="enable-btn"
@click=${this._exposeSelected}
.path=${mdiPlusBoxMultiple}
.label=${this.hass.localize(
"ui.panel.config.voice_assistants.expose.expose"
)}
></ha-icon-button>
<simple-tooltip animation-delay="0" for="enable-btn">
${this.hass.localize(
"ui.panel.config.voice_assistants.expose.expose"
</ha-tooltip>
<ha-tooltip
content=${this.hass.localize(
"ui.panel.config.voice_assistants.expose.unexpose"
)}
</simple-tooltip>
placement="left"
>
<ha-icon-button
id="disable-btn"
@click=${this._unexposeSelected}
.path=${mdiCloseBoxMultiple}
.label=${this.hass.localize(
"ui.panel.config.voice_assistants.expose.unexpose"
)}
></ha-icon-button>
<simple-tooltip animation-delay="0" for="disable-btn">
${this.hass.localize(
"ui.panel.config.voice_assistants.expose.unexpose"
)}
</simple-tooltip>
</ha-tooltip>
`}
</div>
`

29
src/panels/config/zone/ha-config-zone.ts
View File

@ -1,4 +1,3 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import "@material/mwc-list/mwc-list";
import { mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js";
import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
@ -15,6 +14,7 @@ import "../../../components/ha-fab";
import "../../../components/ha-icon-button";
import "../../../components/ha-list-item";
import "../../../components/ha-svg-icon";
import "../../../components/ha-tooltip";
import "../../../components/map/ha-locations-editor";
import type {
HaLocationsEditor,
@ -199,7 +199,15 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
stateObject.entity_id === "zone.home" &&
!this._canEditCore
? nothing
: html`<div slot="meta">
: html`<ha-tooltip
slot="meta"
placement="left"
.content=${hass.localize(
"ui.panel.config.zone.configured_in_yaml"
)}
.disabled=${stateObject.entity_id === "zone.home"}
hoist
>
<ha-icon-button
.id=${!this.narrow ? stateObject.entity_id : ""}
.entityId=${stateObject.entity_id}
@ -214,19 +222,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
: hass.localize("ui.panel.config.zone.edit_zone")}
@click=${this._editHomeZone}
></ha-icon-button>
${stateObject.entity_id !== "zone.home"
? html`
<simple-tooltip
animation-delay="0"
position="left"
>
${hass.localize(
"ui.panel.config.zone.configured_in_yaml"
)}
</simple-tooltip>
`
: ""}
</div>`}
</ha-tooltip>`}
</ha-list-item>
`
)}
@ -588,6 +584,9 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
ha-card {
margin-bottom: 100px;
}
ha-tooltip {
display: block;
}
`;
}

29
src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts
View File

@ -1,5 +1,4 @@
import { mdiInformation } from "@mdi/js";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -9,6 +8,7 @@ import { round } from "../../../../common/number/round";
import "../../../../components/ha-card";
import "../../../../components/ha-gauge";
import "../../../../components/ha-svg-icon";
import "../../../../components/ha-tooltip";
import type { EnergyData } from "../../../../data/energy";
import {
energySourcesByType,
@ -134,14 +134,6 @@ class HuiEnergyCarbonGaugeCard
<ha-card>
${value !== undefined
? html`
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<simple-tooltip animation-delay="0" for="info" position="left">
<span>
${this.hass.localize(
"ui.panel.lovelace.cards.energy.carbon_consumed_gauge.card_indicates_energy_used"
)}
</span>
</simple-tooltip>
<ha-gauge
min="0"
max="100"
@ -153,6 +145,14 @@ class HuiEnergyCarbonGaugeCard
"--gauge-color": this._computeSeverity(value),
})}
></ha-gauge>
<ha-tooltip
.content=${this.hass.localize(
"ui.panel.lovelace.cards.energy.carbon_consumed_gauge.card_indicates_energy_used"
)}
placement="left"
>
<ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
</ha-tooltip>
<div class="name">
${this.hass.localize(
"ui.panel.lovelace.cards.energy.carbon_consumed_gauge.low_carbon_energy_consumed"
@ -213,14 +213,9 @@ class HuiEnergyCarbonGaugeCard
top: 4px;
color: var(--secondary-text-color);
}
simple-tooltip > span {
font-size: 12px;
line-height: 12px;
}
simple-tooltip {
width: 80%;
max-width: 250px;
top: 8px !important;
ha-tooltip::part(base__popup) {
margin-top: 4px;
}
`;
}

40
src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts
View File

@ -1,5 +1,4 @@
import { mdiInformation } from "@mdi/js";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -9,6 +8,7 @@ import "../../../../components/ha-card";
import "../../../../components/ha-gauge";
import type { LevelDefinition } from "../../../../components/ha-gauge";
import "../../../../components/ha-svg-icon";
import "../../../../components/ha-tooltip";
import type {
EnergyData,
GridSourceTypeEnergyPreference,
@ -31,7 +31,7 @@ class HuiEnergyGridGaugeCard
extends SubscribeMixin(LitElement)
implements LovelaceCard
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public hass!: HomeAssistant;
@state() private _config?: EnergyGridNeutralityGaugeCardConfig;
@ -111,19 +111,6 @@ class HuiEnergyGridGaugeCard
<ha-card>
${value !== undefined
? html`
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<simple-tooltip animation-delay="0" for="info" position="left">
<span>
${this.hass.localize(
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.energy_dependency"
)}
<br /><br />
${this.hass.localize(
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.color_explain"
)}
</span>
</simple-tooltip>
<ha-gauge
min="-1"
max="1"
@ -138,6 +125,18 @@ class HuiEnergyGridGaugeCard
label="kWh"
needle
></ha-gauge>
<ha-tooltip placement="left">
<span slot="content">
${this.hass.localize(
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.energy_dependency"
)}
<br /><br />
${this.hass.localize(
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.color_explain"
)}
</span>
<ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
</ha-tooltip>
<div class="name">
${returnedToGrid! >= consumedFromGrid!
? this.hass.localize(
@ -190,14 +189,9 @@ class HuiEnergyGridGaugeCard
top: 4px;
color: var(--secondary-text-color);
}
simple-tooltip > span {
font-size: 12px;
line-height: 12px;
}
simple-tooltip {
width: 80%;
max-width: 250px;
top: 8px !important;
ha-tooltip::part(base__popup) {
margin-top: 4px;
}
`;
}

29
src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts
View File

@ -1,4 +1,3 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { mdiInformation } from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
@ -8,6 +7,7 @@ import { styleMap } from "lit/directives/style-map";
import "../../../../components/ha-card";
import "../../../../components/ha-gauge";
import "../../../../components/ha-svg-icon";
import "../../../../components/ha-tooltip";
import type { EnergyData } from "../../../../data/energy";
import {
energySourcesByType,
@ -176,14 +176,6 @@ class HuiEnergySelfSufficiencyGaugeCard
<ha-card>
${value !== undefined
? html`
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<simple-tooltip animation-delay="0" for="info" position="left">
<span>
${this.hass.localize(
"ui.panel.lovelace.cards.energy.self_sufficiency_gauge.card_indicates_self_sufficiency_quota"
)}
</span>
</simple-tooltip>
<ha-gauge
min="0"
max="100"
@ -195,6 +187,14 @@ class HuiEnergySelfSufficiencyGaugeCard
"--gauge-color": this._computeSeverity(value),
})}
></ha-gauge>
<ha-tooltip
placement="left"
.content=${this.hass.localize(
"ui.panel.lovelace.cards.energy.self_sufficiency_gauge.card_indicates_self_sufficiency_quota"
)}
>
<ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
</ha-tooltip>
<div class="name">
${this.hass.localize(
"ui.panel.lovelace.cards.energy.self_sufficiency_gauge.self_sufficiency_quota"
@ -253,14 +253,9 @@ class HuiEnergySelfSufficiencyGaugeCard
top: 4px;
color: var(--secondary-text-color);
}
simple-tooltip > span {
font-size: 12px;
line-height: 12px;
}
simple-tooltip {
width: 80%;
max-width: 250px;
top: 8px !important;
ha-tooltip::part(base__popup) {
margin-top: 4px;
}
`;
}

36
src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts
View File

@ -1,5 +1,4 @@
import { mdiInformation } from "@mdi/js";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -107,18 +106,6 @@ class HuiEnergySolarGaugeCard
<ha-card>
${value !== undefined
? html`
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<simple-tooltip animation-delay="0" for="info" position="left">
<span>
${this.hass.localize(
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used"
)}
<br /><br />
${this.hass.localize(
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat"
)}
</span>
</simple-tooltip>
<ha-gauge
min="0"
max="100"
@ -130,6 +117,18 @@ class HuiEnergySolarGaugeCard
"--gauge-color": this._computeSeverity(value),
})}
></ha-gauge>
<ha-tooltip placement="left">
<span slot="content">
${this.hass.localize(
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used"
)}
<br /><br />
${this.hass.localize(
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat"
)}
</span>
<ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
</ha-tooltip>
<div class="name">
${this.hass.localize(
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.self_consumed_solar_energy"
@ -192,14 +191,9 @@ class HuiEnergySolarGaugeCard
top: 4px;
color: var(--secondary-text-color);
}
simple-tooltip > span {
font-size: 12px;
line-height: 12px;
}
simple-tooltip {
width: 80%;
max-width: 250px;
top: 8px !important;
ha-tooltip::part(base__popup) {
margin-top: 4px;
}
`;
}

1
src/panels/profile/ha-refresh-tokens-card.ts
View File

@ -1,4 +1,3 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import type { ActionDetail } from "@material/mwc-list";
import {
mdiAndroid,

5
tsconfig.json
View File

@ -44,10 +44,7 @@
// CSS
"no-invalid-css": "off" // warning does not work
},
"globalTags": ["google-cast-launcher"],
"customHtmlData": [
"./node_modules/@lrnwebcomponents/simple-tooltip/custom-elements.json"
]
"globalTags": ["google-cast-launcher"]
}
],
"paths": {

10
yarn.lock
View File

@ -2310,15 +2310,6 @@ __metadata:
languageName: node
linkType: hard
"@lrnwebcomponents/simple-tooltip@npm:8.0.2":
version: 8.0.2
resolution: "@lrnwebcomponents/simple-tooltip@npm:8.0.2"
dependencies:
lit: "npm:^3.1.2"
checksum: 10/cc432c516ed176f1b99a04071f500bea2c1620a2b505e60867f3464e2a9cf54b78b4c84ac3ed85ac34e3579d8671112953d085bb37c2ff7202a1639e6ae0db4e
languageName: node
linkType: hard
"@marijn/find-cluster-break@npm:^1.0.0":
version: 1.0.2
resolution: "@marijn/find-cluster-break@npm:1.0.2"
@ -9432,7 +9423,6 @@ __metadata:
"@lit-labs/observers": "npm:2.0.5"
"@lit-labs/virtualizer": "npm:2.1.0"
"@lokalise/node-api": "npm:13.2.1"
"@lrnwebcomponents/simple-tooltip": "npm:8.0.2"
"@material/chips": "npm:=14.0.0-canary.53b3cad2f.0"
"@material/data-table": "npm:=14.0.0-canary.53b3cad2f.0"
"@material/mwc-base": "npm:0.27.0"