CODEWITHSUNDEEP
htmlcss
DragonHeart000
DragonHeart000

Reputation: 1106

Make text show up on hover over button

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.

Upvotes: 77

Views: 217969

Answers (7)

Tsunami014
Tsunami014

Reputation: 1

Well if you want to have a hover text (tooltip), the one everyone says here is to add a title param to the HTML like this:

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

But that does not provide any styling options.

If you want to style it, you will have to make your own tooltips:

  1. Put the button in a parent div
  2. Make an element inside the div (can be anything; e.g. p, span, div)
  3. Add some css so it only appears when hovering over the button

Here is an example with transition animation:

.tooltip-text {
  background-color: blue;
  border-radius: 10px;
  visibility: hidden;
  text-align: center;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.tooltip-container {
  position: relative;
  display: inline-block;
}
<br><br><br>
<div class="tooltip-container">
  <button>+</button>
  <div class="tooltip-text">Custom Tooltip Text</div>
</div>

Of course, you will need to edit it to fit your application, but this is the basics of what you can do!

Upvotes: 0

Mikkel Olsen
Mikkel Olsen

Reputation: 1

If you don´t want to use the title attribute you can do it with HTML and CSS only.

Like this example:

HTML

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

CSS

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

Example on codepen: https://codepen.io/SitefactoryDK/pen/eYLQKvm

Upvotes: 0

MoJo
MoJo

Reputation: 49

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

Upvotes: 3

hallmanitor
hallmanitor

Reputation: 318

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

Upvotes: 0

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7171

Use title in order to display your message:

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

Upvotes: 159

Mohammad Bayat
Mohammad Bayat

Reputation: 171

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

Upvotes: 3

kmg
kmg

Reputation: 519

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>

Upvotes: 0

Related Questions