Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<base href="http://docs.jquery.com" />
<script src="http://code.jquery.com/jquery-1.3.js"></script>
​
<style>
​
  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }
  
</style>
</head>
<body>
<ul>
    <li data-tooltip="fdsgdfgdfg cvgbdfghghf"> Go to the store</li>
    <li>pick up dinner</li>
    <li data-tooltip="bbbb">Debug crash</li>
    <li data-tooltip="aaaaa">Take a jog</li>
  </ul>
​
</body>
</html>
 
.tooltip{
  position:absolute;
  top:-15px;
  background-color:#333;
  color:#fff;
  padding:5px;
  border-radius:5px;
}
 
​
   $(document).ready(function(){
​
  $(":[data-tooltip]").hover(function(){ 
    $('.tooltip').remove();
    $(this).css('position','relative');
    var $toolTiptext = $(this).attr("data-tooltip");
     $(this).append("<div class='tooltip'>"+$toolTiptext +"</div>");          
   }, function(){
       $(this).css('position','');
       $('.tooltip').remove();
});
​
  });
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers