Не пойму как присвоить только определенному классу span

<script type="text/javascript">
$(document).ready(function() {
$(".tooltips").hover(
function() { $(this).contents("span:last-child").css({ display: "block" }); },
function() { $(this).contents("span:last-child").css({ display: "none" }); }
);

$(".tooltips").mousemove(function(e) {
var mousex = e.pageX + 10;
var mousey = e.pageY + 5;
$(this).contents("span:last-child").css({ top: mousey, left: mousex });
});
});
</script>

<style>
span {
display:none;
position:absolute;
z-index:1000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

.tooltip-style1 {
background:#5a85a5 url(im/onebit_47.png) 10px center no-repeat;
color:white;
min-height:30px;
padding:10px 20px 10px 65px;
opacity:0.9;
}

.tooltip-style2 {
background:#363636;
padding:3px;
color:white;
text-align:center;
}

.tooltip-style3 {
background:#e8e8e8;
color:black;
padding:15px;
}
pre {
font-size:10px;
}
</style>

.tooltip-style2.span {background:#363636;padding:3px;color:white;text-align:center;}

<div class='grid_16'><div class='tooltips'>
Здесь текст на который наводить<span class='tooltip-style1'>всплывающее пояснение</span>
</div></div>

<span class='tooltip-style1'>всплывающее пояснение</span>