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

* 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

View File

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

View File

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

View File

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

View File

@ -1,7 +1,8 @@
import type { PropertyValues, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement } 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-svg-icon";
import "../ha-tooltip";
@customElement("ha-data-table-icon") @customElement("ha-data-table-icon")
class HaDataTableIcon extends LitElement { class HaDataTableIcon extends LitElement {
@ -9,30 +10,14 @@ class HaDataTableIcon extends LitElement {
@property() public path!: string; @property() public path!: string;
@state() private _hovered = false;
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
${this._hovered ? html`<div>${this.tooltip}</div>` : ""} <ha-tooltip .content=${this.tooltip}>
<ha-svg-icon .path=${this.path}></ha-svg-icon> <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` static styles = css`
:host { :host {
display: inline-block; display: inline-block;
@ -41,20 +26,6 @@ class HaDataTableIcon extends LitElement {
ha-svg-icon { ha-svg-icon {
color: var(--secondary-text-color); 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;
}
`; `;
} }

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; 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 "../../../components/ha-circular-progress";
import { createCloseHeading } from "../../../components/ha-dialog"; import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-list-item"; import "../../../components/ha-list-item";
import "../../../components/ha-tooltip";
import { getConfigFlowHandlers } from "../../../data/config_flow"; import { getConfigFlowHandlers } from "../../../data/config_flow";
import { createCounter } from "../../../data/counter"; import { createCounter } from "../../../data/counter";
import { createInputBoolean } from "../../../data/input_boolean"; import { createInputBoolean } from "../../../data/input_boolean";
@ -210,39 +210,39 @@ export class DialogHelperDetail extends LitElement {
const isLoaded = const isLoaded =
!(domain in HELPERS) || isComponentLoaded(this.hass, domain); !(domain in HELPERS) || isComponentLoaded(this.hass, domain);
return html` return html`
<ha-list-item <ha-tooltip
.disabled=${!isLoaded} .disabled=${isLoaded}
hasmeta .content=${this.hass.localize(
.domain=${domain} "ui.dialogs.helper_settings.platform_not_loaded",
@request-selected=${this._domainPicked} { platform: domain }
graphic="icon" )}
> >
<img <div>
slot="graphic" <ha-list-item
loading="lazy" .disabled=${!isLoaded}
alt="" hasmeta
src=${brandsUrl({ .domain=${domain}
domain, @request-selected=${this._domainPicked}
type: "icon", graphic="icon"
useFallback: true, >
darkOptimized: this.hass.themes?.darkMode, <img
})} slot="graphic"
crossorigin="anonymous" loading="lazy"
referrerpolicy="no-referrer" alt=""
/> src=${brandsUrl({
<span class="item-text"> ${label} </span> domain,
<ha-icon-next slot="meta"></ha-icon-next> type: "icon",
</ha-list-item> useFallback: true,
${!isLoaded darkOptimized: this.hass.themes?.darkMode,
? html` })}
<simple-tooltip animation-delay="0" crossorigin="anonymous"
>${this.hass.localize( referrerpolicy="no-referrer"
"ui.dialogs.helper_settings.platform_not_loaded", />
{ platform: domain } <span class="item-text"> ${label} </span>
)}</simple-tooltip <ha-icon-next slot="meta"></ha-icon-next>
> </ha-list-item>
` </div>
: ""} </ha-tooltip>
`; `;
})} })}
</mwc-list> </mwc-list>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,4 +1,3 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { mdiAlertCircle } from "@mdi/js"; import { mdiAlertCircle } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
@ -7,6 +6,7 @@ import { voiceAssistants } from "../../../../data/expose";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
import { brandsUrl } from "../../../../util/brands-url"; import { brandsUrl } from "../../../../util/brands-url";
import "../../../../components/ha-svg-icon"; import "../../../../components/ha-svg-icon";
import "../../../../components/ha-tooltip";
@customElement("voice-assistants-expose-assistant-icon") @customElement("voice-assistants-expose-assistant-icon")
export class VoiceAssistantExposeAssistantIcon extends LitElement { export class VoiceAssistantExposeAssistantIcon extends LitElement {
@ -25,53 +25,49 @@ export class VoiceAssistantExposeAssistantIcon extends LitElement {
if (!this.assistant || !voiceAssistants[this.assistant]) return nothing; if (!this.assistant || !voiceAssistants[this.assistant]) return nothing;
return html` return html`
<div class="container"> <ha-tooltip
<img .disabled=${!this.unsupported && !this.manual}
class="logo" placement="left"
style=${styleMap({ >
filter: this.manual ? "grayscale(100%)" : undefined, <div class="container">
})} <img
alt=${voiceAssistants[this.assistant].name} class="logo"
src=${brandsUrl({ style=${styleMap({
domain: voiceAssistants[this.assistant].domain, filter: this.manual ? "grayscale(100%)" : undefined,
type: "icon", })}
darkOptimized: this.hass.themes?.darkMode, alt=${voiceAssistants[this.assistant].name}
})} src=${brandsUrl({
crossorigin="anonymous" domain: voiceAssistants[this.assistant].domain,
referrerpolicy="no-referrer" type: "icon",
slot="prefix" darkOptimized: this.hass.themes?.darkMode,
/> })}
${this.unsupported crossorigin="anonymous"
? html` referrerpolicy="no-referrer"
<ha-svg-icon slot="prefix"
.path=${mdiAlertCircle} />
class="unsupported" ${this.unsupported
></ha-svg-icon> ? html`
` <ha-svg-icon
: nothing} .path=${mdiAlertCircle}
${this.manual || this.unsupported class="unsupported"
? html` ></ha-svg-icon>
<simple-tooltip `
animation-delay="0" : nothing}
position="top" </div>
offset="4" <span slot="content">
fitToVisibleBounds ${this.unsupported
> ? this.hass.localize(
${this.unsupported "ui.panel.config.voice_assistants.expose.not_supported"
? this.hass.localize( )
"ui.panel.config.voice_assistants.expose.not_supported" : ""}
) ${this.unsupported && this.manual ? html`<br />` : nothing}
: ""} ${this.manual
${this.unsupported && this.manual ? html`<br />` : nothing} ? this.hass.localize(
${this.manual "ui.panel.config.voice_assistants.expose.manually_configured"
? this.hass.localize( )
"ui.panel.config.voice_assistants.expose.manually_configured" : nothing}
) </span>
: nothing} </ha-tooltip>
</simple-tooltip>
`
: ""}
</div>
`; `;
} }

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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