web: rework and expand tooltips (#6435)

* web: replace custom tooltip with pfe-tooltip Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add tooltips to all edit buttons Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add tooltips to remaining table actions Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add a bunch more tooltips Signed-off-by: Jens Langhammer <jens@goauthentik.io> * update locale Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io>
2023-07-31 19:35:09 +02:00
parent 561e6956fe
commit 8079952d47
46 changed files with 734 additions and 147 deletions
--- a/web/src/admin/applications/ApplicationForm.ts
+++ b/web/src/admin/applications/ApplicationForm.ts
@ -10,6 +10,7 @@ import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import "@goauthentik/elements/forms/ProxyForm";
 import "@goauthentik/elements/forms/Radio";
 import "@goauthentik/elements/forms/SearchSelect";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -168,7 +169,9 @@ export class ApplicationForm extends ModelForm<Application, string> {
                        }}
                    >
                        <button slot="trigger" class="pf-c-button pf-m-control" type="button">
-                            <i class="fas fa-plus" aria-hidden="true"></i>
+                            <pf-tooltip position="top" content=${msg("Add provider")}>
+                                <i class="fas fa-plus" aria-hidden="true"></i>
+                            </pf-tooltip>
                        </button>
                    </ak-provider-select-table>
                    <div class="pf-c-form-control">
--- a/web/src/admin/applications/ApplicationListPage.ts
+++ b/web/src/admin/applications/ApplicationListPage.ts
@ -13,6 +13,7 @@ import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
 import "@goauthentik/user/LibraryApplication/AppIcon";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html } from "lit";
@ -144,12 +145,16 @@ export class ApplicationListPage extends TablePage<Application> {
                    <ak-application-form slot="form" .instancePk=${item.slug}>
                    </ak-application-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-edit"></i>
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit"></i>
+                        </pf-tooltip>
                    </button>
                </ak-forms-modal>
                ${item.launchUrl
                    ? html`<a href=${item.launchUrl} target="_blank" class="pf-c-button pf-m-plain">
-                          <i class="fas fa-share-square"></i>
+                          <pf-tooltip position="top" content=${msg("Open")}>
+                              <i class="fas fa-share-square"></i>
+                          </pf-tooltip>
                      </a>`
                    : html``}`,
        ];
--- a/web/src/admin/blueprints/BlueprintListPage.ts
+++ b/web/src/admin/blueprints/BlueprintListPage.ts
@ -10,6 +10,7 @@ import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, html } from "lit";
@ -140,14 +141,17 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
            html`<ak-label color=${item.enabled ? PFColor.Green : PFColor.Red}>
                ${item.enabled ? msg("Yes") : msg("No")}
            </ak-label>`,
-            html` <ak-forms-modal>
+            html`<ak-forms-modal>
                    <span slot="submit"> ${msg("Update")} </span>
                    <span slot="header"> ${msg("Update Blueprint")} </span>
                    <ak-blueprint-form slot="form" .instancePk=${item.pk}> </ak-blueprint-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-edit"></i>
-                    </button> </ak-forms-modal
-                ><ak-action-button
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit"></i>
+                        </pf-tooltip>
+                    </button>
+                </ak-forms-modal>
+                <ak-action-button
                    class="pf-m-plain"
                    .apiRequest=${() => {
                        return new ManagedApi(DEFAULT_CONFIG)
@ -164,7 +168,9 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
                            });
                    }}
                >
-                    <i class="fas fa-play" aria-hidden="true"></i>
+                    <pf-tooltip position="top" content=${msg("Apply")}>
+                        <i class="fas fa-play" aria-hidden="true"></i>
+                    </pf-tooltip>
                </ak-action-button>`,
        ];
    }
--- a/web/src/admin/crypto/CertificateKeyPairListPage.ts
+++ b/web/src/admin/crypto/CertificateKeyPairListPage.ts
@ -9,6 +9,7 @@ import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { CSSResult, TemplateResult, html } from "lit";
@ -123,7 +124,9 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
                <ak-crypto-certificate-form slot="form" .instancePk=${item.pk}>
                </ak-crypto-certificate-form>
                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <i class="fas fa-edit"></i>
