How to add arrow to tooltip?

Topic: How to add arrow to tooltip?

pro premium priority asked 2 years 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!

Add comment

mlazaru staff answered 2 years ago

0 0 Best answer

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

Add comment