From d7306fb22e782c2068e119392870ad8669a80594 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Mon, 4 Jul 2022 02:21:25 +0300
Subject: [PATCH] refactor(app): replace angularjs tooltip with react [EE-3606]
 (#7172)

* refactor(app): replace angularjs tooltip with react
---
 app/assets/css/bootstrap-override.css         | 11 +++++---
 .../containerCapabilities.html                |  2 +-
 .../components/log-viewer/logViewer.html      |  2 +-
 .../volumesNFSForm/volumesnfsForm.html        |  2 +-
 app/docker/views/containers/console/exec.html |  2 +-
 .../containers/create/createcontainer.html    | 25 +++++++----------
 .../views/containers/edit/container.html      |  4 +--
 .../views/networks/create/createnetwork.html  |  7 ++---
 .../views/secrets/create/createsecret.html    |  2 +-
 .../views/services/create/createservice.html  |  8 +++---
 .../create/includes/update-restart.html       |  6 ++---
 app/docker/views/services/edit/service.html   |  4 +--
 .../views/volumes/create/createvolume.html    |  5 +---
 .../kubernetesConfigurationData.html          |  2 +-
 .../create/createApplication.html             | 11 +++-----
 .../views/applications/edit/application.html  |  4 +--
 .../views/applications/logs/logs.html         |  2 +-
 app/kubernetes/views/deploy/deploy.html       |  5 +---
 .../create/createResourcePool.html            | 12 +++------
 .../resource-pools/edit/resourcePool.html     | 12 +++------
 app/kubernetes/views/stacks/logs/logs.html    |  2 +-
 app/kubernetes/views/volumes/edit/volume.html |  6 +----
 .../AccessControlPanelDetails.tsx             |  2 +-
 .../components/Tip/Tooltip/Tooltip.css        | 17 ------------
 .../components/Tip/Tooltip/TooltipAngular.ts  | 21 ---------------
 app/portainer/components/Tip/Tooltip/index.ts |  1 -
 .../porAccessControlForm.html                 | 11 +++-----
 .../endpointSecurity/porEndpointSecurity.html |  2 +-
 .../git-form-auth-fieldset.html               |  2 +-
 .../registry-form-ecr.html                    |  4 +--
 .../registry-form-azure.html                  |  2 +-
 .../registry-form-custom.html                 |  4 +--
 .../registry-form-gitlab.html                 |  4 +--
 .../registry-form-proget.html                 |  4 +--
 .../stackFromTemplateForm.html                |  2 +-
 app/portainer/components/index.js             |  3 ---
 .../oauth-settings/oauth-settings.html        | 27 +++++++------------
 app/portainer/react/components/index.ts       |  2 ++
 .../ldap/ad-settings/ad-settings.html         |  4 +--
 .../ldap-custom-admin-group.html              |  6 ++---
 .../ldap-custom-group-search.html             |  6 ++---
 .../ldap-custom-user-search.html              |  6 ++---
 .../ldap-settings-custom.html                 |  6 ++---
 .../ldap-settings-openldap.html               |  6 ++---
 .../ldap-settings-security.html               |  9 +++----
 .../views/devices/import/importDevice.html    |  2 +-
 .../endpoints/create/createendpoint.html      | 12 +++------
 .../views/endpoints/edit/endpoint.html        |  8 ++----
 app/portainer/views/init/admin/initAdmin.html |  3 +--
 .../views/init/endpoint/includes/agent.html   |  2 +-
 .../views/registries/edit/registry.html       |  5 ++--
 .../settingsAuthentication.html               |  2 +-
 .../views/stacks/create/createstack.html      |  4 +--
 app/portainer/views/stacks/edit/stack.html    |  6 ++---
 app/portainer/views/templates/templates.html  |  2 +-
 app/portainer/views/users/edit/user.html      |  3 +--
 app/portainer/views/users/users.html          |  9 ++-----
 .../components/PageHeader/HeaderTitle.tsx     |  7 ++++-
 .../components/Tip/Tooltip/Tooltip.module.css |  4 +++
 app/react/components/Tip/Tooltip/Tooltip.tsx  | 15 ++++++++---
 .../SwitchField/SwitchField.tsx               |  2 +-
 61 files changed, 146 insertions(+), 227 deletions(-)
 delete mode 100644 app/portainer/components/Tip/Tooltip/Tooltip.css
 delete mode 100644 app/portainer/components/Tip/Tooltip/TooltipAngular.ts
 delete mode 100644 app/portainer/components/Tip/Tooltip/index.ts

diff --git a/app/assets/css/bootstrap-override.css b/app/assets/css/bootstrap-override.css
index e402bea34..538a05652 100644
--- a/app/assets/css/bootstrap-override.css
+++ b/app/assets/css/bootstrap-override.css
@@ -488,10 +488,9 @@ input:checked + .slider:before {
 /* Feather Icon Variants */
 
 .feather {
-  display: block;
-  color: var(--text-body-color);
-  height: 18px;
-  width: 18px;
+  height: 1em;
+  width: 1em;
+  color: inherit;
 }
 
 .icon-xs {
@@ -581,3 +580,7 @@ input:checked + .slider:before {
   content: '*';
   color: var(--ui-error-9);
 }
+
+.control-label {
+  @apply inline-flex items-center;
+}
diff --git a/app/docker/components/container-capabilities/containerCapabilities.html b/app/docker/components/container-capabilities/containerCapabilities.html
index 89163c10a..fdfd25a83 100644
--- a/app/docker/components/container-capabilities/containerCapabilities.html
+++ b/app/docker/components/container-capabilities/containerCapabilities.html
@@ -6,7 +6,7 @@
         <div class="col-xs-8">
           <label for="capability" class="control-label text-left" style="display: flex; padding: 0">
             {{ cap.capability }}
-            <portainer-tooltip position="bottom" message="{{ cap.description }}"></portainer-tooltip>
+            <portainer-tooltip message="cap.description"></portainer-tooltip>
           </label>
         </div>
         <div class="col-xs-4">
diff --git a/app/docker/components/log-viewer/logViewer.html b/app/docker/components/log-viewer/logViewer.html
index ef093baec..1e70f54f4 100644
--- a/app/docker/components/log-viewer/logViewer.html
+++ b/app/docker/components/log-viewer/logViewer.html
@@ -8,7 +8,7 @@
             <div class="col-sm-12">
               <label for="tls" class="control-label text-left">
                 Auto-refresh logs
-                <portainer-tooltip position="bottom" message="Disabling this option allows you to pause the log collection process and the auto-scrolling."></portainer-tooltip>
+                <portainer-tooltip message="'Disabling this option allows you to pause the log collection process and the auto-scrolling.'"></portainer-tooltip>
               </label>
               <label class="switch" style="margin-left: 20px">
                 <input
diff --git a/app/docker/components/volumesNFSForm/volumesnfsForm.html b/app/docker/components/volumesNFSForm/volumesnfsForm.html
index 5ae6c8f17..db68c3d6c 100644
--- a/app/docker/components/volumesNFSForm/volumesnfsForm.html
+++ b/app/docker/components/volumesNFSForm/volumesnfsForm.html
@@ -58,7 +58,7 @@
     <div class="form-group col-md-12">
       <label for="nfs_options" class="col-sm-2 col-md-1 control-label text-left"
         >Options
-        <portainer-tooltip position="bottom" message="Comma separated list of options"></portainer-tooltip>
+        <portainer-tooltip message="'Comma separated list of options'"></portainer-tooltip>
       </label>
       <div class="col-sm-10 col-md-11">
         <input type="text" class="form-control" ng-model="$ctrl.data.options" name="nfs_options" placeholder="e.g. rw,noatime,tcp ..." required />
diff --git a/app/docker/views/containers/console/exec.html b/app/docker/views/containers/console/exec.html
index 6e22c68b4..d13358bec 100644
--- a/app/docker/views/containers/console/exec.html
+++ b/app/docker/views/containers/console/exec.html
@@ -41,7 +41,7 @@
             <div class="form-group">
               <label class="col-lg-1 text-left col-sm-2 control-label">
                 User
-                <portainer-tooltip position="bottom" message="Format is one of: user, user:group, uid or uid:gid"></portainer-tooltip>
+                <portainer-tooltip message="'Format is one of: user, user:group, uid or uid:gid'"></portainer-tooltip>
               </label>
               <div class="col-lg-11 col-sm-10">
                 <input class="form-control" type="text" ng-model="formValues.user" placeholder="root" />
diff --git a/app/docker/views/containers/create/createcontainer.html b/app/docker/views/containers/create/createcontainer.html
index 4d60ac899..0649abff3 100644
--- a/app/docker/views/containers/create/createcontainer.html
+++ b/app/docker/views/containers/create/createcontainer.html
@@ -53,10 +53,7 @@
                 <div class="col-sm-12">
                   <label for="ownership" class="control-label text-left">
                     Always pull the image
-                    <portainer-tooltip
-                      position="bottom"
-                      message="When enabled, Portainer will automatically try to pull the specified image before creating the container."
-                    ></portainer-tooltip>
+                    <portainer-tooltip message="'When enabled, Portainer will automatically try to pull the specified image before creating the container.'"></portainer-tooltip>
                   </label>
                   <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="formValues.alwaysPull" ng-disabled="!state.pullImageValidity" /><i></i> </label>
                 </div>
@@ -73,8 +70,8 @@
                 <label class="control-label text-left">
                   Create a container webhook
                   <portainer-tooltip
-                    position="top"
-                    message="Create a webhook (or callback URI) to automate the recreate this container. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and recreate this container."
+                    position="'top'"
+                    message="'Create a webhook (or callback URI) to automate the recreate this container. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and recreate this container.'"
                   ></portainer-tooltip>
                 </label>
                 <label class="switch box-selector-item limited business" style="margin-left: 20px">
@@ -94,8 +91,7 @@
               <label class="control-label text-left">
                 Publish all exposed network ports to random host ports
                 <portainer-tooltip
-                  position="bottom"
-                  message="When enabled, Portainer will let Docker automatically map a random port on the host to each one defined in the image Dockerfile."
+                  message="'When enabled, Portainer will let Docker automatically map a random port on the host to each one defined in the image Dockerfile.'"
                 ></portainer-tooltip>
               </label>
               <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="config.HostConfig.PublishAllPorts" /><i></i> </label>
@@ -108,8 +104,7 @@
               <label class="control-label text-left">
                 Manual network port publishing
                 <portainer-tooltip
-                  position="bottom"
-                  message="When a range of ports on the host and a single port on the container is specified, Docker will randomly choose a single available port in the defined range and forward that to the container port."
+                  message="'When a range of ports on the host and a single port on the container is specified, Docker will randomly choose a single available port in the defined range and forward that to the container port.'"
                 ></portainer-tooltip>
               </label>
               <span class="label label-default interactive" style="margin-left: 10px" ng-click="addPortBinding()">
@@ -167,8 +162,7 @@
               <label for="ownership" class="control-label text-left">
                 Auto remove
                 <portainer-tooltip
-                  position="bottom"
-                  message="When enabled, Portainer will automatically remove the container when it exits. This is useful when you want to use the container only once."
+                  message="'When enabled, Portainer will automatically remove the container when it exits. This is useful when you want to use the container only once.'"
                 ></portainer-tooltip>
               </label>
               <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="config.HostConfig.AutoRemove" /><i></i> </label>
@@ -244,8 +238,7 @@
                 <label for="container_entrypoint" class="col-sm-2 col-lg-1 control-label text-left">
                   Entrypoint
                   <portainer-tooltip
-                    position="bottom"
-                    message="When container entrypoint is entered as part of the Command field, set Entrypoint to Override mode and leave blank, else it will revert to default."
+                    message="'When container entrypoint is entered as part of the Command field, set Entrypoint to Override mode and leave blank, else it will revert to default.'"
                   ></portainer-tooltip>
                 </label>
                 <div class="col-sm-9">
@@ -337,8 +330,8 @@
                   <label class="control-label text-left">
                     Options
                     <portainer-tooltip
-                      position="top"
-                      message="Add button is disabled unless a driver other than none or default is selected. Options are specific to the selected driver, refer to the driver documentation."
+                      position="'top'"
+                      message="'Add button is disabled unless a driver other than none or default is selected. Options are specific to the selected driver, refer to the driver documentation.'"
                     ></portainer-tooltip>
                   </label>
                   <span
diff --git a/app/docker/views/containers/edit/container.html b/app/docker/views/containers/edit/container.html
index 141df4fbd..9a3a60cdb 100644
--- a/app/docker/views/containers/edit/container.html
+++ b/app/docker/views/containers/edit/container.html
@@ -116,8 +116,8 @@
               <td colspan="1">
                 Container webhook
                 <portainer-tooltip
-                  position="top"
-                  message="Webhook (or callback URI) used to automate the recreate this container. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and recreate this container."
+                  position="'top'"
+                  message="'Webhook (or callback URI) used to automate the recreate this container. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and recreate this container.'"
                 ></portainer-tooltip>
                 <label class="switch box-selector-item limited business" style="margin-left: 20px">
                   <input disable-authorization="DockerContainerUpdate" type="checkbox" ng-model="WebhookExists" disabled="disabled" ng-checked="true" /><i></i>
diff --git a/app/docker/views/networks/create/createnetwork.html b/app/docker/views/networks/create/createnetwork.html
index 95acab6f3..1d938f91c 100644
--- a/app/docker/views/networks/create/createnetwork.html
+++ b/app/docker/views/networks/create/createnetwork.html
@@ -33,10 +33,7 @@
             <div class="col-sm-12" style="margin-top: 5px">
               <label class="control-label text-left">
                 Driver options
-                <portainer-tooltip
-                  position="bottom"
-                  message="Driver options are specific to the selected driver. Please refer to the selected driver documentation."
-                ></portainer-tooltip>
+                <portainer-tooltip message="'Driver options are specific to the selected driver. Please refer to the selected driver documentation.'"></portainer-tooltip>
               </label>
               <span class="label label-default interactive" style="margin-left: 10px" ng-click="addDriverOption()">
                 <i class="fa fa-plus-circle" aria-hidden="true"></i> add driver option
@@ -189,7 +186,7 @@
             <div class="col-sm-12">
               <label for="ownership" class="control-label text-left">
                 Isolated network
-                <portainer-tooltip position="bottom" message="An isolated network has no inbound or outbound communications."></portainer-tooltip>
+                <portainer-tooltip message="'An isolated network has no inbound or outbound communications.'"></portainer-tooltip>
               </label>
               <label name="ownership" class="switch" style="margin-left: 20px">
                 <input type="checkbox" ng-model="config.Internal" />
diff --git a/app/docker/views/secrets/create/createsecret.html b/app/docker/views/secrets/create/createsecret.html
index b3d34c7c4..1ee6936ed 100644
--- a/app/docker/views/secrets/create/createsecret.html
+++ b/app/docker/views/secrets/create/createsecret.html
@@ -29,7 +29,7 @@
             <div class="col-sm-12">
               <label for="encode_secret" class="control-label text-left">
                 Encode secret
-                <portainer-tooltip position="bottom" message="Secrets need to be base64 encoded. Disable this if your secret is already base64 encoded."></portainer-tooltip>
+                <portainer-tooltip message="'Secrets need to be base64 encoded. Disable this if your secret is already base64 encoded.'"></portainer-tooltip>
               </label>
               <label class="switch" style="margin-left: 20px"> <input type="checkbox" name="encode_secret" ng-model="formValues.encodeSecret" /><i></i> </label>
             </div>
diff --git a/app/docker/views/services/create/createservice.html b/app/docker/views/services/create/createservice.html
index e1f05185f..6c63f6caf 100644
--- a/app/docker/views/services/create/createservice.html
+++ b/app/docker/views/services/create/createservice.html
@@ -102,8 +102,8 @@
                 <label class="control-label text-left">
                   Create a service webhook
                   <portainer-tooltip
-                    position="top"
-                    message="Create a webhook (or callback URI) to automate the update of this service. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this service."
+                    position="'top'"
+                    message="'Create a webhook (or callback URI) to automate the update of this service. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this service.'"
                   ></portainer-tooltip>
                 </label>
                 <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="formValues.Webhook" /><i></i> </label>
@@ -213,8 +213,8 @@
                   <label class="control-label text-left">
                     Options
                     <portainer-tooltip
-                      position="top"
-                      message="Add button is disabled unless a driver other than none or default is selected. Options are specific to the selected driver, refer to the driver documentation."
+                      position="'top'"
+                      message="'Add button is disabled unless a driver other than none or default is selected. Options are specific to the selected driver, refer to the driver documentation.'"
                     ></portainer-tooltip>
                   </label>
                   <span
diff --git a/app/docker/views/services/create/includes/update-restart.html b/app/docker/views/services/create/includes/update-restart.html
index 200d5389d..82813ec2a 100644
--- a/app/docker/views/services/create/includes/update-restart.html
+++ b/app/docker/views/services/create/includes/update-restart.html
@@ -15,7 +15,7 @@
   <div class="form-group">
     <label for="update-delay" class="col-sm-3 col-lg-2 control-label text-left">
       Update delay
-      <portainer-tooltip position="bottom" message="Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns."></portainer-tooltip>
+      <portainer-tooltip message="'Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns.'"></portainer-tooltip>
     </label>
     <div class="col-sm-4 col-lg-3">
       <input type="text" class="form-control" ng-model="formValues.UpdateDelay" id="update-delay" placeholder="e.g. 1m" ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i" />
@@ -74,7 +74,7 @@
   <div class="form-group">
     <label for="restart-delay" class="col-sm-3 col-lg-2 control-label text-left">
       Restart delay
-      <portainer-tooltip position="bottom" message="Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns."></portainer-tooltip>
+      <portainer-tooltip message="'Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns.'"></portainer-tooltip>
     </label>
     <div class="col-sm-4 col-lg-3">
       <input type="text" class="form-control" ng-model="formValues.RestartDelay" id="restart-delay" placeholder="e.g. 1m" ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i" />
@@ -99,7 +99,7 @@
   <div class="form-group">
     <label for="restart-window" class="col-sm-3 col-lg-2 control-label text-left">
       Restart window
-      <portainer-tooltip position="bottom" message="Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns."></portainer-tooltip>
+      <portainer-tooltip message="'Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns.'"></portainer-tooltip>
     </label>
     <div class="col-sm-4 col-lg-3">
       <input type="text" class="form-control" ng-model="formValues.RestartWindow" id="restart-window" placeholder="e.g. 1m" ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i" />
diff --git a/app/docker/views/services/edit/service.html b/app/docker/views/services/edit/service.html
index e88af91e1..cf6674c8b 100644
--- a/app/docker/views/services/edit/service.html
+++ b/app/docker/views/services/edit/service.html
@@ -78,8 +78,8 @@
               <td colspan="{{ webhookURL ? '1' : '2' }}">
                 Service webhook
                 <portainer-tooltip
-                  position="top"
-                  message="Webhook (or callback URI) used to automate the update of this service. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this service."
+                  position="'top'"
+                  message="'Webhook (or callback URI) used to automate the update of this service. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this service.'"
                 ></portainer-tooltip>
                 <label class="switch" style="margin-left: 20px">
                   <input disable-authorization="DockerServiceUpdate" type="checkbox" ng-model="WebhookExists" ng-click="updateWebhook(service)" /><i></i>
diff --git a/app/docker/views/volumes/create/createvolume.html b/app/docker/views/volumes/create/createvolume.html
index eb1cf3669..96f814858 100644
--- a/app/docker/views/volumes/create/createvolume.html
+++ b/app/docker/views/volumes/create/createvolume.html
@@ -33,10 +33,7 @@
             <div class="col-sm-12" style="margin-top: 5px">
               <label class="control-label text-left">
                 Driver options
-                <portainer-tooltip
-                  position="bottom"
-                  message="Driver options are specific to the selected driver. Please refer to the selected driver documentation."
-                ></portainer-tooltip>
+                <portainer-tooltip message="'Driver options are specific to the selected driver. Please refer to the selected driver documentation.'"></portainer-tooltip>
               </label>
               <span class="label label-default interactive" style="margin-left: 10px" ng-click="addDriverOption()">
                 <i class="fa fa-plus-circle" aria-hidden="true"></i> add driver option
diff --git a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
index 97fd2153e..e2c901228 100644
--- a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
+++ b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
@@ -89,7 +89,7 @@
     <div class="form-group" ng-if="$ctrl.formValues.IsSimple && entry.IsBinary">
       <label for="configuration_data_value_{{ index }}" class="col-sm-1 control-label text-left">Value</label>
       <div class="col-sm-11 control-label small text-muted text-left"
-        >Binary data <portainer-tooltip position="bottom" message="This key holds binary data and cannot be displayed."></portainer-tooltip
+        >Binary data <portainer-tooltip message="'This key holds binary data and cannot be displayed.'"></portainer-tooltip
       ></div>
     </div>
 
diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html
index 4f4c9d324..96892513f 100644
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/app/kubernetes/views/applications/create/createApplication.html
@@ -769,8 +769,7 @@
                     <label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px">
                       Memory
                       <portainer-tooltip
-                        position="bottom"
-                        message="An instance of this application will reserve this amount of memory. If the instance memory usage exceeds the reservation, it might be subject to OOM."
+                        message="'An instance of this application will reserve this amount of memory. If the instance memory usage exceeds the reservation, it might be subject to OOM.'"
                       >
                       </portainer-tooltip>
                     </label>
@@ -815,8 +814,7 @@
                     <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px">
                       CPU
                       <portainer-tooltip
-                        position="bottom"
-                        message="An instance of this application will reserve this amount of CPU. If the instance CPU usage exceeds the reservation, it might be subject to CPU throttling."
+                        message="'An instance of this application will reserve this amount of CPU. If the instance CPU usage exceeds the reservation, it might be subject to CPU throttling.'"
                       >
                       </portainer-tooltip>
                     </label>
@@ -995,10 +993,7 @@
                           <td style="width: 33%; border: none; padding: 2px 0 2px 0">Maximum instances</td>
                           <td style="width: 33%; border: none; padding: 2px 0 2px 0">
                             Target CPU usage (<b>%</b>)
-                            <portainer-tooltip
-                              position="bottom"
-                              message="The autoscaler will ensure enough instances are running to maintain an average CPU usage across all instances."
-                            >
+                            <portainer-tooltip message="'The autoscaler will ensure enough instances are running to maintain an average CPU usage across all instances.'">
                             </portainer-tooltip>
                           </td>
                         </tr>
diff --git a/app/kubernetes/views/applications/edit/application.html b/app/kubernetes/views/applications/edit/application.html
index 3f06e935a..6fc0204e1 100644
--- a/app/kubernetes/views/applications/edit/application.html
+++ b/app/kubernetes/views/applications/edit/application.html
@@ -300,7 +300,7 @@
                     <td style="width: 33%">Maximum instances</td>
                     <td style="width: 33%">
                       Target CPU usage
-                      <portainer-tooltip position="bottom" message="The autoscaler will ensure enough instances are running to maintain an average CPU usage across all instances.">
+                      <portainer-tooltip message="'The autoscaler will ensure enough instances are running to maintain an average CPU usage across all instances.'">
                       </portainer-tooltip>
                     </td>
                   </tr>
@@ -422,7 +422,7 @@
             <div class="small text-muted" style="margin-bottom: 15px">
               Data access policy: <i class="fa {{ ctrl.application.DataAccessPolicy | kubernetesApplicationDataAccessPolicyIcon }}" aria-hidden="true"></i>
               {{ ctrl.application.DataAccessPolicy | kubernetesApplicationDataAccessPolicyText }}
-              <portainer-tooltip position="right" message="{{ ctrl.application.DataAccessPolicy | kubernetesApplicationDataAccessPolicyTooltip }}"> </portainer-tooltip>
+              <portainer-tooltip position="'right'" message="ctrl.application.DataAccessPolicy | kubernetesApplicationDataAccessPolicyTooltip"> </portainer-tooltip>
             </div>
 
             <table class="table" ng-if="ctrl.application.DataAccessPolicy === ctrl.ApplicationDataAccessPolicies.SHARED">
diff --git a/app/kubernetes/views/applications/logs/logs.html b/app/kubernetes/views/applications/logs/logs.html
index bcb76a02a..076d14215 100644
--- a/app/kubernetes/views/applications/logs/logs.html
+++ b/app/kubernetes/views/applications/logs/logs.html
@@ -20,7 +20,7 @@
               <div class="col-sm-12">
                 <label class="control-label text-left">
                   Auto-refresh
-                  <portainer-tooltip position="bottom" message="Automatically refresh logs every 5 seconds"></portainer-tooltip>
+                  <portainer-tooltip message="'Automatically refresh logs every 5 seconds'"></portainer-tooltip>
                 </label>
                 <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="ctrl.state.autoRefresh" ng-change="ctrl.updateAutoRefresh()" /><i></i> </label>
               </div>
diff --git a/app/kubernetes/views/deploy/deploy.html b/app/kubernetes/views/deploy/deploy.html
index e3f7bec03..66bdf3121 100644
--- a/app/kubernetes/views/deploy/deploy.html
+++ b/app/kubernetes/views/deploy/deploy.html
@@ -28,10 +28,7 @@
                 <div class="form-group" ng-if="ctrl.formValues.Namespace">
                   <div class="col-sm-12">
                     <label for="toggle_logo" class="control-label text-left"> Use namespace(s) specified from manifest </label>
-                    <portainer-tooltip
-                      position="bottom"
-                      message="If you have defined namespaces in your deployment file turning this on will enforce the use of those only in the deployment"
-                    >
+                    <portainer-tooltip message="'If you have defined namespaces in your deployment file turning this on will enforce the use of those only in the deployment'">
                     </portainer-tooltip>
                     <label class="switch" style="margin-left: 20px"> <input type="checkbox" name="toggle_logo" ng-model="ctrl.formValues.namespace_toggle" /><i></i> </label>
                   </div>
diff --git a/app/kubernetes/views/resource-pools/create/createResourcePool.html b/app/kubernetes/views/resource-pools/create/createResourcePool.html
index 784e6fdba..e570dcb2e 100644
--- a/app/kubernetes/views/resource-pools/create/createResourcePool.html
+++ b/app/kubernetes/views/resource-pools/create/createResourcePool.html
@@ -218,8 +218,7 @@
                     <label class="control-label text-left">
                       Hostnames
                       <portainer-tooltip
-                        position="bottom"
-                        message="Hostnames associated to the ingress inside this namespace. Users will be able to expose and access their applications over the ingress via one of these hostname."
+                        message="'Hostnames associated to the ingress inside this namespace. Users will be able to expose and access their applications over the ingress via one of these hostname.'"
                       >
                       </portainer-tooltip>
                     </label>
@@ -297,8 +296,7 @@
                     <i class="fa fa-plus-circle" aria-hidden="true"></i> add annotation
                   </span>
                   <portainer-tooltip
-                    position="bottom"
-                    message="Use annotations to configure options for an ingress. Review Nginx or Traefik documentation to find the annotations supported by your choice of ingress type."
+                    message="'Use annotations to configure options for an ingress. Review Nginx or Traefik documentation to find the annotations supported by your choice of ingress type.'"
                   >
                   </portainer-tooltip>
                   <span
@@ -312,8 +310,7 @@
                   </span>
                   <portainer-tooltip
                     ng-if="ic.IngressClass.Type === $ctrl.IngressClassTypes.NGINX"
-                    position="bottom"
-                    message="When the exposed URLs for your applications differ from the specified paths in the ingress, use the rewrite target annotation to denote the path to redirect to."
+                    message="'When the exposed URLs for your applications differ from the specified paths in the ingress, use the rewrite target annotation to denote the path to redirect to.'"
                   >
                   </portainer-tooltip>
                   <span
@@ -327,8 +324,7 @@
                   </span>
                   <portainer-tooltip
                     ng-if="ic.IngressClass.Type === $ctrl.IngressClassTypes.NGINX"
-                    position="bottom"
-                    message="Enable use of regular expressions in ingress paths (set in the ingress details of an application). Use this along with rewrite-target to specify the regex capturing group to be replaced, e.g. path regex of ^/foo/(,*) and rewrite-target of /bar/$1 rewrites example.com/foo/account to example.com/bar/account."
+                    message="'Enable use of regular expressions in ingress paths (set in the ingress details of an application). Use this along with rewrite-target to specify the regex capturing group to be replaced, e.g. path regex of ^/foo/(,*) and rewrite-target of /bar/$1 rewrites example.com/foo/account to example.com/bar/account.'"
                   >
                   </portainer-tooltip>
                 </div>
diff --git a/app/kubernetes/views/resource-pools/edit/resourcePool.html b/app/kubernetes/views/resource-pools/edit/resourcePool.html
index 1ba864fbe..6830900e6 100644
--- a/app/kubernetes/views/resource-pools/edit/resourcePool.html
+++ b/app/kubernetes/views/resource-pools/edit/resourcePool.html
@@ -182,8 +182,7 @@
                         <label class="control-label text-left">
                           Hostnames
                           <portainer-tooltip
-                            position="bottom"
-                            message="Hostnames associated to the ingress inside this namespace. Users will be able to expose and access their applications over the ingress via one of these hostname."
+                            message="'Hostnames associated to the ingress inside this namespace. Users will be able to expose and access their applications over the ingress via one of these hostname.'"
                           >
                           </portainer-tooltip>
                         </label>
@@ -252,8 +251,7 @@
                         <i class="fa fa-plus-circle" aria-hidden="true"></i> add annotation
                       </span>
                       <portainer-tooltip
-                        position="bottom"
-                        message="Use annotations to configure options for an ingress. Review Nginx or Traefik documentation to find the annotations supported by your choice of ingress type."
+                        message="'Use annotations to configure options for an ingress. Review Nginx or Traefik documentation to find the annotations supported by your choice of ingress type.'"
                       >
                       </portainer-tooltip>
                       <span
@@ -266,8 +264,7 @@
                       </span>
                       <portainer-tooltip
                         ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
-                        position="bottom"
-                        message="When the exposed URLs for your applications differ from the specified paths in the ingress, use the rewrite target annotation to denote the path to redirect to."
+                        message="'When the exposed URLs for your applications differ from the specified paths in the ingress, use the rewrite target annotation to denote the path to redirect to.'"
                       >
                       </portainer-tooltip>
                       <span
@@ -280,8 +277,7 @@
                       </span>
                       <portainer-tooltip
                         ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
-                        position="bottom"
-                        message="Enable use of regular expressions in ingress paths (set in the ingress details of an application). Use this along with rewrite-target to specify the regex capturing group to be replaced, e.g. path regex of ^/foo/(,*) and rewrite-target of /bar/$1 rewrites example.com/foo/account to example.com/bar/account."
+                        message="'Enable use of regular expressions in ingress paths (set in the ingress details of an application). Use this along with rewrite-target to specify the regex capturing group to be replaced, e.g. path regex of ^/foo/(,*) and rewrite-target of /bar/$1 rewrites example.com/foo/account to example.com/bar/account.'"
                       >
                       </portainer-tooltip>
                     </div>
diff --git a/app/kubernetes/views/stacks/logs/logs.html b/app/kubernetes/views/stacks/logs/logs.html
index eaa3680d2..377e7bef4 100644
--- a/app/kubernetes/views/stacks/logs/logs.html
+++ b/app/kubernetes/views/stacks/logs/logs.html
@@ -18,7 +18,7 @@
               <div class="col-sm-12">
                 <label class="control-label text-left">
                   Auto-refresh
-                  <portainer-tooltip position="bottom" message="Automatically refresh logs every 30 seconds"></portainer-tooltip>
+                  <portainer-tooltip message="'Automatically refresh logs every 30 seconds'"></portainer-tooltip>
                 </label>
                 <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="ctrl.state.autoRefresh" ng-change="ctrl.updateAutoRefresh()" /><i></i> </label>
               </div>
diff --git a/app/kubernetes/views/volumes/edit/volume.html b/app/kubernetes/views/volumes/edit/volume.html
index 01dffd150..86af8fc3a 100644
--- a/app/kubernetes/views/volumes/edit/volume.html
+++ b/app/kubernetes/views/volumes/edit/volume.html
@@ -43,11 +43,7 @@
                       <td>Shared Access Policy</td>
                       <td data-cy="k8sVolDetail-volAccessPolicy"
                         >{{ ctrl.state.volumeSharedAccessPolicy }}
-                        <portainer-tooltip
-                          position="bottom"
-                          ng-if="ctrl.state.volumeSharedAccessPolicyTooltip"
-                          message="{{ ctrl.state.volumeSharedAccessPolicyTooltip }}"
-                        ></portainer-tooltip
+                        <portainer-tooltip ng-if="ctrl.state.volumeSharedAccessPolicyTooltip" message="ctrl.state.volumeSharedAccessPolicyTooltip"></portainer-tooltip
                       ></td>
                     </tr>
                     <tr>
diff --git a/app/portainer/access-control/AccessControlPanel/AccessControlPanelDetails.tsx b/app/portainer/access-control/AccessControlPanel/AccessControlPanelDetails.tsx
index dfe05384f..e9eb9b670 100644
--- a/app/portainer/access-control/AccessControlPanel/AccessControlPanelDetails.tsx
+++ b/app/portainer/access-control/AccessControlPanel/AccessControlPanelDetails.tsx
@@ -171,7 +171,7 @@ function InheritanceMessage({
       <td colSpan={2} aria-label="inheritance-message">
         <i className="fa fa-info-circle space-right" aria-hidden="true" />
         {children}
-        <Tooltip message={tooltip} position="bottom" />
+        <Tooltip message={tooltip} />
       </td>
     </tr>
   );
diff --git a/app/portainer/components/Tip/Tooltip/Tooltip.css b/app/portainer/components/Tip/Tooltip/Tooltip.css
deleted file mode 100644
index df94bcb49..000000000
--- a/app/portainer/components/Tip/Tooltip/Tooltip.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.tooltip.portainer-tooltip .tooltip-inner {
-  background-color: var(--bg-tooltip-color);
-  padding: 0.833em 1em;
-  color: var(--text-tooltip-color);
-  border: 1px solid var(--border-tooltip-color) !important;
-  border-radius: 10px;
-  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
-}
-
-.tooltip.portainer-tooltip .tooltip-arrow {
-  display: none;
-}
-
-.fa.tooltip-icon {
-  margin-left: 5px;
-  font-size: 1.3em;
-}
diff --git a/app/portainer/components/Tip/Tooltip/TooltipAngular.ts b/app/portainer/components/Tip/Tooltip/TooltipAngular.ts
deleted file mode 100644
index 8fe5c398a..000000000
--- a/app/portainer/components/Tip/Tooltip/TooltipAngular.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { IComponentOptions } from 'angular';
-import './Tooltip.css';
-
-export const TooltipAngular: IComponentOptions = {
-  bindings: {
-    message: '@',
-    position: '@',
-  },
-  template: `<span
-    class="interactive"
-    tooltip-append-to-body="true"
-    tooltip-placement="{{$ctrl.position}}"
-    tooltip-class="portainer-tooltip"
-    uib-tooltip="{{$ctrl.message}}"
-  >
-  <i
-  class="fa fa-question-circle blue-icon tooltip-icon"
-  aria-hidden="true"
-  ></i>
-  </span>`,
-};
diff --git a/app/portainer/components/Tip/Tooltip/index.ts b/app/portainer/components/Tip/Tooltip/index.ts
deleted file mode 100644
index 842b84132..000000000
--- a/app/portainer/components/Tip/Tooltip/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { TooltipAngular } from './TooltipAngular';
diff --git a/app/portainer/components/accessControlForm/porAccessControlForm.html b/app/portainer/components/accessControlForm/porAccessControlForm.html
index a775b5e11..dfce7c3ca 100644
--- a/app/portainer/components/accessControlForm/porAccessControlForm.html
+++ b/app/portainer/components/accessControlForm/porAccessControlForm.html
@@ -5,7 +5,7 @@
     <div class="col-sm-12">
       <label for="ownership" class="control-label text-left">
         Enable access control
-        <portainer-tooltip position="bottom" message="When enabled, you can restrict the access and management of this resource."></portainer-tooltip>
+        <portainer-tooltip message="'When enabled, you can restrict the access and management of this resource.'"></portainer-tooltip>
       </label>
       <label class="switch" style="margin-left: 20px">
         <input name="ownership" type="checkbox" ng-model="$ctrl.formData.AccessControlEnabled" /><i data-cy="portainer-accessMgmtToggle"></i>
@@ -73,13 +73,11 @@
         Authorized teams
         <portainer-tooltip
           ng-if="$ctrl.isAdmin && $ctrl.availableTeams.length > 0"
-          position="bottom"
-          message="You can select which teams(s) will be able to manage this resource."
+          message="'You can select which teams(s) will be able to manage this resource.'"
         ></portainer-tooltip>
         <portainer-tooltip
           ng-if="!$ctrl.isAdmin && $ctrl.availableTeams.length > 1"
-          position="bottom"
-          message="As you are a member of multiple teams, you can select which teams(s) will be able to manage this resource."
+          message="'As you are a member of multiple teams, you can select which teams(s) will be able to manage this resource.'"
         ></portainer-tooltip>
       </label>
       <span ng-if="$ctrl.isAdmin && $ctrl.availableTeams.length === 0" class="small text-muted" style="margin-left: 20px">
@@ -110,8 +108,7 @@
         Authorized users
         <portainer-tooltip
           ng-if="$ctrl.isAdmin && $ctrl.availableUsers.length > 0"
-          position="bottom"
-          message="You can select which user(s) will be able to manage this resource."
+          message="'You can select which user(s) will be able to manage this resource.'"
         ></portainer-tooltip>
       </label>
       <span ng-if="$ctrl.availableUsers.length === 0" class="small text-muted" style="margin-left: 20px">
diff --git a/app/portainer/components/endpointSecurity/porEndpointSecurity.html b/app/portainer/components/endpointSecurity/porEndpointSecurity.html
index 19c329a42..5acbc28dc 100644
--- a/app/portainer/components/endpointSecurity/porEndpointSecurity.html
+++ b/app/portainer/components/endpointSecurity/porEndpointSecurity.html
@@ -4,7 +4,7 @@
     <div class="col-sm-12">
       <label for="tls" class="control-label text-left">
         TLS
-        <portainer-tooltip position="bottom" message="Enable this option if you need to connect to the Docker environment with TLS."></portainer-tooltip>
+        <portainer-tooltip message="'Enable this option if you need to connect to the Docker environment with TLS.'"></portainer-tooltip>
       </label>
       <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.formData.TLS" /><i></i> </label>
     </div>
diff --git a/app/portainer/components/forms/git-form/git-form-auth-fieldset/git-form-auth-fieldset.html b/app/portainer/components/forms/git-form/git-form-auth-fieldset/git-form-auth-fieldset.html
index ebf53b1d3..0e5a341ee 100644
--- a/app/portainer/components/forms/git-form/git-form-auth-fieldset/git-form-auth-fieldset.html
+++ b/app/portainer/components/forms/git-form/git-form-auth-fieldset/git-form-auth-fieldset.html
@@ -31,7 +31,7 @@
   <div class="form-group">
     <label for="repository_password" class="control-label text-left inline-label">
       Personal Access Token
-      <portainer-tooltip position="bottom" message="Provide a personal access token or password"></portainer-tooltip>
+      <portainer-tooltip message="'Provide a personal access token or password'"></portainer-tooltip>
     </label>
     <div class="inline-input">
       <input
diff --git a/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html b/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
index 529ecfe0e..c8e05faf5 100644
--- a/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
+++ b/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
@@ -30,7 +30,7 @@
   <div class="form-group">
     <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
       Registry URL
-      <portainer-tooltip position="bottom" message="URL of an Amazon Elastic Container Registry, which contains an account id and region."></portainer-tooltip>
+      <portainer-tooltip message="'URL of an Amazon Elastic Container Registry, which contains an account id and region.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
       <input
@@ -58,7 +58,7 @@
     <div class="col-sm-12">
       <label class="control-label text-left">
         Authentication
-        <portainer-tooltip position="bottom" message="Enable this option if you need to specify credentials to connect to a private registry."></portainer-tooltip>
+        <portainer-tooltip message="'Enable this option if you need to specify credentials to connect to a private registry.'"></portainer-tooltip>
       </label>
       <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.model.Authentication" /><i></i> </label>
     </div>
diff --git a/app/portainer/components/forms/registry-form-azure/registry-form-azure.html b/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
index a3af38d7b..26f4bcc2b 100644
--- a/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
+++ b/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
@@ -20,7 +20,7 @@
   <div class="form-group">
     <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
       Registry URL
-      <portainer-tooltip position="bottom" message="URL of an Azure Container Registry. Any protocol will be stripped."></portainer-tooltip>
+      <portainer-tooltip message="'URL of an Azure Container Registry. Any protocol will be stripped.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_url" name="registry_url" ng-model="$ctrl.model.URL" placeholder="myproject.azurecr.io" required />
diff --git a/app/portainer/components/forms/registry-form-custom/registry-form-custom.html b/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
index 20c1205e8..e4bf84871 100644
--- a/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
+++ b/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
@@ -27,7 +27,7 @@
   <div class="form-group">
     <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
       Registry URL
-      <portainer-tooltip position="bottom" message="URL or IP address of a Docker registry. Any protocol and trailing slash will be stripped if present."></portainer-tooltip>
+      <portainer-tooltip message="'URL or IP address of a Docker registry. Any protocol and trailing slash will be stripped if present.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_url" name="registry_url" ng-model="$ctrl.model.URL" placeholder="10.0.0.10:5000 or myregistry.domain.tld" required />
@@ -46,7 +46,7 @@
     <div class="col-sm-12">
       <label for="registry_auth" class="control-label text-left">
         Authentication
-        <portainer-tooltip position="bottom" message="Enable this option if you need to specify credentials to connect to this registry."></portainer-tooltip>
+        <portainer-tooltip message="'Enable this option if you need to specify credentials to connect to this registry.'"></portainer-tooltip>
       </label>
       <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.model.Authentication" /><i></i> </label>
     </div>
diff --git a/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html b/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
index 820f84e80..a425c5f08 100644
--- a/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
+++ b/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
@@ -55,7 +55,7 @@
   <div class="form-group" ng-if="$ctrl.state.overrideConfiguration">
     <label for="instance_url" class="col-sm-3 col-lg-2 control-label text-left">
       Instance URL
-      <portainer-tooltip position="bottom" message="URL of Gitlab instance."></portainer-tooltip>
+      <portainer-tooltip message="'URL of Gitlab instance.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="instance_url" name="instance_url" ng-model="$ctrl.model.Gitlab.InstanceURL" placeholder="https://gitlab.com" required />
@@ -73,7 +73,7 @@
   <div class="form-group" ng-if="$ctrl.state.overrideConfiguration">
     <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
       Registry URL
-      <portainer-tooltip position="bottom" message="URL of Gitlab registry instance."></portainer-tooltip>
+      <portainer-tooltip message="'URL of Gitlab registry instance.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_url" name="registry_url" ng-model="$ctrl.model.URL" placeholder="https://registry.gitlab.com" required />
diff --git a/app/portainer/components/forms/registry-form-proget/registry-form-proget.html b/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
index ccc343c5d..64894c4fd 100644
--- a/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
+++ b/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
@@ -27,7 +27,7 @@
   <div class="form-group">
     <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
       Registry URL
-      <portainer-tooltip position="bottom" message="The URL of the ProGet registry including the Feed name"></portainer-tooltip>
+      <portainer-tooltip message="'The URL of the ProGet registry including the Feed name'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_url" name="registry_url" ng-model="$ctrl.model.URL" placeholder="proget.example.com/example-registry" required />
@@ -45,7 +45,7 @@
   <div class="form-group">
     <label for="registry_base_url" class="col-sm-3 col-lg-2 control-label text-left">
       Base URL
-      <portainer-tooltip position="bottom" message="The base URL of the ProGet registry"></portainer-tooltip>
+      <portainer-tooltip message="'The base URL of the ProGet registry'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_base_url" name="registry_base_url" ng-model="$ctrl.model.BaseURL" placeholder="proget.example.com" required />
diff --git a/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html b/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html
index 57a0a2beb..09b36756c 100644
--- a/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html
+++ b/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html
@@ -36,7 +36,7 @@
         <div ng-repeat="var in $ctrl.template.Env" ng-if="!var.preset || var.select" class="form-group">
           <label for="field_{{ $index }}" class="col-sm-2 control-label text-left">
             {{ var.label }}
-            <portainer-tooltip ng-if="var.description" position="bottom" message="{{ var.description }}"></portainer-tooltip>
+            <portainer-tooltip ng-if="var.description" message="var.description"></portainer-tooltip>
           </label>
           <div class="col-sm-10">
             <input type="text" class="form-control" ng-if="!var.select" ng-model="var.value" id="field_{{ $index }}" />
diff --git a/app/portainer/components/index.js b/app/portainer/components/index.js
index ed2840058..5938abdd0 100644
--- a/app/portainer/components/index.js
+++ b/app/portainer/components/index.js
@@ -7,13 +7,10 @@ import widgetModule from './widget';
 import { boxSelectorModule } from './BoxSelector';
 import { pageHeaderModule } from './PageHeader';
 
-import { TooltipAngular } from './Tip/Tooltip';
 import { beFeatureIndicator } from './BEFeatureIndicator';
 import { InformationPanelAngular } from './InformationPanel';
 
 export default angular
   .module('portainer.app.components', [pageHeaderModule, boxSelectorModule, widgetModule, gitFormModule, porAccessManagementModule, formComponentsModule])
   .component('informationPanel', InformationPanelAngular)
-
-  .component('portainerTooltip', TooltipAngular)
   .component('beFeatureIndicator', beFeatureIndicator).name;
diff --git a/app/portainer/oauth/components/oauth-settings/oauth-settings.html b/app/portainer/oauth/components/oauth-settings/oauth-settings.html
index dfb92022b..92f574b69 100644
--- a/app/portainer/oauth/components/oauth-settings/oauth-settings.html
+++ b/app/portainer/oauth/components/oauth-settings/oauth-settings.html
@@ -102,7 +102,7 @@
     <div class="form-group">
       <label class="col-sm-3 col-lg-2 control-label text-left">
         Claim name
-        <portainer-tooltip position="bottom" message="The OpenID Connect UserInfo Claim name that contains the team identifier the user belongs to."></portainer-tooltip>
+        <portainer-tooltip message="'The OpenID Connect UserInfo Claim name that contains the team identifier the user belongs to.'"></portainer-tooltip>
       </label>
       <div class="col-sm-9 col-lg-10">
         <div class="col-xs-11 col-lg-10">
@@ -168,7 +168,7 @@
   <div class="form-group" ng-if="$ctrl.state.provider == 'microsoft'">
     <label for="oauth_microsoft_tenant_id" class="col-sm-3 col-lg-2 control-label text-left">
       Tenant ID
-      <portainer-tooltip position="bottom" message="ID of the Azure Directory you wish to authenticate against. Also known as the Directory ID"></portainer-tooltip>
+      <portainer-tooltip message="'ID of the Azure Directory you wish to authenticate against. Also known as the Directory ID'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
       <input
@@ -190,7 +190,7 @@
   <div class="form-group">
     <label for="oauth_client_id" class="col-sm-3 col-lg-2 control-label text-left">
       {{ $ctrl.state.provider == 'microsoft' ? 'Application ID' : 'Client ID' }}
-      <portainer-tooltip position="bottom" message="Public identifier of the OAuth application"></portainer-tooltip>
+      <portainer-tooltip message="'Public identifier of the OAuth application'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
       <input
@@ -228,10 +228,7 @@
     <div class="form-group">
       <label for="oauth_authorization_uri" class="col-sm-3 col-lg-2 control-label text-left">
         Authorization URL
-        <portainer-tooltip
-          position="bottom"
-          message="URL used to authenticate against the OAuth provider. Will redirect the user to the OAuth provider login view"
-        ></portainer-tooltip>
+        <portainer-tooltip message="'URL used to authenticate against the OAuth provider. Will redirect the user to the OAuth provider login view'"></portainer-tooltip>
       </label>
       <div class="col-sm-9 col-lg-10">
         <input
@@ -249,7 +246,7 @@
     <div class="form-group">
       <label for="oauth_access_token_uri" class="col-sm-3 col-lg-2 control-label text-left">
         Access token URL
-        <portainer-tooltip position="bottom" message="URL used by Portainer to exchange a valid OAuth authentication code for an access token"></portainer-tooltip>
+        <portainer-tooltip message="'URL used by Portainer to exchange a valid OAuth authentication code for an access token'"></portainer-tooltip>
       </label>
       <div class="col-sm-9 col-lg-10">
         <input
@@ -267,7 +264,7 @@
     <div class="form-group">
       <label for="oauth_resource_uri" class="col-sm-3 col-lg-2 control-label text-left">
         Resource URL
-        <portainer-tooltip position="bottom" message="URL used by Portainer to retrieve information about the authenticated user"></portainer-tooltip>
+        <portainer-tooltip message="'URL used by Portainer to retrieve information about the authenticated user'"></portainer-tooltip>
       </label>
       <div class="col-sm-9 col-lg-10">
         <input
@@ -286,8 +283,7 @@
       <label for="oauth_redirect_uri" class="col-sm-3 col-lg-2 control-label text-left">
         Redirect URL
         <portainer-tooltip
-          position="bottom"
-          message="URL used by the OAuth provider to redirect the user after successful authentication. Should be set to your Portainer instance URL"
+          message="'URL used by the OAuth provider to redirect the user after successful authentication. Should be set to your Portainer instance URL'"
         ></portainer-tooltip>
       </label>
       <div class="col-sm-9 col-lg-10">
@@ -307,8 +303,7 @@
       <label for="oauth_logout_url" class="col-sm-3 col-lg-2 control-label text-left">
         Logout URL
         <portainer-tooltip
-          position="bottom"
-          message="URL used by Portainer to redirect the user to the OAuth provider in order to log the user out of the identity provider session."
+          message="'URL used by Portainer to redirect the user to the OAuth provider in order to log the user out of the identity provider session.'"
         ></portainer-tooltip>
       </label>
       <div class="col-sm-9 col-lg-10">
@@ -327,8 +322,7 @@
       <label for="oauth_user_identifier" class="col-sm-3 col-lg-2 control-label text-left">
         User identifier
         <portainer-tooltip
-          position="bottom"
-          message="Identifier that will be used by Portainer to create an account for the authenticated user. Retrieved from the resource server specified via the Resource URL field"
+          message="'Identifier that will be used by Portainer to create an account for the authenticated user. Retrieved from the resource server specified via the Resource URL field'"
         ></portainer-tooltip>
       </label>
       <div class="col-sm-9 col-lg-10">
@@ -348,8 +342,7 @@
       <label for="oauth_scopes" class="col-sm-3 col-lg-2 control-label text-left">
         Scopes
         <portainer-tooltip
-          position="bottom"
-          message="Scopes required by the OAuth provider to retrieve information about the authenticated user. Refer to your OAuth provider documentation for more information about this"
+          message="'Scopes required by the OAuth provider to retrieve information about the authenticated user. Refer to your OAuth provider documentation for more information about this'"
         ></portainer-tooltip>
       </label>
       <div class="col-sm-9 col-lg-10">
diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index dfe142fc4..94f7c411d 100644
--- a/app/portainer/react/components/index.ts
+++ b/app/portainer/react/components/index.ts
@@ -9,6 +9,7 @@ import { TagSelector } from '@@/TagSelector';
 import { Loading } from '@@/Widget/Loading';
 import { PasswordCheckHint } from '@@/PasswordCheckHint';
 import { ViewLoading } from '@@/ViewLoading';
+import { Tooltip } from '@@/Tip/Tooltip';
 
 import { fileUploadField } from './file-upload-field';
 import { switchField } from './switch-field';
@@ -20,6 +21,7 @@ export const componentsModule = angular
     'tagSelector',
     r2a(TagSelector, ['allowCreate', 'onChange', 'value'])
   )
+  .component('portainerTooltip', r2a(Tooltip, ['message', 'position']))
   .component('fileUploadField', fileUploadField)
   .component('porSwitchField', switchField)
   .component(
diff --git a/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html b/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
index 4da78df05..a0c80db03 100644
--- a/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
+++ b/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
@@ -70,7 +70,7 @@
   <div class="form-group">
     <label for="ldap_username" class="col-sm-3 control-label text-left">
       Service Account
-      <portainer-tooltip position="bottom" message="Account that will be used to search for users."></portainer-tooltip>
+      <portainer-tooltip message="'Account that will be used to search for users.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9">
       <input
@@ -89,7 +89,7 @@
   <div class="form-group">
     <label for="ldap_password" class="col-sm-3 control-label text-left">
       Service Account Password
-      <portainer-tooltip position="bottom" message="If you do not enter a password, Portainer will leave the current password unchanged."></portainer-tooltip>
+      <portainer-tooltip message="'If you do not enter a password, Portainer will leave the current password unchanged.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9">
       <input
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html b/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
index 20204a9e4..54b62f886 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
@@ -11,7 +11,7 @@
     <div class="form-group">
       <label for="ldap_admin_group_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
         Group Base DN
-        <portainer-tooltip position="bottom" message="The distinguished name of the element from which the LDAP server will search for groups."></portainer-tooltip>
+        <portainer-tooltip message="'The distinguished name of the element from which the LDAP server will search for groups.'"></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-4">
         <input
@@ -29,7 +29,7 @@
 
       <label for="ldap_admin_group_att_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
         Group Membership Attribute
-        <portainer-tooltip position="bottom" message="LDAP attribute which denotes the group membership."></portainer-tooltip>
+        <portainer-tooltip message="'LDAP attribute which denotes the group membership.'"></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-4">
         <input
@@ -48,7 +48,7 @@
     <div class="form-group">
       <label for="ldap_admin_group_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
         Group Filter
-        <portainer-tooltip position="bottom" message="The LDAP search filter used to select group elements, optional."></portainer-tooltip>
+        <portainer-tooltip message="'The LDAP search filter used to select group elements, optional.'"></portainer-tooltip>
       </label>
       <div ng-class="{ 'col-sm-7 col-md-9': $index, 'col-sm-8 col-md-10': !$index }">
         <input
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
index d1ca79dd7..be0a729a5 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
@@ -9,7 +9,7 @@
     <div class="form-group">
       <label for="ldap_group_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
         Group Base DN
-        <portainer-tooltip position="bottom" message="The distinguished name of the element from which the LDAP server will search for groups."></portainer-tooltip>
+        <portainer-tooltip message="'The distinguished name of the element from which the LDAP server will search for groups.'"></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-4">
         <input type="text" class="form-control" id="ldap_group_basedn_{{ $index }}" ng-model="config.GroupBaseDN" placeholder="dc=ldap,dc=domain,dc=tld" />
@@ -17,7 +17,7 @@
 
       <label for="ldap_group_att_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
         Group Membership Attribute
-        <portainer-tooltip position="bottom" message="LDAP attribute which denotes the group membership."></portainer-tooltip>
+        <portainer-tooltip message="'LDAP attribute which denotes the group membership.'"></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-4">
         <input type="text" class="form-control" id="ldap_group_att_{{ $index }}" ng-model="config.GroupAttribute" placeholder="member" />
@@ -26,7 +26,7 @@
     <div class="form-group">
       <label for="ldap_group_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
         Group Filter
-        <portainer-tooltip position="bottom" message="The LDAP search filter used to select group elements, optional."></portainer-tooltip>
+        <portainer-tooltip message="'The LDAP search filter used to select group elements, optional.'"></portainer-tooltip>
       </label>
       <div ng-class="{ 'col-sm-7 col-md-9': $index, 'col-sm-8 col-md-10': !$index }">
         <input type="text" class="form-control" id="ldap_group_filter_{{ $index }}" ng-model="config.GroupFilter" placeholder="(objectClass=account)" />
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
index 489a9a02d..ba7445ebd 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
@@ -9,7 +9,7 @@
     <div class="form-group">
       <label for="ldap_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
         Base DN
-        <portainer-tooltip position="bottom" message="The distinguished name of the element from which the LDAP server will search for users."></portainer-tooltip>
+        <portainer-tooltip message="'The distinguished name of the element from which the LDAP server will search for users.'"></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-4">
         <input type="text" class="form-control" id="ldap_basedn_{{ $index }}" ng-model="config.BaseDN" placeholder="dc=ldap,dc=domain,dc=tld" />
@@ -17,7 +17,7 @@
 
       <label for="ldap_username_att_{{ $index }}" class="col-sm-4 col-md-3 col-lg-2 control-label text-left">
         Username attribute
-        <portainer-tooltip position="bottom" message="LDAP attribute which denotes the username."></portainer-tooltip>
+        <portainer-tooltip message="'LDAP attribute which denotes the username.'"></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-3 col-lg-4">
         <input type="text" class="form-control" id="ldap_username_att_{{ $index }}" ng-model="config.UserNameAttribute" placeholder="uid" />
@@ -26,7 +26,7 @@
     <div class="form-group">
       <label for="ldap_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
         Filter
-        <portainer-tooltip position="bottom" message="The LDAP search filter used to select user elements, optional."></portainer-tooltip>
+        <portainer-tooltip message="'The LDAP search filter used to select user elements, optional.'"></portainer-tooltip>
       </label>
       <div ng-class="{ 'col-sm-7 col-md-9': $index, 'col-sm-8 col-md-10': !$index }">
         <input type="text" class="form-control" id="ldap_filter_{{ $index }}" ng-model="config.Filter" placeholder="(objectClass=account)" />
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html b/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
index 1b7cbdc2b..e56a70bb1 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
@@ -44,7 +44,7 @@
 <div class="form-group">
   <label for="anonymous_mode" class="control-label text-left col-sm-3 col-lg-2">
     Anonymous mode
-    <portainer-tooltip position="bottom" message="Enable this option if the server is configured for Anonymous access."></portainer-tooltip>
+    <portainer-tooltip message="'Enable this option if the server is configured for Anonymous access.'"></portainer-tooltip>
   </label>
   <div class="col-sm-9 col-lg-10">
     <label class="switch">
@@ -58,7 +58,7 @@
   <div class="form-group">
     <label for="ldap_username" class="col-sm-3 col-lg-2 control-label text-left">
       Reader DN
-      <portainer-tooltip position="bottom" message="Account that will be used to search for users."></portainer-tooltip>
+      <portainer-tooltip message="'Account that will be used to search for users.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="ldap_username" ng-model="$ctrl.settings.ReaderDN" placeholder="cn=user,dc=domain,dc=tld" />
@@ -68,7 +68,7 @@
   <div class="form-group">
     <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left">
       Password
-      <portainer-tooltip position="bottom" message="If you do not enter a password, Portainer will leave the current password unchanged."></portainer-tooltip>
+      <portainer-tooltip message="'If you do not enter a password, Portainer will leave the current password unchanged.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
       <input type="password" class="form-control" id="ldap_password" ng-model="$ctrl.settings.Password" placeholder="password" autocomplete="new-password" />
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
index 0490f811f..169bd6760 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
@@ -64,7 +64,7 @@
     <div class="col-sm-12">
       <label for="anonymous_mode" class="control-label text-left">
         Anonymous mode
-        <portainer-tooltip position="bottom" message="Enable this option if the server is configured for Anonymous access."></portainer-tooltip>
+        <portainer-tooltip message="'Enable this option if the server is configured for Anonymous access.'"></portainer-tooltip>
       </label>
 
       <label class="switch" style="margin-left: 20px">
@@ -84,7 +84,7 @@
     <div class="form-group">
       <label for="ldap_username" class="col-sm-3 col-lg-2 control-label text-left">
         Reader DN
-        <portainer-tooltip position="bottom" message="Account that will be used to search for users."></portainer-tooltip>
+        <portainer-tooltip message="'Account that will be used to search for users.'"></portainer-tooltip>
       </label>
       <div class="col-sm-9 col-lg-10">
         <input
@@ -103,7 +103,7 @@
     <div class="form-group">
       <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left">
         Password
-        <portainer-tooltip position="bottom" message="If you do not enter a password, Portainer will leave the current password unchanged."></portainer-tooltip>
+        <portainer-tooltip message="'If you do not enter a password, Portainer will leave the current password unchanged.'"></portainer-tooltip>
       </label>
       <div class="col-sm-9">
         <input
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html b/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html
index 44b38954a..bf58b4f03 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html
@@ -6,10 +6,7 @@
 <div class="form-group" ng-if="!$ctrl.settings.TLSConfig.TLS">
   <label for="tls" class="control-label col-sm-3 text-left" style="padding-top: 0">
     Use StartTLS
-    <portainer-tooltip
-      position="bottom"
-      message="Enable this option if want to use StartTLS to secure the connection to the server. Ignored if Use TLS is selected."
-    ></portainer-tooltip>
+    <portainer-tooltip message="'Enable this option if want to use StartTLS to secure the connection to the server. Ignored if Use TLS is selected.'"></portainer-tooltip>
   </label>
   <div class="col-sm-9">
     <label class="switch">
@@ -23,7 +20,7 @@
 <div class="form-group" ng-if="!$ctrl.settings.StartTLS">
   <label for="tls" class="control-label col-sm-3 text-left" style="padding-top: 0">
     Use TLS
-    <portainer-tooltip position="bottom" message="Enable this option if you need to specify TLS certificates to connect to the LDAP server."></portainer-tooltip>
+    <portainer-tooltip message="'Enable this option if you need to specify TLS certificates to connect to the LDAP server.'"></portainer-tooltip>
   </label>
   <div class="col-sm-9">
     <label class="switch">
@@ -37,7 +34,7 @@
 <div class="form-group">
   <label for="tls" class="control-label col-sm-3 text-left" style="padding-top: 0">
     Skip verification of server certificate
-    <portainer-tooltip position="bottom" message="Skip the verification of the server TLS certificate. Not recommended on unsecured networks."></portainer-tooltip>
+    <portainer-tooltip message="'Skip the verification of the server TLS certificate. Not recommended on unsecured networks.'"></portainer-tooltip>
   </label>
   <div class="col-sm-9">
     <label class="switch">
diff --git a/app/portainer/views/devices/import/importDevice.html b/app/portainer/views/devices/import/importDevice.html
index 3f5ed7a2b..9c01c023e 100644
--- a/app/portainer/views/devices/import/importDevice.html
+++ b/app/portainer/views/devices/import/importDevice.html
@@ -126,7 +126,7 @@
             <div class="form-group">
               <label for="endpoint_url" class="col-sm-3 col-lg-2 control-label text-left">
                 Portainer server URL
-                <portainer-tooltip position="bottom" message="URL of the Portainer instance that the agent will use to initiate the communications."></portainer-tooltip>
+                <portainer-tooltip message="'URL of the Portainer instance that the agent will use to initiate the communications.'"></portainer-tooltip>
               </label>
               <div class="col-sm-9 col-lg-10">
                 <input
diff --git a/app/portainer/views/endpoints/create/createendpoint.html b/app/portainer/views/endpoints/create/createendpoint.html
index ca57c0503..de293f201 100644
--- a/app/portainer/views/endpoints/create/createendpoint.html
+++ b/app/portainer/views/endpoints/create/createendpoint.html
@@ -220,7 +220,7 @@
               <div class="form-group">
                 <label for="socket_path" class="col-sm-3 col-lg-2 control-label text-left">
                   Socket path
-                  <portainer-tooltip position="bottom" message="Path to the Docker socket. Remember to bind-mount the socket, see the important notice above for more information.">
+                  <portainer-tooltip message="'Path to the Docker socket. Remember to bind-mount the socket, see the important notice above for more information.'">
                   </portainer-tooltip>
                 </label>
                 <div class="col-sm-9 col-lg-10">
@@ -251,8 +251,7 @@
               <label for="endpoint_url" class="col-sm-3 col-lg-2 control-label text-left">
                 Environment URL
                 <portainer-tooltip
-                  position="bottom"
-                  message="URL or IP address of a Docker host. The Docker API must be exposed over a TCP port. Please refer to the Docker documentation to configure it."
+                  message="'URL or IP address of a Docker host. The Docker API must be exposed over a TCP port. Please refer to the Docker documentation to configure it.'"
                 >
                 </portainer-tooltip>
               </label>
@@ -293,7 +292,7 @@
             <div class="form-group">
               <label for="endpoint_url" class="col-sm-3 col-lg-2 control-label text-left">
                 Portainer server URL
-                <portainer-tooltip position="bottom" message="URL of the Portainer instance that the agent will use to initiate the communications."></portainer-tooltip>
+                <portainer-tooltip message="'URL of the Portainer instance that the agent will use to initiate the communications.'"></portainer-tooltip>
               </label>
               <div class="col-sm-9 col-lg-10">
                 <input
@@ -326,10 +325,7 @@
             <div class="form-group">
               <label for="endpoint_public_url" class="col-sm-3 col-lg-2 control-label text-left">
                 Public IP
-                <portainer-tooltip
-                  position="bottom"
-                  message="URL or IP address where exposed containers will be reachable. This field is optional and will default to the environment URL."
-                >
+                <portainer-tooltip message="'URL or IP address where exposed containers will be reachable. This field is optional and will default to the environment URL.'">
                 </portainer-tooltip>
               </label>
               <div class="col-sm-9 col-lg-10">
diff --git a/app/portainer/views/endpoints/edit/endpoint.html b/app/portainer/views/endpoints/edit/endpoint.html
index cdb28969d..bf113e31b 100644
--- a/app/portainer/views/endpoints/edit/endpoint.html
+++ b/app/portainer/views/endpoints/edit/endpoint.html
@@ -112,8 +112,7 @@
             <label for="endpoint_url" class="col-sm-3 col-lg-2 control-label text-left">
               Environment URL
               <portainer-tooltip
-                position="bottom"
-                message="URL or IP address of a Docker host. The Docker API must be exposed over a TCP port. Please refer to the Docker documentation to configure it."
+                message="'URL or IP address of a Docker host. The Docker API must be exposed over a TCP port. Please refer to the Docker documentation to configure it.'"
               >
               </portainer-tooltip>
             </label>
@@ -133,10 +132,7 @@
           <div class="form-group" ng-if="!state.azureEndpoint">
             <label for="endpoint_public_url" class="col-sm-3 col-lg-2 control-label text-left">
               Public IP
-              <portainer-tooltip
-                position="bottom"
-                message="URL or IP address where exposed containers will be reachable. This field is optional and will default to the environment URL."
-              >
+              <portainer-tooltip message="'URL or IP address where exposed containers will be reachable. This field is optional and will default to the environment URL.'">
               </portainer-tooltip>
             </label>
             <div class="col-sm-9 col-lg-10">
diff --git a/app/portainer/views/init/admin/initAdmin.html b/app/portainer/views/init/admin/initAdmin.html
index 6f29b58a7..b3af742ac 100644
--- a/app/portainer/views/init/admin/initAdmin.html
+++ b/app/portainer/views/init/admin/initAdmin.html
@@ -188,8 +188,7 @@
               <label for="password" class="col-sm-3 control-label text-left">
                 Password
                 <portainer-tooltip
-                  position="bottom"
-                  message="If the backup is password protected, provide the password in order to extract the backup file, otherwise this field can be left empty."
+                  message="'If the backup is password protected, provide the password in order to extract the backup file, otherwise this field can be left empty.'"
                 ></portainer-tooltip>
               </label>
               <div class="col-sm-4">
diff --git a/app/portainer/views/init/endpoint/includes/agent.html b/app/portainer/views/init/endpoint/includes/agent.html
index 61984073e..e6b463eac 100644
--- a/app/portainer/views/init/endpoint/includes/agent.html
+++ b/app/portainer/views/init/endpoint/includes/agent.html
@@ -19,7 +19,7 @@
 <div class="form-group">
   <label for="endpoint_url" class="col-sm-4 col-lg-3 control-label text-left">
     Agent URL
-    <portainer-tooltip position="bottom" message="URL or IP address of a Portainer agent."> </portainer-tooltip>
+    <portainer-tooltip message="'URL or IP address of a Portainer agent.'"> </portainer-tooltip>
   </label>
   <div class="col-sm-8 col-lg-9">
     <input type="text" class="form-control" id="endpoint_url" ng-model="ctrl.formValues.URL" placeholder="e.g. 10.0.0.10:9001" />
diff --git a/app/portainer/views/registries/edit/registry.html b/app/portainer/views/registries/edit/registry.html
index 13c608c90..2250234e5 100644
--- a/app/portainer/views/registries/edit/registry.html
+++ b/app/portainer/views/registries/edit/registry.html
@@ -29,8 +29,7 @@
           <div class="form-group" ng-if="registry.Type !== RegistryTypes.DOCKERHUB && registry.Type !== RegistryTypes.QUAY && registry.Type !== RegistryTypes.GITLAB">
             <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
               Registry URL
-              <portainer-tooltip position="bottom" message="URL or IP address of a Docker registry. Any protocol or trailing slash will be stripped if present.">
-              </portainer-tooltip>
+              <portainer-tooltip message="'URL or IP address of a Docker registry. Any protocol or trailing slash will be stripped if present.'"> </portainer-tooltip>
             </label>
             <div class="col-sm-9 col-lg-10">
               <input type="text" class="form-control" id="registry_url" ng-model="$ctrl.registry.URL" placeholder="e.g. 10.0.0.10:5000 or myregistry.domain.tld" />
@@ -51,7 +50,7 @@
             <div class="col-sm-12">
               <label for="registry_auth" class="control-label text-left">
                 Authentication
-                <portainer-tooltip position="bottom" message="Enable this option if you need to specify credentials to connect to this registry."> </portainer-tooltip>
+                <portainer-tooltip message="'Enable this option if you need to specify credentials to connect to this registry.'"> </portainer-tooltip>
               </label>
               <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.registry.Authentication" /><i></i> </label>
             </div>
diff --git a/app/portainer/views/settings/authentication/settingsAuthentication.html b/app/portainer/views/settings/authentication/settingsAuthentication.html
index c77f13b6d..2e12f0c80 100644
--- a/app/portainer/views/settings/authentication/settingsAuthentication.html
+++ b/app/portainer/views/settings/authentication/settingsAuthentication.html
@@ -10,7 +10,7 @@
           <div class="form-group">
             <label for="user_timeout" class="col-sm-2 control-label text-left">
               Session lifetime
-              <portainer-tooltip message="Time before users are forced to relogin." position="bottom"></portainer-tooltip>
+              <portainer-tooltip message="'Time before users are forced to relogin.'"></portainer-tooltip>
             </label>
             <div class="col-sm-10">
               <select
diff --git a/app/portainer/views/stacks/create/createstack.html b/app/portainer/views/stacks/create/createstack.html
index e0c8655d7..08fd75ba4 100644
--- a/app/portainer/views/stacks/create/createstack.html
+++ b/app/portainer/views/stacks/create/createstack.html
@@ -165,8 +165,8 @@
                 <label class="control-label text-left">
                   Create a Stack webhook
                   <portainer-tooltip
-                    position="top"
-                    message="Create a webhook (or callback URI) to automate the update of this stack. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this stack."
+                    position="'top'"
+                    message="'Create a webhook (or callback URI) to automate the update of this stack. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this stack.'"
                   ></portainer-tooltip>
                 </label>
                 <label class="switch box-selector-item limited business" style="margin-left: 20px">
diff --git a/app/portainer/views/stacks/edit/stack.html b/app/portainer/views/stacks/edit/stack.html
index 340dd7887..fba1589ab 100644
--- a/app/portainer/views/stacks/edit/stack.html
+++ b/app/portainer/views/stacks/edit/stack.html
@@ -168,8 +168,8 @@
                     <label class="control-label text-left">
                       Create a Stack webhook
                       <portainer-tooltip
-                        position="top"
-                        message="Create a webhook (or callback URI) to automate the update of this stack. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this stack."
+                        position="'top'"
+                        message="'Create a webhook (or callback URI) to automate the update of this stack. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this stack.'"
                       ></portainer-tooltip>
                     </label>
                     <label class="switch box-selector-item limited business" style="margin-left: 20px">
@@ -196,7 +196,7 @@
                   <div class="col-sm-12">
                     <label for="prune" class="control-label text-left">
                       Prune services
-                      <portainer-tooltip position="bottom" message="Prune services that are no longer referenced."></portainer-tooltip>
+                      <portainer-tooltip message="'Prune services that are no longer referenced.'"></portainer-tooltip>
                     </label>
                     <label class="switch" style="margin-left: 20px"> <input name="prune" type="checkbox" ng-model="formValues.Prune" /><i></i> </label>
                   </div>
diff --git a/app/portainer/views/templates/templates.html b/app/portainer/views/templates/templates.html
index 3f0db1c7a..f9cf89495 100644
--- a/app/portainer/views/templates/templates.html
+++ b/app/portainer/views/templates/templates.html
@@ -51,7 +51,7 @@
           <div ng-repeat="var in state.selectedTemplate.Env" ng-if="!var.preset || var.select" class="form-group">
             <label for="field_{{ $index }}" class="col-sm-2 control-label text-left">
               {{ var.label }}
-              <portainer-tooltip ng-if="var.description" position="bottom" message="{{ var.description }}"></portainer-tooltip>
+              <portainer-tooltip ng-if="var.description" message="var.description"></portainer-tooltip>
             </label>
             <div class="col-sm-10">
               <input type="text" class="form-control" ng-if="!var.select" ng-model="var.value" id="field_{{ $index }}" />
diff --git a/app/portainer/views/users/edit/user.html b/app/portainer/views/users/edit/user.html
index 5aa0a599a..2332c2ab3 100644
--- a/app/portainer/views/users/edit/user.html
+++ b/app/portainer/views/users/edit/user.html
@@ -23,8 +23,7 @@
               <label for="permissions" class="control-label text-left">
                 Administrator
                 <portainer-tooltip
-                  position="bottom"
-                  message="Administrators have access to Portainer settings management as well as full control over all defined environments and their resources."
+                  message="'Administrators have access to Portainer settings management as well as full control over all defined environments and their resources.'"
                 ></portainer-tooltip>
               </label>
               <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="formValues.Administrator" /><i></i> </label>
diff --git a/app/portainer/views/users/users.html b/app/portainer/views/users/users.html
index f9fe352be..cc79f4e18 100644
--- a/app/portainer/views/users/users.html
+++ b/app/portainer/views/users/users.html
@@ -17,11 +17,7 @@
           <div class="form-group">
             <label for="username" class="col-sm-3 col-lg-2 control-label text-left">
               Username
-              <portainer-tooltip
-                ng-if="AuthenticationMethod === 2"
-                position="bottom"
-                message="Username must exactly match username defined in external LDAP source."
-              ></portainer-tooltip>
+              <portainer-tooltip ng-if="AuthenticationMethod === 2" message="'Username must exactly match username defined in external LDAP source.'"></portainer-tooltip>
             </label>
             <div class="col-sm-8">
               <div class="input-group">
@@ -94,8 +90,7 @@
               <label for="permissions" class="control-label text-left">
                 Administrator
                 <portainer-tooltip
-                  position="bottom"
-                  message="Administrators have access to Portainer settings management as well as full control over all defined environments and their resources."
+                  message="'Administrators have access to Portainer settings management as well as full control over all defined environments and their resources.'"
                 ></portainer-tooltip>
               </label>
               <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="formValues.Administrator" data-cy="user-adminCheckbox" /><i></i> </label>
diff --git a/app/react/components/PageHeader/HeaderTitle.tsx b/app/react/components/PageHeader/HeaderTitle.tsx
index 6f3106f00..742083b09 100644
--- a/app/react/components/PageHeader/HeaderTitle.tsx
+++ b/app/react/components/PageHeader/HeaderTitle.tsx
@@ -27,7 +27,12 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
       {title}
       <span className="header_title_content">{children}</span>
       <Menu>
-        <MenuButton className={clsx('pull-right', styles.menuButton)}>
+        <MenuButton
+          className={clsx(
+            'pull-right flex items-center gap-1',
+            styles.menuButton
+          )}
+        >
           <User className="icon-nested-gray" />
           {user && <span>{user.Username}</span>}
           <ChevronDown className={styles.arrowDown} />
diff --git a/app/react/components/Tip/Tooltip/Tooltip.module.css b/app/react/components/Tip/Tooltip/Tooltip.module.css
index bb45fde1e..ad658d442 100644
--- a/app/react/components/Tip/Tooltip/Tooltip.module.css
+++ b/app/react/components/Tip/Tooltip/Tooltip.module.css
@@ -1,3 +1,7 @@
+:global(portainer-tooltip) {
+  @apply inline-flex;
+}
+
 .tooltip-wrapper {
   display: inline-block;
   position: relative;
diff --git a/app/react/components/Tip/Tooltip/Tooltip.tsx b/app/react/components/Tip/Tooltip/Tooltip.tsx
index 56a03c6ec..c185065d0 100644
--- a/app/react/components/Tip/Tooltip/Tooltip.tsx
+++ b/app/react/components/Tip/Tooltip/Tooltip.tsx
@@ -1,20 +1,29 @@
 import ReactTooltip from 'react-tooltip';
 import { HelpCircle } from 'react-feather';
+import clsx from 'clsx';
+import _ from 'lodash';
 
 import styles from './Tooltip.module.css';
 
-type Place = 'top' | 'right' | 'bottom' | 'left';
+type Position = 'top' | 'right' | 'bottom' | 'left';
 
 export interface Props {
-  position?: Place;
+  position?: Position;
   message: string;
 }
 
 export function Tooltip({ message, position = 'bottom' }: Props) {
+  const id = `tooltip-${_.uniqueId()}`;
+
   return (
-    <span data-tip={message} className={styles.icon}>
+    <span
+      data-tip={message}
+      data-for={id}
+      className={clsx(styles.icon, 'inline-flex text-base')}
+    >
       <HelpCircle className="feather" aria-hidden="true" />
       <ReactTooltip
+        id={id}
         multiline
         type="info"
         place={position}
diff --git a/app/react/components/form-components/SwitchField/SwitchField.tsx b/app/react/components/form-components/SwitchField/SwitchField.tsx
index 09ced61aa..3e5a0cbf2 100644
--- a/app/react/components/form-components/SwitchField/SwitchField.tsx
+++ b/app/react/components/form-components/SwitchField/SwitchField.tsx
@@ -43,7 +43,7 @@ export function SwitchField({
         )}
       >
         {label}
-        {tooltip && <Tooltip position="bottom" message={tooltip} />}
+        {tooltip && <Tooltip message={tooltip} />}
       </span>
       <Switch
         className="space-right"