+                    <pf-tooltip position="top" content=${msg("Edit")}>
+                        <i class="fas fa-edit"></i>
+                    </pf-tooltip>
                </button>
            </ak-forms-modal>`,
        ];
--- a/web/src/admin/enterprise/EnterpriseLicenseListPage.ts
+++ b/web/src/admin/enterprise/EnterpriseLicenseListPage.ts
@ -10,6 +10,7 @@ import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html } from "lit";
@ -227,7 +228,9 @@ export class EnterpriseLicenseListPage extends TablePage<License> {
                <ak-enterprise-license-form slot="form" .instancePk=${item.licenseUuid}>
                </ak-enterprise-license-form>
                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <i class="fas fa-edit"></i>
+                    <pf-tooltip position="top" content=${msg("Edit")}>
+                        <i class="fas fa-edit"></i>
+                    </pf-tooltip>
                </button>
            </ak-forms-modal>`,
        ];
--- a/web/src/admin/events/EventListPage.ts
+++ b/web/src/admin/events/EventListPage.ts
@ -6,6 +6,7 @@ import { uiConfig } from "@goauthentik/common/ui/config";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -75,7 +76,9 @@ export class EventListPage extends TablePage<Event> {
                <small>${EventGeo(item)}</small>`,
            html`<span>${item.tenant?.name || msg("-")}</span>`,
            html`<a href="#/events/log/${item.pk}">
-                <i class="fas fa-share-square"></i>
+                <pf-tooltip position="top" content=${msg("Show details")}>
+                    <i class="fas fa-share-square"></i>
+                </pf-tooltip>
            </a>`,
        ];
    }
--- a/web/src/admin/events/RuleListPage.ts
+++ b/web/src/admin/events/RuleListPage.ts
@ -9,6 +9,7 @@ import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -91,7 +92,9 @@ export class RuleListPage extends TablePage<NotificationRule> {
                <span slot="header"> ${msg("Update Notification Rule")} </span>
                <ak-event-rule-form slot="form" .instancePk=${item.pk}> </ak-event-rule-form>
                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <i class="fas fa-edit"></i>
+                    <pf-tooltip position="top" content=${msg("Edit")}>
+                        <i class="fas fa-edit"></i>
+                    </pf-tooltip>
                </button>
            </ak-forms-modal>`,
        ];
--- a/web/src/admin/events/TransportListPage.ts
+++ b/web/src/admin/events/TransportListPage.ts
@ -8,6 +8,7 @@ import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -84,7 +85,9 @@ export class TransportListPage extends TablePage<NotificationTransport> {
                    <ak-event-transport-form slot="form" .instancePk=${item.pk}>
                    </ak-event-transport-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-edit"></i>
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit"></i>
+                        </pf-tooltip>
                    </button>
                </ak-forms-modal>
                <ak-action-button
@ -95,7 +98,9 @@ export class TransportListPage extends TablePage<NotificationTransport> {
                        });
                    }}
                >
-                    <i class="fas fa-vial" aria-hidden="true"></i>
+                    <pf-tooltip position="top" content=${msg("Test")}>
+                        <i class="fas fa-vial" aria-hidden="true"></i>
+                    </pf-tooltip>
                </ak-action-button>`,
        ];
    }
--- a/web/src/admin/flows/FlowListPage.ts
+++ b/web/src/admin/flows/FlowListPage.ts
@ -11,6 +11,7 @@ import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -103,7 +104,9 @@ export class FlowListPage extends TablePage<Flow> {
                    <span slot="header"> ${msg("Update Flow")} </span>
                    <ak-flow-form slot="form" .instancePk=${item.slug}> </ak-flow-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-edit"></i>
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit"></i>
+                        </pf-tooltip>
                    </button>
                </ak-forms-modal>
                <button
@ -115,10 +118,14 @@ export class FlowListPage extends TablePage<Flow> {
                        window.open(finalURL, "_blank");
                    }}
                >
-                    <i class="fas fa-play"></i>
+                    <pf-tooltip position="top" content=${msg("Execute")}>
+                        <i class="fas fa-play" aria-hidden="true"></i>
+                    </pf-tooltip>
                </button>
                <a class="pf-c-button pf-m-plain" href=${item.exportUrl}>
-                    <i class="fas fa-download"></i>
+                    <pf-tooltip position="top" content=${msg("Export")}>
+                        <i class="fas fa-download"></i>
+                    </pf-tooltip>
                </a>`,
        ];
    }
