React-select: Enable/Disable tooltip during mouseover/mouseout

[maybemaybenot]

Great work on react-select!!!

I would like have an option via props to enable/disable tooltip during mouseover/mouseout. This would help to display additional info about the option a user is about to select.

I'll be happy to contribute via PR please share your thoughts and help me get started.

[devlato]

+1

[Abzoozy]

It's an awesome tool and Tooltip is indeed important in some cases +1

[pgoldweic]

Tooltip would indeed be very useful +1

[jaredramirez]

+1

[freeranger]

Could we have a tooltip when you hover over the input area as well as when you hover over the elements in the drop down?
Use case: The text in the elements wraps to multiple lines because it is too long, but at least you can see it. When you select one of these, you get '...' where it is truncated, so it is no longer possible to see the full text unless you open the dropdown again and scroll to the selected element

[rubensbiork]

+1

[blairmorris]

+1

[piotrpawlik]

Could be useful to display error messages as well (errors returned from backend for example).

[KozhevnikovDmitry]

+1

[BhavikModi]

Dear all,
for now you can do it like this

     <div className="col-md-2" title={this.state.dataDesc}>
                 <Select
                          placeholder="Select data"
                          options={this.state.dataList}
                          value={this.state.dataDesc}
                          clearable={true}
                   />
      </div>

this works fine for me :)

[robertomellocampos]

+1

[shakdwipeea]

We were able to use optionRenderer to achieve this.

[jainvizz]

Hi @shakdwipeea Can you please share the code , how you have achieved the same using optionRenderer. When i am trying to do so option hover has stopped working for me. This is my function body

renderOption(op){
return (
            <div key={op.key} className="VirtualizedSelectOption" style={op.style} onClick={() => op.selectValue(op.option)}>
                    {op.option[op.labelKey]}
                </div>
        );
}

[shakdwipeea]

We did sth along the lines of the following:

<Select labelKey="name"
    valueKey="id"
    placeholder=""
    closeOnSelect={false}
    multi={true}
    options={options}
    onChange={(e) => this.handleMultiChange(e, formElement.id)}
    value={this.state.personForm.role.value}
    onClose={this.closedMenu}
    optionRenderer={(option) =>
    <div onMouseEnter={(e) => this.showToolTipRole(e, option)}
         onMouseLeave={this.hideToolTipRole}
         data-tip
         data-for={index}
         oldtitle="Update Person">
         {option.name}
    </div>
    }
    removeSelected={false}
/>

Note that you will need to define your state transition functions (eg. showToolTipRole, hideToolTipRole etc.)

[jainvizz]

Thanks @shakdwipeea for a quick response. I figured out that I was not setting focus class on mouse over. added the event to do that and it started working for me. Code provided below.

renderOption(op){
return (
            <div key={op.key} className={["VirtualizedSelectOption", op.focusedOption[op.valueKey] === op.option[op.valueKey] ? "VirtualizedSelectFocusedOption" : ""].join(" ")} style={op.style} onMouseOver={() => op.focusOption(op.option)} onClick={() => op.selectValue(op.option)}>
                    {op.option[op.labelKey]}
                </div>
        );
}

[Sawan1994]

@saravanansivanathan

Please see the following example example by react-select

[robyn-thomas]

+1

[robyn-thomas]

Could we have a tooltip when you hover over the input area as well as when you hover over the elements in the drop down?
Use case: The text in the elements wraps to multiple lines because it is too long, but at least you can see it. When you select one of these, you get '...' where it is truncated, so it is no longer possible to see the full text unless you open the dropdown again and scroll to the selected element

This is so important

[presiyan-kostov]

+1

[hect1c]

Not sure if this is the best place for my issue, but will post here

I was able to get tooltip working by using SingleValue components and wrapping it with a tooltip, my only problem is the tooltip doesn't show when my select menu is disabled

https://codesandbox.io/s/condescending-agnesi-p3ypc

If you look at this sandbox you will see the tooltip when you select an option and hover over it. Now if you set isDisabled={true} on the CreatableSelect you will notice that the tooltip no longer shows over the selected singleValue option. Is there a way to still have the tooltip show even though the select isDisabled?

[sai-raghava]

I have done the following to get tool tip for selected values in multi-select

• After handling the selected value

• getting Elements with className 'css-1lc36uo' and saving into tempVariable

• Looping the tempVariable and adding the title with selected textContent

onChange={(e) => this.handlemultiDropdown(e)}

handlemultiDropdown = (e) => {
if (e) {
this.setState({ answerValues: e}, () => {
let getSelectedvalues = document.getElementsByClassName('css-1lc36uo');
if(getSelectedvalues!=undefined)
_.forEach(getSelectedvalues,(selectedValue)=>{
selectedValue.title=selectedValue.textContent
})
});
}
}

Hope this helps

[maybemaybenot]

Closing this one as we seem to have multiple options to achieve tooltip functionality.