Overlapping elements with tooltips

by TJ VanToll

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/themes/vader/jquery-ui.css">
<span title="Outer">
    <div style="position: absolute; overflow: hidden; height: 50px; width: 10px; top: 150px;" title="Inner">
    </div>
</span>

<p>If you hover over the white portion of the line and wait the native tooltip should show up.</p>

CSS

[title="Outer"] {
    background-attachment: scroll;
    background-color: #DDDDDD;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    border-bottom: 0 solid #BBBBBB;
    border-top: 0 solid #BBBBBB;
    height: 500px;
    width: 10px;
    position: absolute;
    overflow: hidden;
}

[title="Inner"] {
    background-color: white;
}

body { padding: 20px; }
p { position: absolute; left: 10%; }

JavaScript

$('span').tooltip();
$('div').tooltip();