--- a/web/src/admin/groups/GroupListPage.ts
+++ b/web/src/admin/groups/GroupListPage.ts
@ -8,6 +8,7 @@ import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -88,7 +89,9 @@ export class GroupListPage extends TablePage<Group> {
                <span slot="header"> ${msg("Update Group")} </span>
                <ak-group-form slot="form" .instancePk=${item.pk}> </ak-group-form>
                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <i class="fas fa-edit"></i>
+                    <pf-tooltip position="top" content=${msg("Edit")}>
+                        <i class="fas fa-edit"></i>
+                    </pf-tooltip>
                </button>
            </ak-forms-modal>`,
        ];
--- a/web/src/admin/groups/RelatedGroupList.ts
+++ b/web/src/admin/groups/RelatedGroupList.ts
@ -11,6 +11,7 @@ import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { Table, TableColumn } from "@goauthentik/elements/table/Table";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -56,7 +57,9 @@ export class RelatedGroupAdd extends Form<{ groups: string[] }> {
                    }}
                >
                    <button slot="trigger" class="pf-c-button pf-m-control" type="button">
-                        <i class="fas fa-plus" aria-hidden="true"></i>
+                        <pf-tooltip position="top" content=${msg("Add group")}>
+                            <i class="fas fa-plus" aria-hidden="true"></i>
+                        </pf-tooltip>
                    </button>
                </ak-user-group-select-table>
                <div class="pf-c-form-control">
@ -150,7 +153,9 @@ export class RelatedGroupList extends Table<Group> {
                <span slot="header"> ${msg("Update Group")} </span>
                <ak-group-form slot="form" .instancePk=${item.pk}> </ak-group-form>
                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <i class="fas fa-edit"></i>
+                    <pf-tooltip position="top" content=${msg("Edit")}>
+                        <i class="fas fa-edit"></i>
+                    </pf-tooltip>
                </button>
            </ak-forms-modal>`,
        ];
