Question

我想做的是这样的事情：

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

做这样的效果：

https://i.gyazo.com/d353b657df39c0e6ff159bfdb713f6a4.mp4

当你将鼠标悬停在它上面时。

我已经能够为此找到一些不同的东西，但没有一个像我想要的那样在视频中。

Answer 1

使用title显示您的消息：

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

Answer 2

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

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

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

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

Answer 4

对于所有我的React.JS族（以及后来的人们）来说，我能够做到这一点（并使用reactstrap 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>
  }
/>

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

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

Answer 5

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

将鼠标悬停在按钮上时显示文字

5 个答案: