ami/tl-vikunja
1
0
Fork 0
Code Activity

Build custom v-tooltip (#290)

Browse Source 
Remove tooltips when their elements are unbound

Add support for .bottom modifier

Remove v-tooltip from dependencies

Add comments

Fix usage with bigger tooltips

Add very basic vanilla js tooltip

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/290
Co-Authored-By: konrad <konrad@kola-entertainments.de>
Co-Committed-By: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad
2020-11-10 20:47:39 +00:00
parent 70508202c0
commit 092e5165dc
6 changed files with 115 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/styles/components/base/tooltip.scss
View File

@ -3,22 +3,38 @@
z-index: 10000;
font-size: 0.8em;
text-align: center;
background: $dark;
color: white;
border-radius: 5px;
padding: 5px 10px 5px;
opacity: 0;
transition: opacity $transition;
.tooltip-inner {
background: $dark;
color: white;
border-radius: 5px;
padding: 5px 10px 5px;
}
// If the tooltip is multiline, it would make the height calculations needed to properly position it a lot harder.
white-space: nowrap;
overflow: hidden;
&-arrow {
opacity: 0;
content: '';
display: block;
position: absolute;
transition: opacity $transition;
z-index: 10000;
.tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: $dark;
z-index: 1;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid $dark;
&.bottom {
transform: rotate(180deg);
}
}
&.visible, &-arrow.visible {
opacity: 1;
}
&[x-placement^="top"] {