css – Tooltip message is not showing well

I have some kind of dropdown food selection, inside that each thing have an enigma symbol, clicking it I show tooltip message that explain that thing. Issue is that when message is a little bit longer it need a straight scroll so customer can review everything, which misbehaves, additionally its bad whatsoever on smaller sized tools.

This is just how it looks until now:

 const bidStatuses = [
  {
    name: t('myAds:filters.bidStatus.values.all'),
    id: 0
  },
  {
    name: (
      <>
        <span>{t('myAds:filters.bidStatus.values.unsponsored.label')}</span>
        <Tooltip title={t('myAds:filters.bidStatus.values.unsponsored.tooltip')}>
          <QuestionCircleOutlined className={styles.bidStatusOption} />
        </Tooltip>
      </>
    ),
    id: 1
  },
  {
    name: (
      <>
        <span>{t('myAds:filters.bidStatus.values.active.label')}</span>
        <Tooltip title={t('myAds:filters.bidStatus.values.active.tooltip')}>
          <QuestionCircleOutlined className={styles.bidStatusOption} />
        </Tooltip>
      </>
    ),
    id: 2
  },
  {
    name: (
      <>
        <span>{t('myAds:filters.bidStatus.values.inactive.label')}</span>
        <Tooltip title={t('myAds:filters.bidStatus.values.inactive.tooltip')}>
          <QuestionCircleOutlined className={styles.bidStatusOption} />
        </Tooltip>
      </>
    ),
    id: 3
  }
];.

 bidStatusOption {
float: right;.
margin-top: 7px;.
}

So, tooltip message is following this

<< QuestionCircleOutlined className= {styles.bidStatusOption}/>>.

as well as since that gets on right of the display and also as I discussed previously larger message need straight scroll to be seen.

I attempted similar to this

<< Tooltip title= {t(' myAds: filters.bidStatus.values.active.tooltip')} >>.
<< QuestionCircleOutlined className= {'$ {styles.bidStatusOption} tooltip-content'}/>>.
<.

Including this

 tooltip-content.

and after that

 tooltip-content {
white-space: nowrap;.
overflow: concealed;.
text-overflow: ellipsis;.
max-width: 200px;.
}

However its very same.

I additionally attempted some CSS to cover it in 2-3 rows depend of the message dimension however with no success.

What I can else attempt?

Given that I do not recognize just how to create this code right here, I upload photo as instance:

This gets on Apple iphone 12 professional instance

You can see that I can not see message plainly complete