Tooltip for each option of dropdown

[bagwari]

Hi all, I want to show the tooltip for each option of using react-tooltip, I have tried below code which is working fine to show tooltip on mouseover, but on keydown and keyup arrow it not works because the focus never come to inner child div, which I have created as below...
Here, I updating options with tooltip div

There is always a parent div creted,

<div class="select__menu css-r9dwqp-menu">
  <div class="select__menu-list css-11unzgr">

    <div role="listbox" id="react-select-2-menulist">
      
      <div class="select__option css-3dmylm-option" id="react-select-2-option-0" tabindex="-1">
        <div class="__react_component_tooltip place-right type-dark " id="" role="tooltip" data-id="tooltip"></div>
        <div
          data-for=""
          data-event="mouseover focus keydown"
          data-event-off="mouseout blur keyup"
          aria-label="option"
          role="button"
          tabindex="0"
          class="select-option"
        ></div>
      </div>
      <div class=select__option css-3dmylm-option" id="react-select-2-option-1" tabindex="-1">
        <div
          class="__react_component_tooltip place-right type-info select-tooltip"
          id="<"
          role="tooltip"
          data-id="tooltip"
          style="left: 270px; top: 174px;"
        >
          Less than
        </div>
        <div
          data-for="<"
          data-tip="Less than"
          data-event="mouseover focus keydown"
          data-event-off="mouseout blur keyup"
          aria-label="option"
          role="button"
          tabindex="0"
          class="select-option"
        >
          &lt;
        </div>
      </div>
<div></div>

my question is, can we have control on that outer div HTML, while modifying option.
Or please suggest if I'm following wrong approach.

[ebonow]

I would suggest instead keeping the label as a string, and creating a custom Option component. This would allow you to render the tooltip while also having access to knowing whether the option is "focused" or not.

First, react-select depends on the input having focus to know whether the select is active or not, so making the options buttons with the hope of using the focus/blur events won't work without completely rewiring the menuIsOpen logic, however, react-select does have a mechanism to keep track of what is the pseudo focused object.

The issue with the library you are using is that there doesn't appear to be a way to programmatically tell ReactTooltip whether it should be visible or not and instead relies on its own event bindings. Looking at the source code though, you should be able to coerce it to show by setting the className on the tooltip to "show".
https://github.com/wwayne/react-tooltip/blob/01bf0ec6b587605383ac84ac385e534b6cccc456/src/index.js#L773

import Select, { components } from 'react-select';

const Option = ({ innerProps, ...props }) => {
  const { label, value, tooltipContent } = props.data;
  const newInnerProps = {
    ...innerProps,
    'data-for': value,
    'data-tip': tooltipContent,
    // data-event likely isn't needed as we are coercing the className of the tooltip class to show when react-select indicates that the option is focused.
    'aria-label': 'option',
  };

  const classNames=`cb-select-tooltip ${props.isFocused ? 'show' : ''}`;

  return (
    <ReactTooltip id={value} className={classNames.tooltip} role="tooltip" type="info" place="right" effect="solid">
      <components.Option {...props} innerProps={newInnerProps} className="select-option" />
    </ReactTooltip>
  )
}

const MySelect = props => {
 ...
 return <Select components={{ Option }} {...otherProps} />
}

[bagwari]

Thank you @ebonow, let me try it.

[bagwari]

Hi @ebonow, on mouseover tooltip works fine, but using keyboard arrow button not works.
I changed little bit the code you have suggested as it was not working, the only issue is using keyboard option tooltip not display, please help.

  const { data, innerProps, isFocused } = props;
  const { label, value, tooltipContent } = data;
  const newInnerProps = {
    ...innerProps,
    'data-for': value,
    'data-tip': tooltipContent,
    'aria-label': 'option',
  };

  const classNames = `cb-select-tooltip ${isFocused ? 'show' : ''}`;
  return (
    <components.Option {...props} innerProps={newInnerProps} className="select-option">
      {label}
      <ReactTooltip id={value} className={classNames.tooltip} role="tooltip" type="info" place="right" effect="solid" />
    </components.Option>
  );
};```

[ebonow]

Just a friendly github markup pointer...

If you do 3 backticks and the code language (ie: js or jsx), it will mark up the code with fancy highlighting.
```jsx

const myFancyFunc = () => {
  let x = 42;
  return x;
}

```

Would you mind creating a codesandbox with what you have so I can tweak it later and see what's going on?