Search code examples
javascripthtmlcsstooltip

Can't make a css tooltip only with a

I have a problem making a css tooltip, I watched the tutorial on http://www.menucool.com/tooltip/css-tooltip but I didn't understand the css code.

What i did on my Javascript class, is create a new image and calling it getSclass() to apply the css. On the code that the tutorial provided, I didn't understand where I should put the html part, and how about the a.tooltip (does that mean that I have the give my image an special ID?) What i have to do then if I should work only with a Javascript class (when I call the img) and a css file. I also made a call for settooltiptext(), but I think it is not the case here!

Solution

  • You can do this via CSS itself. Although there are lot of plugins, lets do something like this. First, you need a hovering element, say in this case, a link.

    <a href="#">Hover Me!</a>

    Next should be the tool tip. We can have a <span> for now and put it inside the link.

    <a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a>

    Now comes the real CSS part.

    a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}

    Snippet

    a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}
    <a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a>

    This is just one of a pure CSS solution. You can see the working fiddle here.

    However, there are a lot of plugins, which keep this concept as base and work for hover-cards and tool tips. Some good examples include: