Control position of tooltip's tip

[kopijunkie]

Is there a way to control the tooltip's tip (the little arrow below the content bubble) more specifically? Example, say I want a tooltip's tip to be at the bottom left side of the tooltip as opposed to being always in the center depending on whether it is set to be top/bottom/left/right.

[wwayne]

no, have't supported this feature at the moment

[techwraith]

Yeah, a way to define the position of the tip would be great. We can do it now with some hacky global CSS, but it's not pretty.

[ms007]

@Techwraith Could you share your hacky global CSS?

[matthewfbenjamin]

@Techwraith I'd also be interested in your hacky css

[RuslanShohanov]

I set 'left' property of '__react_component_tooltip.place-bottom' class and it helped in my case. Also I used 'data-offset' property.

.__react_component_tooltip.place-bottom:after { left: 90%; }

[lopesc]

+1

[hunterraffety]

+1

[tolicodes]

After much playing around came up with this function to dynamically position the tip to account for the edges of the page:

export default ({ left, top }, event, triggerElement, tooltipElement) => {
  // left position of the element you hovered over + half it's width
  const arrowLeft = triggerElement.getBoundingClientRect().left + triggerElement.offsetWidth / 2;
  // the triggering element's bottom edge
  const arrowTop = triggerElement.getBoundingClientRect().top + triggerElement.offsetHeight + 4;
  const sheet = document.createElement('style');

  // after and before are black border triangle and white triangle
  sheet.innerHTML = `
    .__react_component_tooltip.place-bottom::after {
      position: fixed;
      top: ${arrowTop}px;
      left: ${arrowLeft}px;
    }
    .__react_component_tooltip.place-bottom::before {
      position: fixed;
      top: ${arrowTop - 1}px;
      left: ${arrowLeft}px;
    }
  `;
  document.body.appendChild(sheet);

  // https://github.com/wwayne/react-tooltip/issues/476
  return {
    top,
    left: Math.min(left, window.innerWidth - tooltipElement.offsetWidth),
  };
};

Usage:

import overridePosition from './overridePosition';

 <ReactTooltip
     overridePosition={overridePosition}
>

[brenndap]

this works for me :)

.tooltip { &::after { left: 82% !important; } }

[ncesar]

This would be an awesome feature to be able to change the tip's position making it still be responsive.

[danielbarion]

Hi guys, this will be handled on V5, thanks!

https://github.com/ReactTooltip/react-tooltip/discussions/812

[danielbarion]

Hi guys, I'm sorry but for the initial v5, this option will not be available.

I can take a look and implement this in the future but at the moment, it's not possible by the amount of available time that I have.