Topic: How to add arrow to tooltip?
product.careers@communitybrands.com priority asked 10 months ago
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!
Mateusz Lazaru staff answered 10 months ago
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
- ForumUser: Priority
- 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