move tooltip to admin.scss

This commit is contained in:
Barnabé 2021-09-10 12:54:45 +02:00
parent 6f00816efc
commit 2fe82678a5
2 changed files with 86 additions and 46 deletions

View File

@ -1782,4 +1782,88 @@ td{
}
// Fin
// Html5 Tooltip
.info {
color: #009bbf;
position: relative;
display: inline-block;
text-overflow: ellipsis;
.info-text-top {
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
max-width: 500px;
min-width: fit-content;
white-space: normal;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.info-text-top::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.info-text-bottom {
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
max-width: 500px;
min-width: fit-content;
white-space: normal;
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 125%;
left: 200%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.info-text-bottom::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent;
}
}
.info:hover {
.info-text-top {
visibility: visible;
opacity: 1;
}
.info-text-bottom {
visibility: visible;
opacity: 1;
}
}
// Fin

View File

@ -189,7 +189,7 @@
- display_comment = "#{line.comment[0..10]} (..)"
- else
- display_comment = line.comment
- cell << "<span class='info'>#{ic('info-circle')} #{display_comment}<span class='info-text'>#{line.comment}</span></span>"
- cell << "<span class='info'>#{ic('info-circle')} #{display_comment}<span class='info-text-top'>#{line.comment}</span></span>"
%td.p-0{class: ("best-price" if line.id == best_price[0])}
=# "reponse price_line ID : #{line.id}"
@ -306,51 +306,7 @@
color: orange;
}
.info {
color: #009bbf;
position: relative;
display: inline-block;
text-overflow: ellipsis;
.info-text {
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
max-width: 500px;
min-width: fit-content;
white-space: normal;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.info-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
}
.info:hover {
.info-text {
visibility: visible;
opacity: 1;
}
}
.darkblue {
color: darkblue;
}