diff --git a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss index c8fa099cce6..05246fbac0a 100644 --- a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss +++ b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss @@ -20,7 +20,13 @@ $popper-margin-from-ref: 5px; background: $tooltipBackground; border-radius: $border-radius; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); - padding: 10px; + padding: 0px 8px; + height: 24px; + display: flex; + align-items: center; + //border: 1px #333333 solid; + color: $tooltipColor; + font-weight: 500; // Themes &.popper__background--error { @@ -29,7 +35,7 @@ $popper-margin-from-ref: 5px; &.popper__background--brand { @include popper-theme($tooltipBackgroundBrand, $tooltipBackgroundBrand); - @include gradient-vertical($red, $orange); + @include gradient-vertical($tooltipBackground, $tooltipBackground); } } @@ -39,6 +45,7 @@ $popper-margin-from-ref: 5px; border-style: solid; position: absolute; margin: 0px; + display: none; } .popper__arrow { diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index da6328b3c11..71fc8551dda 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -308,6 +308,8 @@ $tooltipLinkColor: $link-color; $graph-tooltip-bg: $dark-1; $tooltipBackground: $popover-help-bg; +$tooltipBackground:#e9edf2; +$tooltipColor: #52545c; $tooltipArrowColor: $tooltipBackground; $tooltipBackgroundError: $brand-danger; $tooltipBackgroundBrand: $brand-primary; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index cca183233be..59de9617a94 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -312,6 +312,8 @@ $tooltipLinkColor: lighten($popover-help-color, 5%); $graph-tooltip-bg: $gray-5; $tooltipBackground: $popover-help-bg; +$tooltipBackground: #09090b; +$tooltipColor: #ececec; $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip $tooltipBackgroundError: $brand-danger; $tooltipBackgroundBrand: $brand-primary;