Topic: How to add arrow to tooltip?
I am trying to add arrow(triangular piece attached to tooltip) to the tooltip like we have in bootstrap. Tried using options parameter like this
options={{
modifiers: [
{ name: 'arrow', options: { element: '[data-popper-arrow]' } },
],
}}
But no use, please help!
I've tried to add it using modifiers, but for some reason it also didn't work for me.
Check my CSS workaround:
[data-popper-placement='top']:after {
content: '';
border-top: 11px solid #666;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: absolute;
bottom: 1px;
left: 50%;
transform: translate(-50%, 50%);
}
[data-popper-placement='bottom']:after {
content: '';
border-bottom: 11px solid #666;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -4px);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 5.1.0
- Device: Laptop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No