|
|
@@ -25,16 +25,19 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+@arrow-height: 6px;
|
|
|
+@border-width: 1px;
|
|
|
+@extra-transform-y: 5px;
|
|
|
.tooltip-wrapper {
|
|
|
position: absolute;
|
|
|
// left: 50%;
|
|
|
- transform: translateX(-50%) translateY(calc(-100% - 6px - 2px));
|
|
|
+ transform: translateX(-50%) translateY(calc(-100% - @arrow-height - @border-width - @border-width - @extra-transform-y));
|
|
|
top: 0;
|
|
|
z-index: 10000;
|
|
|
display: none;
|
|
|
|
|
|
background: #191A1C;
|
|
|
- border: 1px solid rgba(151, 151, 151, 0.2);
|
|
|
+ border: @border-width solid rgba(151, 151, 151, 0.2);
|
|
|
border-radius: 3px;
|
|
|
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
|
|
|
padding: 8px 8px;
|
|
|
@@ -49,12 +52,12 @@ export default {
|
|
|
position: absolute;
|
|
|
// left: 50%;
|
|
|
transform: translateX(-50%) rotate(45deg);
|
|
|
- bottom: -6px;
|
|
|
+ bottom: -@arrow-height;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
- border: 1px solid transparent;
|
|
|
- border-right: 1px solid rgba(151, 151, 151, 0.2);
|
|
|
- border-bottom: 1px solid rgba(151, 151, 151, 0.2);
|
|
|
+ border: @border-width solid transparent;
|
|
|
+ border-right: @border-width solid rgba(151, 151, 151, 0.2);
|
|
|
+ border-bottom: @border-width solid rgba(151, 151, 151, 0.2);
|
|
|
background: #191A1C;
|
|
|
}
|
|
|
.remark {
|