--- a/web/src/admin/outposts/OutpostListPage.ts
+++ b/web/src/admin/outposts/OutpostListPage.ts
@ -13,6 +13,7 @@ import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { CSSResult } from "lit";
@ -135,7 +136,9 @@ export class OutpostListPage extends TablePage<Outpost> {
                    >
                    </ak-outpost-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-edit"></i>
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit"></i>
+                        </pf-tooltip>
                    </button>
                </ak-forms-modal>
                ${item.managed !== "goauthentik.io/outposts/embedded"
--- a/web/src/admin/outposts/ServiceConnectionListPage.ts
+++ b/web/src/admin/outposts/ServiceConnectionListPage.ts
@ -12,6 +12,7 @@ import "@goauthentik/elements/forms/ProxyForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -99,7 +100,9 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
                >
                </ak-proxy-form>
                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <i class="fas fa-edit"></i>
+                    <pf-tooltip position="top" content=${msg("Edit")}>
+                        <i class="fas fa-edit"></i>
+                    </pf-tooltip>
                </button>
            </ak-forms-modal>`,
        ];
--- a/web/src/admin/policies/PolicyListPage.ts
+++ b/web/src/admin/policies/PolicyListPage.ts
@ -16,6 +16,7 @@ import "@goauthentik/elements/forms/ProxyForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -86,7 +87,9 @@ export class PolicyListPage extends TablePage<Policy> {
                    >
                    </ak-proxy-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-pencil-alt" aria-hidden="true"></i>
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit"></i>
+                        </pf-tooltip>
                    </button>
                </ak-forms-modal>
                <ak-forms-modal .closeAfterSuccessfulSubmit=${false}>
@ -94,7 +97,9 @@ export class PolicyListPage extends TablePage<Policy> {
                    <span slot="header"> ${msg("Test Policy")} </span>
                    <ak-policy-test-form slot="form" .policy=${item}> </ak-policy-test-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-vial" aria-hidden="true"></i>
+                        <pf-tooltip position="top" content=${msg("Test")}>
+                            <i class="fas fa-vial" aria-hidden="true"></i>
+                        </pf-tooltip>
                    </button>
                </ak-forms-modal>`,
        ];
--- a/web/src/admin/property-mappings/PropertyMappingListPage.ts
+++ b/web/src/admin/property-mappings/PropertyMappingListPage.ts
@ -14,6 +14,7 @@ import { getURLParam, updateURLParams } from "@goauthentik/elements/router/Route
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -101,7 +102,9 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
                    >
                    </ak-proxy-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-edit"></i>
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit"></i>
+                        </pf-tooltip>
                    </button>
                </ak-forms-modal>
                <ak-forms-modal .closeAfterSuccessfulSubmit=${false}>
@ -110,7 +113,9 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
                    <ak-property-mapping-test-form slot="form" .mapping=${item}>
                    </ak-property-mapping-test-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-vial" aria-hidden="true"></i>
+                        <pf-tooltip position="top" content=${msg("Test")}>
+                            <i class="fas fa-vial" aria-hidden="true"></i>
+                        </pf-tooltip>
                    </button>
                </ak-forms-modal>`,
        ];
--- a/web/src/admin/providers/ProviderListPage.ts
+++ b/web/src/admin/providers/ProviderListPage.ts
@ -14,6 +14,7 @@ import "@goauthentik/elements/forms/ProxyForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -118,7 +119,9 @@ export class ProviderListPage extends TablePage<Provider> {
                >
                </ak-proxy-form>
                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <i class="fas fa-edit"></i>
+                    <pf-tooltip position="top" content=${msg("Edit")}>
+                        <i class="fas fa-edit"></i>
+                    </pf-tooltip>
                </button>
            </ak-forms-modal>`,
        ];
--- a/web/src/admin/sources/SourceListPage.ts
+++ b/web/src/admin/sources/SourceListPage.ts
@ -12,6 +12,7 @@ import "@goauthentik/elements/forms/ProxyForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -107,7 +108,9 @@ export class SourceListPage extends TablePage<Source> {
                >
                </ak-proxy-form>
                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <i class="fas fa-edit"></i>
+                    <pf-tooltip position="top" content=${msg("Edit")}>
+                        <i class="fas fa-edit"></i>
+                    </pf-tooltip>
                </button>
            </ak-forms-modal>`,
        ];
--- a/web/src/admin/stages/StageListPage.ts
+++ b/web/src/admin/stages/StageListPage.ts
@ -27,6 +27,7 @@ import "@goauthentik/elements/forms/ProxyForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -108,7 +109,9 @@ export class StageListPage extends TablePage<Stage> {
                    >
                    </ak-stage-authenticator-duo-device-import-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-file-import"></i>
+                        <pf-tooltip position="top" content=${msg("Import devices")}>
+                            <i class="fas fa-file-import" aria-hidden="true"></i>
+                        </pf-tooltip>
                    </button>
                </ak-forms-modal>`;
            default:
@ -141,7 +144,9 @@ export class StageListPage extends TablePage<Stage> {
                    >
                    </ak-proxy-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-edit"></i>
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit"></i>
+                        </pf-tooltip>
                    </button>
                </ak-forms-modal>
                ${this.renderStageActions(item)}`,
--- a/web/src/admin/stages/invitation/InvitationListPage.ts
+++ b/web/src/admin/stages/invitation/InvitationListPage.ts
@ -10,6 +10,7 @@ import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, html } from "lit";
@ -127,7 +128,9 @@ export class InvitationListPage extends TablePage<Invitation> {
                <span slot="header"> ${msg("Update Invitation")} </span>
                <ak-invitation-form slot="form" .instancePk=${item.pk}> </ak-invitation-form>
                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <i class="fas fa-edit"></i>
+                    <pf-tooltip position="top" content=${msg("Edit")}>
+                        <i class="fas fa-edit"></i>
+                    </pf-tooltip>
                </button>
            </ak-forms-modal>`,
        ];
