材质 UI 工具提示不适用于选择选项

Question

我想tooltipreact-select's选项。我已经看到@atlaskit/tooltip完全像这样工作，但我想使用材料 ui 工具提示，当我尝试时它不起作用。任何人都可以帮我解决问题吗

import React, { Component } from "react";
import Select, { components } from "react-select";
import {primaryColor,primaryColorLight} from "../app-resources/theme-overrides/global"
import Tooltip from '@material-ui/core/Tooltip';
const { Option } = components;
const customOption = props => {
return (
<Tooltip title={props.label} arrow>
<Option {...props} />
</Tooltip>
);
};
export default class SingleSelect extends Component {
render(props) {
return (
<>
<Select
components={{
Option: customOption,
}}
className="basic-single"
classNamePrefix="select"
name={this.props.name}
isClearable
options={this.props.Options}
placeholder={this.props.placeholder}
styles={{
menu: base => ({
...base,
marginTop: 0
}),
control: (base, state) => ({
// none of react-select's styles are passed to <Control />
background: 'white',
height: 45,
border: "1px solid #ccc2c2",
borderRadius: 25,
display: 'flex', 
border: state.isFocused ? "2px solid "+primaryColor : "1px solid #ccc2c2", //${primaryColor}
// This line disable the blue border
boxShadow: state.isFocused ? 0 : 0,
'&:hover': {
border:  state.isFocused ?"2px solid "+primaryColor:"1px solid "+primaryColorLight
},
fontSize: '1rem'
}),
container: (provided, state) => ({
...provided,
marginTop: 8
}),
valueContainer: (provided, state) => ({
...provided,
overflow: "visible"
}),
placeholder: (provided, state) => ({
...provided,
position: "relative",
display: "block",
top: state.hasValue || state.selectProps.inputValue ? -4 : "47%",
transition: "top 0.1s, font-size 0.1s",
fontSize: state.hasValue || state.selectProps.inputValue? 12 : "1rem",
color: state.hasValue || state.selectProps.inputValue || state.isFocused?primaryColor:"#757575",
marginBottom: 20,
background: 'linear-gradient(to top,#ffffff 60%,#fff0 50%)',
backgroundSize: "60% auto",
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
padding:"0px 5px",
marginLeft: 0,
borderTopRightRadius: 20,
borderTopLeftRadius: 20
})
}}
/>
</>
);
}
}

Answer 1

这是我的工作代码沙箱：https://codesandbox.io/s/strange-shape-kthxv?file=/src/App.js。

基本上，我们使用以下列表作为选项(例如(。这里的关键是使用Tooltip来包装标签。

const options = [
{
value: "chocolate",
label: (
<Tooltip placement="right" title="chocolate" arrow>
<span>Chocolate</span>
</Tooltip>
)
},
{
value: "strawberry",
label: (
<Tooltip placement="right" title="strawberry" arrow>
<span>Strawberry</span>
</Tooltip>
)
},
{
value: "vanilla",
label: (
<Tooltip placement="right" title="Vanilla" arrow>
<span>Vanilla</span>
</Tooltip>
)
}
];

希望这有帮助。