I want to overflow the tooltip instead of overflowing it in datatables like jquery ui tooltip

I don't know how to overflow a datatooltip like jquery ui tooltip. jquery tooltip doesnt take width as far from I know I want to replicate the idea of jquery UI tooltip but the design I want is like from the picture I posted. Can you help me guys? Thank you.. Btw the table that I did use there is DATATABLES
.tooltip-wrapper1+.tooltip-wrapper1 {
margin-top: 10px;
}

.tooltip-wrapper1 {
width: fit-content;
}

.tooltip1 {
position: relative;
}

.tooltip1::before {
position: absolute;
content: ' ';
background-color: #010101;
width: 15px;
height: 15px;
z-index: 500;
opacity: 0;
transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
pointer-events: none;
}

.tooltip1::after {
content: attr(data-tooltip-text);
white-space: nowrap;
background-color: #010101;
border-radius: 5px;
color: white;
position: absolute;
text-align: center;
z-index: 555;
opacity: 0;
transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
pointer-events: none;
height: 30px;
display: flex;
align-items: center;
padding: 0 .555555555555556rem;
}

.tooltip1:hover::before,
.tooltip1:hover::after {
opacity: 1;
}

.tooltip1.t-top::before {
top: 0;
left: 50%;
transform: translate(-50%, 0) rotate(45deg);
}

.tooltip1.t-top::after {
top: 0;
left: 50%;
transform: translate(-50%, 0);
}

.tooltip1.t-top:hover::before {
transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
}

.tooltip1.t-top:hover::after {
transform: translate(-50%, calc(-100% - 10px));
}

.tooltip-wrapper1+.tooltip-wrapper1 {
margin-top: 10px;
}

.tooltip-wrapper1 {
width: fit-content;
}

.tooltip1 {
position: relative;
}

.tooltip1::before {
position: absolute;
content: ' ';
background-color: #010101;
width: 15px;
height: 15px;
z-index: 500;
opacity: 0;
transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
pointer-events: none;
}

.tooltip1::after {
content: attr(data-tooltip-text);
white-space: nowrap;
background-color: #010101;
border-radius: 5px;
color: white;
position: absolute;
text-align: center;
z-index: 555;
opacity: 0;
transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
pointer-events: none;
height: 30px;
display: flex;
align-items: center;
padding: 0 .555555555555556rem;
}

.tooltip1:hover::before,
.tooltip1:hover::after {
opacity: 1;
}

.tooltip1.t-top::before {
top: 0;
left: 50%;
transform: translate(-50%, 0) rotate(45deg);
}

.tooltip1.t-top::after {
top: 0;
left: 50%;
transform: translate(-50%, 0);
}

.tooltip1.t-top:hover::before {
transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
}

.tooltip1.t-top:hover::after {
transform: translate(-50%, calc(-100% - 10px));
}

No description
1 Reply
Jochem
Jochem14mo ago
check out #how-to-ask-good-questions for some tips on how best to share your code. I for one am terrible at fixing things if I can't poke around at them, I'm a much worse CSS parser than Firefox is
Want results from more Discord servers?
Add your server