--- a/web/src/admin/stages/prompt/PromptListPage.ts
+++ b/web/src/admin/stages/prompt/PromptListPage.ts
@ -8,6 +8,7 @@ import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -91,7 +92,9 @@ export class PromptListPage extends TablePage<Prompt> {
                <span slot="header"> ${msg("Update Prompt")} </span>
                <ak-prompt-form slot="form" .instancePk=${item.pk}> </ak-prompt-form>
                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <i class="fas fa-edit"></i>
+                    <pf-tooltip position="top" content=${msg("Edit")}>
+                        <i class="fas fa-edit"></i>
+                    </pf-tooltip>
                </button>
            </ak-forms-modal>`,
        ];
--- a/web/src/admin/system-tasks/SystemTaskListPage.ts
+++ b/web/src/admin/system-tasks/SystemTaskListPage.ts
@ -6,6 +6,7 @@ import "@goauthentik/elements/buttons/SpinnerButton";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { CSSResult, TemplateResult, html } from "lit";
@ -133,7 +134,9 @@ export class SystemTaskListPage extends TablePage<Task> {
                        });
                }}
            >
-                <i class="fas fa-play" aria-hidden="true"></i>
+                <pf-tooltip position="top" content=${msg("Restart task")}>
+                    <i class="fas fa-redo" aria-hidden="true"></i>
+                </pf-tooltip>
            </ak-action-button>`,
        ];
    }
--- a/web/src/admin/tenants/TenantListPage.ts
+++ b/web/src/admin/tenants/TenantListPage.ts
@ -8,6 +8,7 @@ import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -88,7 +89,9 @@ export class TenantListPage extends TablePage<Tenant> {
                <span slot="header"> ${msg("Update Tenant")} </span>
                <ak-tenant-form slot="form" .instancePk=${item.tenantUuid}> </ak-tenant-form>
                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <i class="fas fa-edit"></i>
+                    <pf-tooltip position="top" content=${msg("Edit")}>
+                        <i class="fas fa-edit"></i>
+                    </pf-tooltip>
                </button>
            </ak-forms-modal>`,
        ];
--- a/web/src/admin/tokens/TokenListPage.ts
+++ b/web/src/admin/tokens/TokenListPage.ts
@ -9,6 +9,7 @@ import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -128,7 +129,9 @@ export class TokenListPage extends TablePage<Token> {
                          <span slot="header"> ${msg("Update Token")} </span>
                          <ak-token-form slot="form" .instancePk=${item.identifier}></ak-token-form>
                          <button slot="trigger" class="pf-c-button pf-m-plain">
-                              <i class="fas fa-edit"></i>
+                              <pf-tooltip position="top" content=${msg("Edit")}>
+                                  <i class="fas fa-edit"></i>
+                              </pf-tooltip>
                          </button>
                      </ak-forms-modal>`
                    : html``}
