move tooltip to admin.scss
This commit is contained in:
parent
6f00816efc
commit
2fe82678a5
@ -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
|
||||||
|
@ -189,7 +189,7 @@
|
|||||||
- display_comment = "#{line.comment[0..10]} (..)"
|
- display_comment = "#{line.comment[0..10]} (..)"
|
||||||
- else
|
- else
|
||||||
- display_comment = line.comment
|
- 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])}
|
%td.p-0{class: ("best-price" if line.id == best_price[0])}
|
||||||
=# "reponse price_line ID : #{line.id}"
|
=# "reponse price_line ID : #{line.id}"
|
||||||
@ -306,51 +306,7 @@
|
|||||||
color: orange;
|
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 {
|
.darkblue {
|
||||||
color: darkblue;
|
color: darkblue;
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user