You are essentially asking two different questions here.
Shortening the name
This has been answered a couple of times already, but the most easy syntax would be:
strlen($name, 0, 10);
This only shows the first 10 characters. The "0" stands for the start.
I'm hoping you're using objects for this, as you can easily add a method to your model and use something like:
$user->getShortname();
This would make doing the second part a lot easier as well.
Showing the tooltip with the full name
Depending on your structure and architecture; you can easily have the original full name and the shortened name living together in the same object or in different variables.
Depending on your choice of tools (jQuery, any additional plugins you want to use, etc.), you can easily add a tooltip plugin. jQuery-UI has a nice one if I may suggest one.
Adding it depends on your choice of tools, it varies how difficult it would be to add a tooltip. With the jQuery-UI version it's as easy as:
<span class="tooltip" title="<?=$user->getFullname()?>"><?=$user->getShortname()?></span>
And add the following Javascript to your page:
$(".tooltip").tooltip();
That should work just fine :-). If you have any more specific questions for one of these parts; either update your original post or create a new question.