When the mouse hovers over an element I want to display a small snippet of text for example "Get Info"

Question

So I have my button below, styled with CSS, and already declared as div in the html file. When the mouse hovers over it, I want to display a small snippet of text, e.g. "Get Info".

I tried selector #GetInfo :hover { but it changed all the style and position of my button.

How can I achieve this?

#GetInfo{

    cursor: pointer;
    width: 33.2px;
    height: 33.2px;
    display: inine-block;
    z-index:1;
    position: absolute;
    background-color: rgba(219 ,63,63,.5);
    text-align: center;
    font-size:23px;
    color: white;
    top:19px;
    right:19px;
}

Please post the whole code so we can help you with the problem. — Ionut Necula, Jan 04 '17 at 15:36
Do you mean that you want that the current text of the div button changes or a hover text like with a `title` attribute? — Smort, Jan 04 '17 at 15:38
Possible duplicate of [How to add a tooltip to a div](http://stackoverflow.com/questions/7117073/how-to-add-a-tooltip-to-a-div) — Hywel Rees, Jan 04 '17 at 16:05

score 0 · Answer 1 · answered Jan 04 '17 at 15:45

0

There is a title attribute to almost every HTML element. It shows a text while you hover over the element. Try this:

    <input type="button" value="Button" title="I wonder what this red button do ..." />

answered Jan 04 '17 at 15:45

Taysumi

291
2
16

score 0 · Accepted Answer · answered Jan 04 '17 at 16:01

Is that what you want?

#getInfo {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

#getInfo .yourTooltip {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

#getInfo .yourTooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

#getInfo:hover .yourTooltip {
    visibility: visible;
    opacity: 1;
}

<html>
<body>
<h1>Pass your mouse over the text below</h1>
<div id="getInfo">Your content goes here<span class="yourTooltip">Get info</span>
</div>
</body>
</html>

When the mouse hovers over an element I want to display a small snippet of text for example "Get Info"

2 Answers2