Html 使文本显示在悬停按钮上

我想做的是有这样的东西：

<button class="addMore">+</button>

+

执行如下效果：

<button class="addMore">+</button>

当你在上面盘旋的时候

---

我已经找到了一些不同的东西，但没有一个像我希望的那样出现在视频中。

使用

title

来显示您的信息：

---

+

您可以使用css设置按钮的背景颜色更改，如下所示：

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

并将工具提示设置为

+

.addMore{
边界：无；
宽度：32px；
高度：32px；
背景色：#eee；
过渡：全部缓进缓出0.2s；
光标：指针；
}
.addMore:悬停{
边框：1px实心#888；
背景色：#ddd；
}

---

+

对于我所有的

React.JS

用户（以及后来的用户），我能够通过以下方式实现这一点（并使用lib）：

工具提示组件的使用

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>
  }
/>

从'reactstrap'导入{Button}

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

import React，{useState}来自“React”
从“Reactstrap”导入*作为Reactstrap
常量工具提示=道具=>{
常量[tooltipOpen，setTooltipOpen]=useState（false）
常量切换=（）=>setTooltipOpen（！tooltipOpen）
//组件使用警告
if（！props.component）{
console.warn（'工具提示缺少组件'）
}
如果（！props.tooltipContent）{
console.warn（'工具提示缺少内容'）
}
if（props.component&！props.component.props.id）{
console.warn（'工具提示的组件没有id（不能有空格）'）
}
返回(
{props.component}
{props.tooltipContent&&(
{props.tooltipContent&&(
{props.tooltipContent}
)}
)}
)
}
Tooltip.displayName='Tooltip'
导出默认工具提示

最重要的部分是

元素上的

样式={{pointerEvents:'none'}}

，以及按钮在

中的嵌套

---

+

后续问题，是否可以设置该样式？对禁用的按钮不起作用。要使其工作，请将按钮CSS设置为“指针事件：自动”。嗨@MoJo，欢迎使用stackoverflow！你在回答一个超过2年的问题。请尝试回答新问题，这将更有帮助。