Overlapping elements with tooltips

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 style="position: absolute; padding: 0px; margin: 0px; overflow: hidden; left: 50px; height: 671px; width: 10px; top: 0px; cursor: e-resize;" class="ui-layout-resizer" title="Resize">
    <div style="position: absolute; display: block; padding: 0px; margin: 0px; overflow: hidden;  height: 50px; width: 10px; top: 310px;" title="Close" class="ui-layout-toggler ui-layout-toggler-east ui-layout-toggler-open ui-layout-toggler-east-open">
        <span style="display: block; margin-top: 17px;">
            <div class="ui-icon">
            </div>
        </span>

</div>
</span>
<div style="float:right; width:80%;">Hello, hover over the lighter div that contains the arrow and you will see the "Close" tooltip display. Move the mouse slightly but not enough so that the "Close" tooltip goes away. Notice that the browser style "Resize" tooltip is displayed.</div>

CSS

.ui-layout-resizer {
    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;
}
.ui-layout-toggler {
    background-color: #FFFFFF;
    opacity: 0.6;
}

JavaScript

$('span').tooltip();

$('div').tooltip();