How to make tooltip above all elements inside absolute position and overflow? - html

Question

I need to display a tooltip when hover an option of dropdown. The dropdown used here is react-windowed-select, which a wrapper of react-select. For some reasons, I end up create my own tooltip using css only (not invented by me though, found somewhere from internet). It work great, except, the tooltip is cropped (not fully displayed) for the first data of the options. Here is the screenshot of what I've done:
My objective, how to make this tooltip appear above everything?
Here is the code I'm working so far: https://codesandbox.io/s/friendly-wu-wlitr?file=/src/App.tsx
in case the link of the code broken, here is the code for the corresponding file:
CustomTooltip.tsx
import React from "react";
import "./CustomTooltip.css";
interface CustomTooltipProps {
dataTip: string;
children: React.ReactNode;
position?: "top" | "right" | "left" | "bottom";
}
export default function CustomTooltip({
children,
dataTip,
position = "top"
}: CustomTooltipProps) {
return (
<div className="tooltip-css">
<div
className={`qtip tip-${position}`}
data-tip={dataTip}
style={{ width: "100%" }}
>
{children}
</div>
</div>
);
}
Here is the styling, CustomTooltip.css
/*tipped element. should be inline-block or block*/
/**
source: https://speckyboy.com/free-css-tooltip-snippets/
*/
.tooltip-css {
/*the tip*/
/*top*/
/*bottom*/
/*left*/
/*right*/
/*some styles for this example*/
width: 100%;
}
.tooltip-css .qtip {
display: inline-block;
position: relative;
box-sizing: border-box;
font-style: default;
transition: all 0.7s ease-in-out;
overflow: visible;
}
.tooltip-css .qtip:hover {
cursor: default;
}
.tooltip-css .qtip:before {
content: attr(data-tip);
font-size: 14px;
position: absolute;
background: rgba(10, 20, 30, 0.85);
color: #fff;
line-height: 1.2em;
padding: 1em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
min-width: 120px;
max-width: 400px;
width: fit-content;
text-align: center;
opacity: 0;
visibility: hidden;
transition: all 0.7s ease-in-out;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
letter-spacing: 0;
}
.tooltip-css .qtip:after {
width: 0;
height: 0;
border-style: solid;
content: "";
position: absolute;
opacity: 0;
visibility: hidden;
transition: all 0.7s ease-in-out;
}
.tooltip-css .qtip:hover:before,
.tooltip-css .qtip:hover:after {
visibility: visible;
opacity: 1;
overflow: visible;
}
.tooltip-css .qtip.tip-top:before {
top: 0;
left: 50%;
transform: translate(-50%, calc(-100% - 8px));
box-sizing: border-box;
border-radius: 3px;
}
.tooltip-css .qtip.tip-top:after {
border-width: 8px 8px 0 8px;
border-color: rgba(10, 20, 30, 0.85) transparent transparent transparent;
top: -8px;
left: 50%;
transform: translate(-50%, 0);
}
.tooltip-css .qtip.tip-bottom:before {
bottom: 0;
left: 50%;
transform: translate(-50%, calc(100% + 8px));
box-sizing: border-box;
border-radius: 3px;
}
.tooltip-css .qtip.tip-bottom:after {
border-width: 0 8px 8px 8px;
border-color: transparent transparent rgba(10, 20, 30, 0.85) transparent;
bottom: -8px;
left: 50%;
transform: translate(-50%, 0);
}
.tooltip-css .qtip.tip-left:before {
left: 0;
top: 50%;
transform: translate(calc(-100% - 8px), -50%);
box-sizing: border-box;
border-radius: 3px;
}
.tooltip-css .qtip.tip-left:after {
border-width: 8px 0 8px 8px;
border-color: transparent transparent transparent rgba(10, 20, 30, 0.85);
left: -8px;
top: 50%;
transform: translate(0, -50%);
}
.tooltip-css .qtip.tip-right:before {
right: 0;
top: 50%;
transform: translate(calc(100% + 8px), -50%);
box-sizing: border-box;
border-radius: 3px;
}
.tooltip-css .qtip.tip-right:after {
border-width: 8px 8px 8px 0;
border-color: transparent rgba(10, 20, 30, 0.85) transparent transparent;
right: -8px;
top: 50%;
transform: translate(0, -50%);
}
.tooltip-css body {
background: #3bb4e5;
}
.tooltip-css .container {
padding: 1.5em;
margin: 3em auto;
background: #fff;
position: relative;
max-width: 720px;
font-size: calc(2vmin + 12px);
line-height: 1.5em;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
font-weight: 500;
text-align: center;
}
.tooltip-css .container p {
margin: 0 auto 0.8em;
}
.tooltip-css .container h1 {
text-align: center;
line-height: 1em;
color: #d40;
margin: 0 auto 0.5em;
font-size: 2.5em;
}
.tooltip-css code {
color: #3bb4e5;
font-size: 0.8em;
padding: 1em;
background: #0a141e;
display: block;
text-align: left;
}
.tooltip-css .hl {
color: #eb1777;
}
.tooltip-css .qcontent {
color: #ff0;
font-weight: bold;
}
.tooltip-css .qclass {
color: #dd0;
font-weight: bold;
}
And here how I combine all of them, App.tsx
import "./styles.css";
import Select, { components } from "react-select";
import { CustomTooltip } from "./custom-tooltip";
const data = Array.from(Array(100)).map((item, index) => {
return {
value: index + 1,
label: `data ${index + 1}`
};
});
export default function App() {
return (
<div
style={{
width: "80%"
}}
>
<h1>Data</h1>
<Select
options={data}
components={{
Option: (props) => {
return (
<components.Option {...props}>
<CustomTooltip dataTip={`${props.data.label}`}>
<div>{`${props.data.value}`}</div>
</CustomTooltip>
</components.Option>
);
}
}}
/>
</div>
);
}