Tool tip going out of screen on mobile devices

[johnsmith153]

I have this, which isn't the best code. Maybe someone can tidy it up a bit.

 

The main thing I need though is so the tooltip does't go out of the screen on a mobile device.

 

I've tried a few obvious things but no luck.

 

a.tooltip {
position:relative;
text-decoration:none;
cursor: pointer;
}

a.tooltip span {
display: none;
top: 5px; left:30px;
width:600px;
    padding: 10px;
    padding-left: 15px;
    background:#ffffff; border:2px solid #cccccc; color:black;
    z-index: 1;
}

a.tooltip-left span {
left:-635px;
}

a.tooltip-above span {
top:-400px;
}


a.tooltip:hover span {
    display: inline;
    position: absolute;
}

<a class="tooltip"><img src="tooltip.png" align="top" alt="" /><span>
The tooltip text goes here 
</span></a>