diff --git a/src/app/components/toggle/toggle.component.html b/src/app/components/toggle/toggle.component.html
index 05cc38244c69c2d717b6420ece2cc8b7585cc4dd..a018217905c37a54f384a0caaa0bc534489d8f11 100644
--- a/src/app/components/toggle/toggle.component.html
+++ b/src/app/components/toggle/toggle.component.html
@@ -38,7 +38,7 @@
 <button
   class="button is-rounded has-tooltip"
   [pTooltip]="tooltipOff"
-  [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+  [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
   tooltipPosition="left"
   (click)="toggle()"
   [ngClass]="{
diff --git a/src/index.html b/src/index.html
index 929432859c1069c609ff0615a13c5ff10f9bd5db..fc462d609ad9c731cae2c8202896eec8d9a2d39d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -41,7 +41,7 @@
 
 <button onclick="setNetwork('netexp1')">Add nodes</button>
 
-<div >
+<div style="max-width: 80vw">
 
   <drugst-one id="netexp1"
                     pluginId="2"
diff --git a/src/stylesheets/primeng.scss b/src/stylesheets/primeng.scss
index a2720aedd71bb47214fc378f01a400309a06d160..5af1000fe9feb4d3a1ff7f6783cf9348c4ac4c5a 100644
--- a/src/stylesheets/primeng.scss
+++ b/src/stylesheets/primeng.scss
@@ -1,10 +1,60 @@
 @import '../stylesheets/icons';
+
 .drgstn-tooltip {
   position: absolute !important;
   padding: .25em .5rem !important;
   max-width: 12.5rem !important;
 }
 
+.drgstn-tooltip-top {
+  .p-tooltip-text:before {
+    width: 0;
+    left: 50%;
+    bottom: +7px;
+    border: 6px solid transparent;
+    border-top: 6px solid var(--drgstn-tooltip);
+    border-bottom: 0;
+    transform: translate(-50%, calc(100% + 3px));
+
+  }
+}
+
+.drgstn-tooltip-bottom {
+  .p-tooltip-text:before {
+    width: 0;
+    left: 50%;
+    top: +3px;
+    border: 6px solid transparent;
+    border-bottom: 6px solid var(--drgstn-tooltip);
+    border-top: 0;
+    transform: translate(-50%, -5px);
+  }
+}
+
+.drgstn-tooltip-left {
+  .p-tooltip-text:before {
+    height: 0;
+    top: 50%;
+    right: +7px;
+    border: 6px solid transparent;
+    border-left: 6px solid var(--drgstn-tooltip);
+    border-right: 0;
+    transform: translate(calc(100% - 1px),-50% );
+  }
+}
+
+.drgstn-tooltip-right {
+  .p-tooltip-text:before {
+    height: 0;
+    top: 50%;
+    left: +7px;
+    border: 6px solid transparent;
+    border-right: 6px solid var(--drgstn-tooltip);
+    border-left: 0;
+    transform: translate(-5px,-50% );
+  }
+}
+
 .drgstn {
   @import '../assets/styles/primeicons';
   @import '../assets/styles/theme';
@@ -23,7 +73,7 @@
     border-radius: 4px !important;
     padding: .5rem 1rem .5rem 1rem !important;
     color: var(--drgstn-text-secondary) !important;
-    font-family: Roboto,Helvetica Neue,sans-serif !important;
+    font-family: Roboto, Helvetica Neue, sans-serif !important;
     font-size: .75rem !important;
   }
 
@@ -31,13 +81,6 @@
     content: '';
     position: absolute;
     display: block;
-    width: 0;
-    left: 50%;
-    bottom: +7px;
-    border: 6px solid transparent;
-    border-bottom: 0;
-    border-top: 6px solid var(--drgstn-tooltip);
-    transform: translate(-50%, calc(100% + 3px));
   }
 
   .p-checkbox .p-checkbox-box {