IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15106 from grafana/tooltip-restyling

Browse Source 
Tooltip restyling
This commit is contained in:
Torkel Ödegaard
2019-01-29 15:07:54 +01:00
committed by GitHub
parent ab322bebf0 71d0fae3a9
commit f7a1e4c185
12 changed files with 36 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/grafana-ui/src/components/FormLabel/FormLabel.tsx
View File

@@ -1,6 +1,6 @@
import React, { FunctionComponent, ReactNode } from 'react';
import classNames from 'classnames';
import { Tooltip } from '..';
import { Tooltip } from '../Tooltip/Tooltip';
interface Props {
children: ReactNode;
@@ -31,9 +31,9 @@ export const FormLabel: FunctionComponent<Props> = ({
<label className={classes} {...rest} htmlFor={htmlFor}>
{children}
{tooltip && (
<Tooltip placement="auto" content={tooltip}>
<div className="gf-form-help-icon--right-normal">
<i className="gicon gicon-question gicon--has-hover" />
<Tooltip placement="top" content={tooltip} theme={"info"}>
<div className="gf-form-help-icon gf-form-help-icon--right-normal">
<i className="fa fa-info-circle" />
</div>
</Tooltip>
)}

12
packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
View File

@@ -1,20 +1,14 @@
import React, { createRef } from 'react';
import React, { createRef } from 'react';
import * as PopperJS from 'popper.js';
import Popper from './Popper';
import PopperController, { UsingPopperProps } from './PopperController';
export enum Themes {
Default = 'popper__background--default',
Error = 'popper__background--error',
Brand = 'popper__background--brand',
}
interface TooltipProps extends UsingPopperProps {
theme?: Themes;
theme?: 'info' | 'error';
}
export const Tooltip = ({ children, theme, ...controllerProps }: TooltipProps) => {
const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
const popperBackgroundClassName = 'popper__background' + (theme ? ' ' + theme : '');
const popperBackgroundClassName = 'popper__background' + (theme ? ' popper__background--' + theme : '');
return (
<PopperController {...controllerProps}>

17
packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
View File

@@ -1,9 +1,11 @@
$popper-margin-from-ref: 5px;
@mixin popper-theme($backgroundColor, $arrowColor) {
@mixin popper-theme($backgroundColor, $textColor) {
background: $backgroundColor;
color: $textColor;
.popper__arrow {
border-color: $arrowColor;
border-color: $backgroundColor;
}
}
@@ -17,9 +19,11 @@ $popper-margin-from-ref: 5px;
.popper__background {
background: $tooltipBackground;
border-radius: $border-radius;
border-radius: $border-radius-sm;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
padding: 10px;
padding: 6px 10px;
color: $tooltipColor;
font-weight: 500;
.popper__arrow {
border-color: $tooltipBackground;
@@ -30,9 +34,8 @@ $popper-margin-from-ref: 5px;
@include popper-theme($tooltipBackgroundError, $tooltipBackgroundError);
}
&.popper__background--brand {
@include popper-theme($tooltipBackgroundBrand, $tooltipBackgroundBrand);
@include gradient-vertical($red, $orange);
&.popper__background--info {
@include popper-theme($popover-help-bg, $popover-help-color);
}
}