@ -136,7 +139,9 @@ export class TokenListPage extends TablePage<Token> {
                    class="pf-c-button pf-m-plain"
                    identifier="${item.identifier}"
                >
-                    <i class="fas fa-copy"></i>
+                    <pf-tooltip position="top" content=${msg("Copy token")}>
+                        <i class="fas fa-copy"></i>
+                    </pf-tooltip>
                </ak-token-copy-button>
            `,
        ];
--- a/web/src/admin/users/RelatedUserList.ts
+++ b/web/src/admin/users/RelatedUserList.ts
@ -20,6 +20,7 @@ import { getURLParam, updateURLParams } from "@goauthentik/elements/router/Route
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { Table, TableColumn } from "@goauthentik/elements/table/Table";
 import { UserOption } from "@goauthentik/elements/user/utils";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { CSSResult, TemplateResult, html } from "lit";
@ -70,7 +71,9 @@ export class RelatedUserAdd extends Form<{ users: number[] }> {
                        }}
                    >
                        <button slot="trigger" class="pf-c-button pf-m-control" type="button">
-                            <i class="fas fa-plus" aria-hidden="true"></i>
+                            <pf-tooltip position="top" content=${msg("Add users")}>
+                                <i class="fas fa-plus" aria-hidden="true"></i>
+                            </pf-tooltip>
                        </button>
                    </ak-group-member-select-table>
                    <div class="pf-c-form-control">
@ -187,7 +190,9 @@ export class RelatedUserList extends Table<User> {
                    <span slot="header"> ${msg("Update User")} </span>
                    <ak-user-form slot="form" .instancePk=${item.pk}> </ak-user-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-edit"></i>
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit"></i>
+                        </pf-tooltip>
                    </button>
                </ak-forms-modal>
                ${rootInterface()?.config?.capabilities.includes(CapabilitiesEnum.CanImpersonate)
--- a/web/src/admin/users/UserListPage.ts
+++ b/web/src/admin/users/UserListPage.ts
@ -20,6 +20,7 @@ import { getURLParam, updateURLParams } from "@goauthentik/elements/router/Route
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { CSSResult, TemplateResult, html } from "lit";
@ -192,7 +193,9 @@ export class UserListPage extends TablePage<User> {
                    <span slot="header"> ${msg("Update User")} </span>
                    <ak-user-form slot="form" .instancePk=${item.pk}> </ak-user-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-edit"></i>
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit"></i>
+                        </pf-tooltip>
                    </button>
                </ak-forms-modal>
                ${rootInterface()?.config?.capabilities.includes(CapabilitiesEnum.CanImpersonate)
--- a/web/src/elements/PageHeader.ts
+++ b/web/src/elements/PageHeader.ts
@ -9,6 +9,7 @@ import {
 import { currentInterface } from "@goauthentik/common/sentry";
 import { me } from "@goauthentik/common/users";
 import { AKElement, rootInterface } from "@goauthentik/elements/Base";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html } from "lit";
@ -169,7 +170,9 @@ export class PageHeader extends AKElement {
                        );
                    }}
                >
-                    <i class="fas fa-code"></i>
+                    <pf-tooltip position="top" content=${msg("Open API drawer")}>
+                        <i class="fas fa-code"></i>
+                    </pf-tooltip>
                </button>
                <button
                    class="notification-trigger pf-c-button pf-m-plain ${this.hasNotifications
@ -184,7 +187,9 @@ export class PageHeader extends AKElement {
                        );
                    }}
                >
-                    <i class="fas fa-bell"></i>
+                    <pf-tooltip position="top" content=${msg("Open Notification drawer")}>
+                        <i class="fas fa-bell"></i>
+                    </pf-tooltip>
                </button>
            </div>`;
    }
--- a/web/src/elements/Tooltip.ts
+++ b/web/src/elements/Tooltip.ts
@ -1,55 +0,0 @@
-import { AKElement } from "@goauthentik/elements/Base";
-
-import { CSSResult, TemplateResult, css, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-
-import PFTooltip from "@patternfly/patternfly/components/Tooltip/tooltip.css";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
-
-@customElement("ak-tooltip")
-export class Tooltip extends AKElement {
-    @state()
-    open = false;
-
-    static get styles(): CSSResult[] {
-        return [
-            PFBase,
-            PFTooltip,
-            css`
-                .pf-c-tooltip__content {
-                    text-align: inherit;
-                }
-                .outer {
-                    position: relative;
-                }
-                .pf-c-tooltip {
-                    position: absolute;
-                    z-index: 999;
-                }
-            `,
-        ];
-    }
-
-    render(): TemplateResult {
-        return html`<slot
-                @mouseenter=${() => {
-                    this.open = true;
-                }}
-                @mouseleave=${() => {
-                    this.open = false;
-                }}
-                name="trigger"
-            ></slot>
-            ${this.open
-                ? html`<div class="outer">
-                      <div class="pf-c-tooltip" role="tooltip">
-                          <div class="pf-c-tooltip__arrow"></div>
-
-                          <div class="pf-c-tooltip__content">
-                              <slot name="tooltip"></slot>
-                          </div>
-                      </div>
-                  </div>`
-                : html``}`;
-    }
-}
--- a/web/src/elements/chips/Chip.ts
+++ b/web/src/elements/chips/Chip.ts
@ -1,5 +1,7 @@
 import { AKElement } from "@goauthentik/elements/Base";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

+import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";

@ -38,7 +40,9 @@ export class Chip extends AKElement {
                              );
                          }}
                      >
