Skip to content

Commit

Permalink
fix: tooltip styled component issue is fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@corteggiano
chandrashekhara.n authored and corteggiano committed May 7, 2024
1 parent ecbb92c commit c9d7af1
Show file tree
Hide file tree
Showing 2 changed files with 179 additions and 179 deletions.
82 changes: 41 additions & 41 deletions packages/dashboard/src/components/palette/icons/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,53 +16,53 @@ type PaletteComponentIconProps = {
Icon: React.FC;
widgetName: string;
};

const Tooltip = styled.div<{ hover: boolean }>`
${({ hover }) => `visibility: ${hover ? 'visible' : 'hidden'};`}
font-size: ${fontSizeHeadingS};
color: ${colorTextBodyDefault};
background-color: ${colorBackgroundSegmentHover};
padding: ${spaceStaticS} ${spaceStaticM};
border-radius: ${borderRadiusPopover};
border-width: 2px;
border-color: ${colorBorderButtonNormalDisabled};
box-shadow: 2px 2px 2px ${colorBorderButtonNormalDisabled};
position: absolute;
left: 50%;
top: 105%;
border-style: solid;
z-index: 9;
transform: translateX(-50%);
&::before,
&::after {
content: '';
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
left: 50%;
right: 50%;
margin: auto;
margin-left: -10px;
transform: rotate(180deg);
}
&::before {
bottom: 92%;
border-top: 11px solid ${colorBorderButtonNormalDisabled};
margin-bottom: 5px;
}
&::after {
bottom: 100%;
border-top: 10px solid ${colorBackgroundSegmentHover};
margin-top: -2px;
z-index: 1;
}
`;
const PaletteComponentIcon: React.FC<PaletteComponentIconProps> = ({
Icon,
widgetName,
}) => {
const [hover, setHover] = useState<boolean>(false);

const Tooltip = styled.div<{ hover: boolean }>`
${({ hover }) => `visibility: ${hover ? 'visible' : 'hidden'};`}
font-size: ${fontSizeHeadingS};
color: ${colorTextBodyDefault};
background-color: ${colorBackgroundSegmentHover};
padding: ${spaceStaticS} ${spaceStaticM};
border-radius: ${borderRadiusPopover};
border-width: 2px;
border-color: ${colorBorderButtonNormalDisabled};
box-shadow: 2px 2px 2px ${colorBorderButtonNormalDisabled};
position: absolute;
left: 50%;
top: 105%;
border-style: solid;
z-index: 9;
transform: translateX(-50%);
&::before,
&::after {
content: '';
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
left: 50%;
right: 50%;
margin: auto;
margin-left: -10px;
transform: rotate(180deg);
}
&::before {
bottom: 92%;
border-top: 11px solid ${colorBorderButtonNormalDisabled};
margin-bottom: 5px;
}
&::after {
bottom: 100%;
border-top: 10px solid ${colorBackgroundSegmentHover};
margin-top: -2px;
z-index: 1;
}
`;

// Without this, Firefox widget drag and drop does not work correctly.
const ignoreDragStart: DragEventHandler = (event) => event.preventDefault();

Expand Down
276 changes: 138 additions & 138 deletions packages/react-components/src/components/tooltip/tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,144 @@ import {
} from './constants';
import styled, { css } from 'styled-components';

interface TooltipProps {
position: 'bottom' | 'top' | 'right' | 'left';
}

const tooltipPositionStyles = {
top: css`
bottom: -30%;
left: 50%;
transform: translateX(-50%) translateY(-100%);
`,
bottom: css`
top: 115%;
left: 50%;
transform: translateX(-50%) translateY(12px);
`,
left: css`
top: 50%;
left: 10%;
transform: translateX(-100%) translateY(-50%);
`,
right: css`
top: 50%;
left: 90%;
transform: translateX(0) translateY(-50%);
`,
};

const TooltipContainer = styled.span`
position: relative;
display: inline-block;
`;

const TooltipText = styled.div<TooltipProps>`
position: absolute;
visibility: hidden;
z-index: 99;
text-align: center;
${({ position }) => tooltipPositionStyles[position]}
${TooltipContainer}:hover & {
visibility: visible;
}
&::before,
&::after {
content: '';
position: absolute;
}
&::before {
width: 0;
height: 0;
border: 6px solid transparent;
}
${({ position }) =>
position === 'top' &&
css`
&::after,
&::before {
top: 100%;
left: 50%;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
&::before {
border-top: 12px solid ${colorBorderControlDefault};
}
&::after {
border-top: 13px solid ${colorBackgroundContainerContent};
margin-top: -2px;
z-index: 1;
}
`}
${({ position }) =>
position === 'bottom' &&
css`
&::after,
&::before {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
&::before {
border-bottom: 12px solid ${colorBorderControlDefault};
}
&::after {
border-bottom: 12px solid ${colorBackgroundContainerContent};
margin-bottom: -2px;
z-index: 1;
}
`}
${({ position }) =>
position === 'left' &&
css`
&::after,
&::before {
top: 50%;
left: 100%;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
&::before {
border-left: 12px solid ${colorBorderControlDefault};
}
&::after {
border-left: 12px solid ${colorBackgroundContainerContent};
margin-left: -2px;
z-index: 1;
}
`}
${({ position }) =>
position === 'right' &&
css`
&::after,
&::before {
top: 50%;
right: 100%;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
&::before {
border-right: 10px solid ${colorBorderControlDefault};
}
&::after {
border-right: 11px solid ${colorBackgroundContainerContent};
margin-right: -2px;
z-index: 1;
}
`}
`;

export const Tooltip = ({
content,
position,
Expand Down Expand Up @@ -55,144 +193,6 @@ export const Tooltip = ({
e.stopPropagation();
};

interface TooltipProps {
position: 'bottom' | 'top' | 'right' | 'left';
}

const tooltipPositionStyles = {
top: css`
bottom: -30%;
left: 50%;
transform: translateX(-50%) translateY(-100%);
`,
bottom: css`
top: 115%;
left: 50%;
transform: translateX(-50%) translateY(12px);
`,
left: css`
top: 50%;
left: 10%;
transform: translateX(-100%) translateY(-50%);
`,
right: css`
top: 50%;
left: 90%;
transform: translateX(0) translateY(-50%);
`,
};

const TooltipContainer = styled.span`
position: relative;
display: inline-block;
`;

const TooltipText = styled.div<TooltipProps>`
position: absolute;
visibility: hidden;
z-index: 99;
text-align: center;
${({ position }) => tooltipPositionStyles[position]}
${TooltipContainer}:hover & {
visibility: visible;
}
&::before,
&::after {
content: '';
position: absolute;
}
&::before {
width: 0;
height: 0;
border: 6px solid transparent;
}
${({ position }) =>
position === 'top' &&
css`
&::after,
&::before {
top: 100%;
left: 50%;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
&::before {
border-top: 12px solid ${colorBorderControlDefault};
}
&::after {
border-top: 13px solid ${colorBackgroundContainerContent};
margin-top: -2px;
z-index: 1;
}
`}
${({ position }) =>
position === 'bottom' &&
css`
&::after,
&::before {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
&::before {
border-bottom: 12px solid ${colorBorderControlDefault};
}
&::after {
border-bottom: 12px solid ${colorBackgroundContainerContent};
margin-bottom: -2px;
z-index: 1;
}
`}
${({ position }) =>
position === 'left' &&
css`
&::after,
&::before {
top: 50%;
left: 100%;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
&::before {
border-left: 12px solid ${colorBorderControlDefault};
}
&::after {
border-left: 12px solid ${colorBackgroundContainerContent};
margin-left: -2px;
z-index: 1;
}
`}
${({ position }) =>
position === 'right' &&
css`
&::after,
&::before {
top: 50%;
right: 100%;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
&::before {
border-right: 10px solid ${colorBorderControlDefault};
}
&::after {
border-right: 11px solid ${colorBackgroundContainerContent};
margin-right: -2px;
z-index: 1;
}
`}
`;

return (
<TooltipContainer
onMouseEnter={handleMouseEnter}
Expand Down

0 comments on commit c9d7af1

Please sign in to comment.