react项目中实现悬浮（hover）在按钮上时在旁边显示提示

<i
              className={classNames({
                'device-icon': true,
                'camera-icon': true,
                'camera-icon-hover-show-intro': this.state.shouldVolumeGainBarShow === false,
                active: this.state.isCameraOpened === true,
              })}
              role="button"
              tabIndex={0}
              onClick={this.handleClickCamera}
              labeltooltip="摄像头"
            />
            <i
              className={classNames({
                'device-icon': true,
                'mic-icon': true,
                'mic-icon-hover-show-intro': this.state.shouldVolumeGainBarShow === false,
                active: this.state.shouldVolumeGainBarShow === true,
              })}
              role="button"
              tabIndex={0}
              onClick={this.handleClickMic}
              labeltooltip="麦克风"
            />
            <i
              className={classNames({
                'device-icon': true,
                'wifi-icon': true,
                'wifi-icon-hover-show-intro': this.state.shouldVolumeGainBarShow === false,
                active: false,
              })}
              role="button"
              tabIndex={0}
              onClick={() => {}}
              labeltooltip="网络"
            />
            <i
              className={classNames({
                'device-icon': true,
                'exit-icon': true,
                'exit-icon-hover-show-intro': this.state.shouldVolumeGainBarShow === false,
                active: this.state.selectedIconName === SCREEN_SHARE_ICONTABNAME.EXIT,
              })}
              role="button"
              tabIndex={0}
              onClick={() => this.handleClickExit(SCREEN_SHARE_ICONTABNAME.EXIT)}
              labeltooltip="退出桌面共享"
            />

.device-icon {
        width: 24px;
        height: 24px;
        outline: none;
        cursor: pointer;
        margin-right: 11px;
        position: relative;

        &:nth-last-child(2) {
          margin-right: 24px;
        }
      }

      .camera-icon {
        background: url('~ROOT/shared/assets/image/vn-screen-camera-off-66-66.png') no-repeat center;
        background-size: 22px 22px;

        &.camera-icon-hover-show-intro {
          &:hover:after {
            box-sizing: border-box;
            height: 24px;
            line-height: 24px;
            position: absolute;
            bottom: -26px;
            border-radius: 12px;
            background-color: #ffffff;
            font-size: 12px;
            color: #626e80;
            font-style: normal;
            cursor: default;
            text-align: center;
            content: attr(labeltooltip);
            width: 58px;
            left: -20px;
          }
        }

        &.active {
          background: url('~ROOT/shared/assets/image/vn-camera-hover-69-66.png') no-repeat center;
          background-size: 23px 22px;
        }
      }

      .mic-icon {
        background: url('~ROOT/shared/assets/image/vn-screen-voice-on-54-72.png') no-repeat center;
        background-size: 18px 24px;

        &.mic-icon-hover-show-intro {
          &:hover:after {
            box-sizing: border-box;
            height: 24px;
            line-height: 24px;
            position: absolute;
            bottom: -26px;
            border-radius: 12px;
            background-color: #ffffff;
            font-size: 12px;
            color: #626e80;
            font-style: normal;
            cursor: default;
            text-align: center;
            content: attr(labeltooltip);
            width: 58px;
            left: -20px;
          }
        }

        &.active {
          background: url('~ROOT/shared/assets/image/vn-mic-hover-54-72.png') no-repeat center;
          background-size: 18px 24px;
        }
      }

      .speaker-icon {
        background: url('~ROOT/shared/assets/image/vn-screen-speaker-60-66.png') no-repeat center;
        background-size: 20px 22px;
      }

      .wifi-icon {
        background: url('~ROOT/shared/assets/image/vn-screen-wifi-72-57.png') no-repeat center;
        background-size: 24px 19px;

        &.wifi-icon-hover-show-intro {
          &:hover:after {
            box-sizing: border-box;
            height: 24px;
            line-height: 24px;
            position: absolute;
            bottom: -26px;
            border-radius: 12px;
            background-color: #ffffff;
            font-size: 12px;
            color: #626e80;
            font-style: normal;
            cursor: default;
            text-align: center;
            content: attr(labeltooltip);
            width: 58px;
            left: -20px;
          }
        }

        &.active {
          background: url('~ROOT/shared/assets/image/vn-wifi-72-72.png') no-repeat center;
          background-size: 24px 24px;
        }
      }

      .restart-icon {
        background: url('~ROOT/shared/assets/image/vn-screen-restart-60-60.png') no-repeat center;
        background-size: 19px 19px;
      }

      .exit-icon {
        background: url('~ROOT/shared/assets/image/vn-screen-exit-60-60.png') no-repeat center;
        background-size: 19px 19px;

        &.exit-icon-hover-show-intro {
          &:hover:after {
            box-sizing: border-box;
            height: 24px;
            line-height: 24px;
            position: absolute;
            bottom: -26px;
            border-radius: 12px;
            background-color: #ffffff;
            font-size: 12px;
            color: #626e80;
            font-style: normal;
            cursor: default;
            text-align: center;
            content: attr(labeltooltip);
            width: 95px;
            left: -35px;
          }
        }

        &.active{
          background: url('~ROOT/shared/assets/image/screen-exit-blue-60-60.png') no-repeat center;
          background-size: 19px 19px;
        }
      }

标签：hover,center,上时,react,background,icon,24px,size
来源： https://www.cnblogs.com/chenbeibei520/p/10522945.html