-                          <i class="fas fa-times" aria-hidden="true"></i>
+                          <pf-tooltip position="top" content=${msg("Remove item")}>
+                              <i class="fas fa-times" aria-hidden="true"></i>
+                          </pf-tooltip>
                      </button>`
                    : html``}
            </div>
--- a/web/src/elements/notifications/NotificationDrawer.ts
+++ b/web/src/elements/notifications/NotificationDrawer.ts
@ -99,7 +99,9 @@ export class NotificationDrawer extends AKElement {
                        class="pf-c-dropdown__toggle pf-m-plain"
                        href="/if/admin/#/events/log/${item.event?.pk}"
                    >
-                        <i class="fas fa-share-square"></i>
+                        <pf-tooltip position="top" content=${msg("Show details")}>
+                            <i class="fas fa-share-square"></i>
+                        </pf-tooltip>
                    </a>
                `}
                <button
--- a/web/src/elements/utils/TimeDeltaHelp.ts
+++ b/web/src/elements/utils/TimeDeltaHelp.ts
@ -1,5 +1,5 @@
 import { AKElement } from "@goauthentik/elements/Base";
-import "@goauthentik/elements/Tooltip";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, html } from "lit";
@ -19,26 +19,27 @@ export class TimeDeltaHelp extends AKElement {
    }

    render(): TemplateResult {
-        return html` <ak-tooltip>
-            <p class="pf-c-form__helper-text" slot="trigger">
+        return html`<div class="pf-c-form__helper-text">
+            <span>
                ${this.negative
                    ? msg("(Format: hours=-1;minutes=-2;seconds=-3).")
                    : msg("(Format: hours=1;minutes=2;seconds=3).")}
+            </span>
+            <pf-tooltip position="top">
                <i class="pf-icon fa fa-question-circle" aria-hidden="true"></i>
-            </p>
-
-            <div slot="tooltip">
-                ${msg("The following keywords are supported:")}
-                <ul class="pf-c-list">
-                    <li><pre>microseconds</pre></li>
-                    <li><pre>milliseconds</pre></li>
-                    <li><pre>seconds</pre></li>
-                    <li><pre>minutes</pre></li>
-                    <li><pre>hours</pre></li>
-                    <li><pre>days</pre></li>
-                    <li><pre>weeks</pre></li>
-                </ul>
-            </div>
-        </ak-tooltip>`;
+                <div slot="content">
+                    ${msg("The following keywords are supported:")}
+                    <ul class="pf-c-list">
+                        <li><pre>microseconds</pre></li>
+                        <li><pre>milliseconds</pre></li>
+                        <li><pre>seconds</pre></li>
+                        <li><pre>minutes</pre></li>
+                        <li><pre>hours</pre></li>
+                        <li><pre>days</pre></li>
+                        <li><pre>weeks</pre></li>
+                    </ul>
+                </div>
+            </pf-tooltip>
+        </div>`;
    }
 }
--- a/web/src/user/LibraryApplication/index.ts
+++ b/web/src/user/LibraryApplication/index.ts
@ -100,7 +100,7 @@ export class LibraryApplication extends AKElement {
                              class="pf-c-button pf-m-control pf-m-small pf-m-block"
                              href="/if/admin/#/core/applications/${this.application?.slug}"
                          >
-                              <i class="fas fa-pencil-alt"></i>&nbsp;${msg("Edit")}
+                              <i class="fas fa-edit"></i>&nbsp;${msg("Edit")}
                          </a>
                      `
                    : html``}
--- a/web/src/user/UserInterface.ts
+++ b/web/src/user/UserInterface.ts
@ -22,6 +22,7 @@ import "@goauthentik/elements/sidebar/Sidebar";
 import { DefaultTenant } from "@goauthentik/elements/sidebar/SidebarBrand";
 import "@goauthentik/elements/sidebar/SidebarItem";
 import { ROUTES } from "@goauthentik/user/Routes";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html } from "lit";
@ -211,7 +212,12 @@ export class UserInterface extends Interface {
                                              });
                                          }}
                                      >
-                                          <i class="fas fa-code" aria-hidden="true"></i>
+                                          <pf-tooltip
+                                              position="top"
+                                              content=${msg("Open API drawer")}
+                                          >
+                                              <i class="fas fa-code" aria-hidden="true"></i>
+                                          </pf-tooltip>
                                      </button>
                                  </div>`
                                : html``}
