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

added tooltip direction classes

parent a612e0c2
No related branches found
No related tags found
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