giving the background for hover title text

Question

may be it's a simple but i didnt find the solution

i wrote the following code.

<html>
<head>
<style>
span.dropt {
   border-bottom: thin dotted;
   background:white;
}
</style>
</head>
<body>
   <span class="dropt" title="Title for the pop-up">Hot Zone Text
   </span>
</body>
</html>

here,what i want is,i want to give the background color/image for "Title for the pop-up" when hover the cursor.i tried but i didnt get the solution.can any one help me...

it's not possible with CSS. You better look for a tooltip plugin — Zoltan Toth, Jul 24 '12 at 14:35
You can't do it simply using html and css, you'll need jquery to do this — Mr. Alien, Jul 24 '12 at 14:35

Johndave Decano · Answer 1 · 2012-07-24T15:05:49.920

Jquery "tooltip" is the right solution for it. Here are some resources for you:

But if you wanna make one your self. Using, jquery try to append get the title attribute of the element then append it to the span when the event is hover.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.dropt').hover(function(){
        var title = $(this).attr('title');
        $(this).append('<span class="tooltip">'+title+'</span>');
    },function(){
        $('.tooltip',this).fadeOut('slow').remove();
    });
});
</script>
<style>
    .tooltip { 
        display:block; 
        padding:5px;
        background:black; 
        color:white;
        min-width:200px;
        font-size:11px;
        line-height:25px;
        text-align:center;
        position:absolute;
        top:-50px;
        border:none;
        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
    }
    .dropt { 
        position:relative; 
        display:block;
        cursor:pointer;
    }
</style>
</head>
<body>
<br><br/>
<span class="dropt" title="Title for the pop-up">Hot Zone Text</span>
</body>
</html>

sorry,i want ro use tooltip plugin,can any one tell me how can i use this tooltip plugin to hover the title text for background — lucky, Jul 24 '12 at 19:00

giving the background for hover title text

1 Answers1