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);
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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