Make text show up on hover over button - html

Question

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

Answer 1

Use title in order to display your message:
<button class="addMore" title="click here">+</button>

Answer 2

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

Answer 3

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

Answer 4

You can set the background color change of button using css as follows,
.addMore:hover {
background-color: #545454; //desired color code
}
and set the tooltip as <button class="addMore" title="click here">+</button>

Answer 5

For all my React.JSers out there, (and for folks that come after), I was able to achieve this by doing (and using the reactstrap lib):
Usage of Tooltip component
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
The most important parts are the style={{ pointerEvents: 'none' }} on the <Button /> element and the nesting of the Button within a <span />