diff --git a/webui/src/components/_commons/PanelMiddlewares.vue b/webui/src/components/_commons/PanelMiddlewares.vue
index daab41a76..266a12f16 100644
--- a/webui/src/components/_commons/PanelMiddlewares.vue
+++ b/webui/src/components/_commons/PanelMiddlewares.vue
@@ -231,8 +231,9 @@
               <div class="text-subtitle2">Service</div>
               <q-chip
                 dense
-                class="app-chip app-chip-green">
+                class="app-chip app-chip-green app-chip-overflow">
                 {{ exData(middleware).service }}
+                <q-tooltip>{{ exData(middleware).service }}</q-tooltip>
               </q-chip>
             </div>
           </div>
diff --git a/webui/src/components/_commons/PanelMirroringServices.vue b/webui/src/components/_commons/PanelMirroringServices.vue
index f9b505408..09a613894 100644
--- a/webui/src/components/_commons/PanelMirroringServices.vue
+++ b/webui/src/components/_commons/PanelMirroringServices.vue
@@ -21,8 +21,9 @@
             <div class="col-6">
               <q-chip
                 dense
-                class="app-chip app-chip-rule">
+                class="app-chip app-chip-rule app-chip-overflow">
                 {{ service.name }}
+                <q-tooltip>{{service.name}}</q-tooltip>
               </q-chip>
             </div>
             <div class="col-3 text-right">
diff --git a/webui/src/components/_commons/PanelRouterDetails.vue b/webui/src/components/_commons/PanelRouterDetails.vue
index cb53987ce..26ddfc6f3 100644
--- a/webui/src/components/_commons/PanelRouterDetails.vue
+++ b/webui/src/components/_commons/PanelRouterDetails.vue
@@ -66,8 +66,9 @@
               dense
               clickable
               @click.native="$router.push({ path: `/${protocol}/services/${getServiceId()}`})"
-              class="app-chip app-chip-wrap app-chip-service">
+              class="app-chip app-chip-wrap app-chip-service app-chip-overflow">
               {{ data.service }}
+              <q-tooltip>{{ data.service }}</q-tooltip>
             </q-chip>
           </div>
         </div>
diff --git a/webui/src/components/_commons/PanelWeightedServices.vue b/webui/src/components/_commons/PanelWeightedServices.vue
index 6cf5784c0..fb0ec582c 100644
--- a/webui/src/components/_commons/PanelWeightedServices.vue
+++ b/webui/src/components/_commons/PanelWeightedServices.vue
@@ -21,8 +21,9 @@
             <div class="col-7">
               <q-chip
                 dense
-                class="app-chip app-chip-rule">
+                class="app-chip app-chip-rule app-chip-overflow">
                 {{ service.name }}
+                <q-tooltip>{{service.name}}</q-tooltip>
               </q-chip>
             </div>
             <div class="col-3">
diff --git a/webui/src/css/sass/app.scss b/webui/src/css/sass/app.scss
index f9ab3e5a9..0bdc9ba3b 100644
--- a/webui/src/css/sass/app.scss
+++ b/webui/src/css/sass/app.scss
@@ -131,6 +131,16 @@ body {
       white-space: normal;
     }
   }
+  &-overflow {
+    max-width: 90%;
+
+    .q-chip__content{
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
   &-accent, &-rule {
     color: $accent;
     background-color: rgba($accent, 0.1);