diff --git a/src/components/atoms/Tooltip.module.css b/src/components/atoms/Tooltip.module.css index 93a8edec4..57732f1d8 100644 --- a/src/components/atoms/Tooltip.module.css +++ b/src/components/atoms/Tooltip.module.css @@ -10,6 +10,16 @@ font-size: var(--font-size-small); } +.icon { + width: 15px; + height: 15px; + cursor: help; + display: inline-block; + margin-bottom: -0.1rem; + margin-left: calc(var(--spacer) / 6); + fill: var(--brand-grey-light); +} + .arrow, .arrow::before { position: absolute; diff --git a/src/components/atoms/Tooltip.tsx b/src/components/atoms/Tooltip.tsx index 160bd117c..7913e4714 100644 --- a/src/components/atoms/Tooltip.tsx +++ b/src/components/atoms/Tooltip.tsx @@ -2,6 +2,7 @@ import React, { ReactElement, ReactNode } from 'react' import loadable from '@loadable/component' import { useSpring, animated } from 'react-spring' import styles from './Tooltip.module.css' +import { ReactComponent as Info } from '../../images/info.svg' const Tippy = loadable(() => import('@tippyjs/react/headless')) @@ -14,7 +15,7 @@ const animation = { // Forward ref for Tippy.js // eslint-disable-next-line const DefaultTrigger = React.forwardRef((props, ref: any) => { - return Info + return }) export default function Tooltip({ @@ -49,7 +50,7 @@ export default function Tooltip({ return ( + +