Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  <style>
carticle, aside, figure, footer, header, hgroup, 
menu, nav, section { display: block; }
p {
  font-family: Arial, sans-serif;
  margin: 200px auto;
  width: 200px;
}
button[title]:link, button[title]:visited {
    position: relative;
    text-decoration: none;
    border-bottom: solid 1px;
  display: inline-block;
}
button[title]:before {
    content: "";
    position: absolute;
    border-top: 20px solid #0090ff;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    visibility: hidden;
    top: -18px;
    left: -26px;
}
button[title]:after {
    content: attr(data-tooltip);
    position: absolute;
    color: white;
    top: -35px;
    left: -26px;
    background: #0090ff;
    padding: 5px 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    white-space: nowrap;
    visibility: hidden;
}
button[title]:hover:before, button[title]:hover:after {
    visibility: visible;
    -moz-transition: visibility 0s linear .3s;
}
    </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet <button title="This is a pure CSS tooltip.  Multiline <br />Hello">hover over this link</button> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim <a href=”#” data-tooltip="This is a pure CSS tooltip">hover over this link</a> ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers