Skip to content
Snippets Groups Projects
Commit cc102e81 authored by AndiMajore's avatar AndiMajore
Browse files

added tooltip direction classes

parent a612e0c2
Branches
Tags
No related merge requests found
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<button <button
class="button is-rounded has-tooltip" class="button is-rounded has-tooltip"
[pTooltip]="tooltipOff" [pTooltip]="tooltipOff"
[tooltipStyleClass]="'drgstn drgstn-tooltip'" [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
tooltipPosition="left" tooltipPosition="left"
(click)="toggle()" (click)="toggle()"
[ngClass]="{ [ngClass]="{
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
<button onclick="setNetwork('netexp1')">Add nodes</button> <button onclick="setNetwork('netexp1')">Add nodes</button>
<div > <div style="max-width: 80vw">
<drugst-one id="netexp1" <drugst-one id="netexp1"
pluginId="2" pluginId="2"
......
@import '../stylesheets/icons'; @import '../stylesheets/icons';
.drgstn-tooltip { .drgstn-tooltip {
position: absolute !important; position: absolute !important;
padding: .25em .5rem !important; padding: .25em .5rem !important;
max-width: 12.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 { .drgstn {
@import '../assets/styles/primeicons'; @import '../assets/styles/primeicons';
@import '../assets/styles/theme'; @import '../assets/styles/theme';
...@@ -31,13 +81,6 @@ ...@@ -31,13 +81,6 @@
content: ''; content: '';
position: absolute; position: absolute;
display: block; 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 { .p-checkbox .p-checkbox-box {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment