react-tooltip icon indicating copy to clipboard operation
react-tooltip copied to clipboard

Unable to custom the width of the tooltip based on the content

Open ShivaniAmpati opened this issue 3 years ago • 2 comments

I would need a tooltip with some width set but unable to achieve it through classes and indeed i dont want to you use
and set multiline={true}

ShivaniAmpati avatar Jun 30 '22 20:06 ShivaniAmpati

+1. Would love to have a width or min-width prop for handling longer strings. The default of 20px is too small.

image

lydiautkin avatar Jul 15 '22 19:07 lydiautkin

I try set width like this

<ReactTooltip
  effect="solid"
  id={tooltipId}
  place={option.tooltip?.position ?? 'top'}
  overridePosition={(
    { top, left },
    currentEvent,
    currentTarget,
    node
  ) => {
    node.style.width = '190px'; // Your custom width
    return {
      top,
      left
    };
  }}
/>

Idk, but this is works for me

alfianandinugraha avatar Aug 11 '22 05:08 alfianandinugraha

Hi, guys can you let me know your thoughts here, please? https://github.com/ReactTooltip/react-tooltip/pull/820#issuecomment-1317096074

Also, v5 will not have this problem, but if someone can make a PR to fix v4.x, this will be great!

thanks!

danielbarion avatar Nov 16 '22 16:11 danielbarion

Hi, closing this issue due to: https://react-tooltip.com/docs/examples/styling#basic-explanation

Please, open a new one if necessary. Thanks!

danielbarion avatar Nov 30 '22 21:11 danielbarion