Tooltip overflowing container

[mrwillis]

Hi all,

Not sure if this is fixable within this lib due to limitations with pre-v1 MUI, but basically I am having this issue where the tooltip is getting cut-off by the end of its parent container. It only occurs with the final column nearest to the right of the container. So essentially this

Here is my <DataTable> component

<DataTable columns={columns}
        onSortOrderChange={this.props.onBidBuySortChange}
        showCheckboxes={false}
        height={'auto'} showRowHover selectable={false}
        data={this.props.view === 'Orders' ? this.props.topOrdersBidDataPruned : this.props.topTradesBuyDataPruned}
        showFooterToolbar={false} tableRowColumnStyle={tableTextStyle}
        tableHeaderColumnStyle={{
          wordWrap: 'break-word',
          whiteSpace: 'normal',
          overflow: 'visible'
        }}
        initialSort={this.props.initialBidBuySort} />

And the relevant entry for the column:

        {
          key: 'spreadToBestMeQuote',
          label: 'Avg. Spread to My Best Quote',
          sortable: true,
          tooltip: 'Average spread to the best bid/offer of this broker',
          render: (spread) => {
            if (numeral(spread).value() < 0) {
              return (<p style={{color: colors.red}}>{spread}</p>)
            } else {
              return (<p>{spread}</p>)
            }
          }
        }

Is there any workaround/hack I can use to get this to work?

Thanks

[hyojin]

@mrwillis Hi, I think what we can do now is to increase width which doesn't solve the problem fundamentally. 😅 I'm considering adding a prop which can change a position of a tooltip like it on Icon Button.

[americool]

I'd be interested in having an ability to resize the tooltip as well. I'm trying to customize a table to have its various fonts and spacings resize dynamically with the width of the page, and the inability to shrink the arrow along with the page ends up increasing the height of the table header. (Though I could be mistaken.)