Html 将鼠标悬停在按钮上时显示文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45456543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make text show up on hover over button
提问by DragonHeart000
What I want to do is have something like this:
我想要做的是有这样的事情：
<button class="addMore">+</button>
Do an effect like this:
做一个这样的效果：
https://i.gyazo.com/d353b657df39c0e6ff159bfdb713f6a4.mp4
https://i.gyazo.com/d353b657df39c0e6ff159bfdb713f6a4.mp4
when you hover over it.
当你悬停在它上面时。
I've been able to find a few different things for this but none that act as I want it to in the video.
我已经能够为此找到一些不同的东西，但没有一个像我在视频中想要的那样。
回答by Bhargav Chudasama
Use titlein order to display your message:
使用title为了显示您的消息：
<button class="addMore" title="click here">+</button>回答by Mohammad Bayat
.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>回答by Tanner Hallman
For all my React.JSers out there, (and for folks that come after), I was able to achieve this by doing (and using the reactstraplib):
对于我所有React.JS的人（以及后来的人），我能够通过这样做（并使用reactstraplib）来实现这一点：
Usage of Tooltip component
Tooltip组件的使用
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
工具提示.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
The most important parts are the style={{ pointerEvents: 'none' }}on the <Button />element and the nesting of the Button within a <span />
最重要的部分是style={{ pointerEvents: 'none' }}在上<Button />元素和按钮内的嵌套<span />
回答by MoJo
<button type='submit' title='Add New Item'>+</button>回答by kmg
You can set the background color change of button using css as follows,
您可以使用 css 设置按钮的背景颜色变化，如下所示，
.addMore:hover {
background-color: #545454; //desired color code
}
and set the tooltip as <button class="addMore" title="click here">+</button>
并将工具提示设置为 <button class="addMore" title="click here">+</button>