@ -238,7 +244,12 @@ export class UserInterface extends Interface {
                                                  ? "pf-m-unread"
                                                  : ""}"
                                          >
-                                              <i class="fas fa-bell" aria-hidden="true"></i>
+                                              <pf-tooltip
+                                                  position="top"
+                                                  content=${msg("Open Notification drawer")}
+                                              >
+                                                  <i class="fas fa-bell" aria-hidden="true"></i>
+                                              </pf-tooltip>
                                              <span class="pf-c-notification-badge__count"
                                                  >${this.notificationsCount}</span
                                              >
@ -253,7 +264,9 @@ export class UserInterface extends Interface {
                                          type="button"
                                          href="#/settings"
                                      >
-                                          <i class="fas fa-cog" aria-hidden="true"></i>
+                                          <pf-tooltip position="top" content=${msg("Settings")}>
+                                              <i class="fas fa-cog" aria-hidden="true"></i>
+                                          </pf-tooltip>
                                      </a>
                                  </div>`
                                : html``}
@ -262,7 +275,9 @@ export class UserInterface extends Interface {
                                    href="/flows/-/default/invalidation/"
                                    class="pf-c-button pf-m-plain"
                                >
-                                    <i class="fas fa-sign-out-alt" aria-hidden="true"></i>
+                                    <pf-tooltip position="top" content=${msg("Sign out")}>
+                                        <i class="fas fa-sign-out-alt" aria-hidden="true"></i>
+                                    </pf-tooltip>
                                </a>
                            </div>
                            ${this.me.user.isSuperuser
--- a/web/src/user/user-settings/mfa/MFADevicesPage.ts
+++ b/web/src/user/user-settings/mfa/MFADevicesPage.ts
@ -6,6 +6,7 @@ import "@goauthentik/elements/forms/DeleteBulkForm";
 import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse, Table, TableColumn } from "@goauthentik/elements/table/Table";
 import "@goauthentik/user/user-settings/mfa/MFADeviceForm";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { TemplateResult, html } from "lit";
@ -142,7 +143,9 @@ export class MFADevicesPage extends Table<Device> {
                    <ak-user-mfa-form slot="form" deviceType=${item.type} .instancePk=${item.pk}>
                    </ak-user-mfa-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-edit"></i>
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit"></i>
+                        </pf-tooltip>
                    </button>
                </ak-forms-modal>
            `,
--- a/web/src/user/user-settings/tokens/UserTokenList.ts
+++ b/web/src/user/user-settings/tokens/UserTokenList.ts
@ -11,6 +11,7 @@ import "@goauthentik/elements/forms/ModalForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { Table, TableColumn } from "@goauthentik/elements/table/Table";
 import "@goauthentik/user/user-settings/tokens/UserTokenForm";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, html } from "lit";
@ -155,14 +156,18 @@ export class UserTokenList extends Table<Token> {
                    <ak-user-token-form slot="form" .instancePk=${item.identifier}>
                    </ak-user-token-form>
                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <i class="fas fa-edit"></i>
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit"></i>
+                        </pf-tooltip>
                    </button>
                </ak-forms-modal>
                <ak-token-copy-button
                    class="pf-c-button pf-m-plain"
                    identifier="${item.identifier}"
                >
-                    <i class="fas fa-copy"></i>
+                    <pf-tooltip position="top" content=${msg("Copy token")}>
+                        <i class="fas fa-copy"></i>
+                    </pf-tooltip>
                </ak-token-copy-button>
            `,
        ];