Material UI v0.18.7：Chip组件能否实现Tooltip显示标签需求？

Great question! Let's break this down for the specific version you're working with (v0.18.7):

1. Can you add a Tooltip to Material UI's Chip component? #

Absolutely! While the Chip component in v0.18.7 doesn't have a built-in tooltip prop, you can easily wrap it with Material UI's Tooltip component to get the behavior you want. The key is nesting the Chip inside the Tooltip so that hovering (or other triggers) on the Chip activates the tooltip.

Here's a quick working example:

import Tooltip from 'material-ui/Tooltip';
import Chip from 'material-ui/Chip';

// Inside your component's render method
<Tooltip 
  label="Color" 
  tooltipPosition="top" // Choose top/bottom/left/right as needed
>
  <Chip label="orange" />
</Tooltip>

Just note that in v0.18.7, the Tooltip component relies on mouse events by default, so hovering over the Chip should trigger the tooltip without extra configuration.

2. Can this exact requirement (Tooltip as label, Chip as value) be achieved with Chip? #

Yes, the example above directly addresses your need: the Chip displays the value ("orange"), and the Tooltip shows the label ("Color") when hovered.

If for some reason the Tooltip+Chip nesting doesn't work for your use case (e.g., event conflicts, styling issues), here are two solid alternative approaches:

Alternative 1: Custom Component with Popover #

If you need more control over the tooltip's behavior (like click-to-toggle instead of hover), you can build a custom component using Material UI's Popover:

import React, { Component } from 'react';
import Chip from 'material-ui/Chip';
import Popover from 'material-ui/Popover';

class ChipWithTooltip extends Component {
  state = {
    isTooltipOpen: false,
    anchorElement: null
  };

  handleChipClick = (event) => {
    event.preventDefault();
    this.setState({
      isTooltipOpen: !this.state.isTooltipOpen,
      anchorElement: event.currentTarget
    });
  };

  handleCloseTooltip = () => {
    this.setState({ isTooltipOpen: false });
  };

  render() {
    const { tooltipLabel, chipValue } = this.props;
    return (
      <div>
        <Chip 
          label={chipValue} 
          onTouchTap={this.handleChipClick}
        />
        <Popover
          open={this.state.isTooltipOpen}
          anchorEl={this.state.anchorElement}
          anchorOrigin={{ horizontal: 'center', vertical: 'top' }}
          targetOrigin={{ horizontal: 'center', vertical: 'bottom' }}
          onRequestClose={this.handleCloseTooltip}
        >
          <div style={{ padding: '8px 16px', fontSize: '14px' }}>
            {tooltipLabel}
          </div>
        </Popover>
      </div>
    );
  }
}

// Usage:
<ChipWithTooltip tooltipLabel="Color" chipValue="orange" />

Alternative 2: Pure CSS Tooltip #

For a lightweight solution without extra React components, you can use CSS pseudo-elements to create a tooltip:

// In your component
import Chip from 'material-ui/Chip';
import './ChipTooltipStyles.css';

// Usage:
<Chip 
  label="orange" 
  className="custom-chip-tooltip" 
  data-tooltip="Color"
/>

Then add this CSS in ChipTooltipStyles.css:

.custom-chip-tooltip {
  position: relative;
  cursor: pointer;
}

.custom-chip-tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
}

内容的提问来源于stack exchange，提问作者Hemadri Dasari