Question

15

Displaying some text when mouse is over an input text box

rated 0 times [ 21] [ 6] / answers: 1 / hits: 44285 / 11 Years ago, fri, january 17, 2014, 12:00:00

I have an input text box, on which I would like to display some text area when the user's mouse get over it, giving to him informations on the text to enter.
here is my HTML code :

<html>

<body>

<style type=text/css>

.mouseover 

{







}



</style>

<span onmouseover=this.classname='mouseover' onmouseout=this.classename=''></span>

<input id=mybox type=text />



</body>

</html>

What is the best CSS trick that would help to do that ?
Thank you for help in advance.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josefn

Add To Favorites

Follow

Total Points: 251

Total Questions: 93

Total Answers: 84

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

josefn questions

1 Vue 3: How to update component props value correctly using composition api?

Thu, Nov 11, 21, 00:00, 3 Years ago

1 Does Array.find method return a copy or a reference of the matched element form given array?

Sun, Jun 21, 20, 00:00, 4 Years ago

1 How to get the modulus and exponent of an RSA public key in Node.js

Wed, Apr 29, 20, 00:00, 4 Years ago

1 How to use setTimeout with a Loader

Sat, Mar 28, 20, 00:00, 4 Years ago

1 How do I implement Socket.IO in an electron app?

Fri, Feb 21, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jakobarmandr · Accepted Answer

You can do all of this with CSS. Play around with CSS triangles for the tooltip but what you're mainly looking for is to use the :hover pseudo-class. No need for Javascript.

.input {

    position: relative;

}



.tooltip {

    display: none;

    padding: 10px;

}



.input:hover .tooltip {

    background: blue;

    border-radius: 3px;

    bottom: -60px;

    color: white;

    display: inline;

    height: 30px;

    left: 0;

    line-height: 30px;

    position: absolute;

}



.input:hover .tooltip:before {

    display: block;

    content: ;

    position: absolute;

    top: -5px;

    width: 0; 

    height: 0; 

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-bottom: 5px solid blue;

}

http://jsfiddle.net/v8xUL/1/