From cc102e81f9fda698de99656882f70cbcb5524ad5 Mon Sep 17 00:00:00 2001
From: AndiMajore <andi.majore@googlemail.com>
Date: Mon, 20 Jun 2022 18:54:07 +0200
Subject: [PATCH] added tooltip direction classes
---
.../components/toggle/toggle.component.html | 2 +-
src/index.html | 2 +-
src/stylesheets/primeng.scss | 59 ++++++++++++++++---
3 files changed, 53 insertions(+), 10 deletions(-)
diff --git a/src/app/components/toggle/toggle.component.html b/src/app/components/toggle/toggle.component.html
index 05cc3824..a0182179 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 92943285..fc462d60 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 a2720aed..5af1000f 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 {
--
GitLab