CODEWITHSUNDEEP
javascripthtmlcss
Lira
Lira

Reputation: 25

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

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

Upvotes: 1

Views: 951

Answers (2)

Ala Eddine JEBALI
Ala Eddine JEBALI

Reputation: 7891

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>

Upvotes: 0

Habbi
Habbi

Reputation: 301

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

Upvotes: 0

Related Questions