使用title显示您的消息：

<button class="addMore" title="click here">+</button>

.addMore{
  border: none;
  width: 32px;
  height: 32px;
  background-color: #eee;
  transition: all ease-in-out 0.2s;
  cursor: pointer;
}
.addMore:hover{
  border: 1px solid #888;
  background-color: #ddd;
}

<button class="addMore" title="Hover on me!">+</button>

<button type='submit' title='Add New Item'>+</button>

您可以使用css设置按钮的背景颜色变化如下

.addMore:hover {
   background-color: #545454; //desired color code
}

并将工具提示设置为<button class="addMore" title="click here">+</button>

对于我所有的React.JS用户（以及后来的人），我能够通过以下方式实现这一点（并使用reactstrap库）：
工具提示组件的用法

import { Button } from 'reactstrap'

<Tooltip
  tooltipContent={
    'You cannot cancel invoices that were created automatically by memberships!'
  }
  component={
    <span id={'cancelButton'}>
      <Button
        style={{ pointerEvents: 'none' }}
        onClick={...}
        disabled
      >
        Cancel
      </Button>
    </span>
  }
/>

Tooltip.jsx

import React, { useState } from 'react'
import * as Reactstrap from 'reactstrap'

const Tooltip = props => {
  const [tooltipOpen, setTooltipOpen] = useState(false)
  const toggle = () => setTooltipOpen(!tooltipOpen)
  // Warnings for component useage
  if (!props.component) {
    console.warn('Missing component for tooltip')
  }
  if (!props.tooltipContent) {
    console.warn('Missing content for tooltip')
  }
  if (props.component && !props.component.props.id) {
    console.warn('Component for tooltip has no id (must not have spaces)')
  }
  return (
    <React.Fragment>
      {props.component}
      {props.tooltipContent && (
        <Reactstrap.Tooltip
          placement={props.placement ? props.placement : 'top'}
          isOpen={tooltipOpen}
          target={props.component.props.id}
          toggle={toggle}
          delay={props.delay ? props.delay : 750}
        >
          {props.tooltipContent && (
            <div className="row p-2">
              <div className="col-md-12">{props.tooltipContent}</div>
            </div>
          )}
        </Reactstrap.Tooltip>
      )}
    </React.Fragment>
  )
}
Tooltip.displayName = 'Tooltip'
export default Tooltip

最重要的部分是<Button />元素上的style={{ pointerEvents: 'none' }}和<span />中Button的嵌套

如果你不想使用title属性，你可以只使用HTML和CSS。
就像这个例子：
超文本标记语言

<button class="read-more-info-icon modal-right">i<span class="hidden-info">More information about the matter...</span></button>

中央支助系统

button.read-more-info-icon {
    vertical-align: top;
    background: #bfbfbf;
    height: 18px;
    width: 18px;
    text-align: center;
    line-height: 1;
    color: black!important;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
button.read-more-info-icon:hover {
    overflow: visible;
}
button.read-more-info-icon .hidden-info {
    position: absolute;
    top: 23px;
    width: 240px;
    text-align: left;
    background: black;
    padding: 10px;
    opacity: 0;
    transition: opacity .25s ease-in-out;
  color:#fff;
}
button.read-more-info-icon.modal-left .hidden-info { 
    right: 0;
}
button.read-more-info-icon.modal-right .hidden-info { 
    left: 0;
}
button.read-more-info-icon:hover .hidden-info {
    opacity: 1;
}

codepen示例：https://codepen.io/SitefactoryDK/pen/eYLQKvm