It's going to be easier if you post links to your site so people can view the page source instead of just a screenshot. Why? Because you've customised the theme, therefore suggestions people can provide may not work as you may have changed the html.
Anyway - based on the assumption that you haven't modified the template, then edit core -> front -> global -> navBarItems
Find (there are 2 instances of this, and the ... is there to indicate that there is more code on the 2 lines you will find):
<a href="{{if $item->link()}}...
Add the following after the opening "<a ":
title="{$item->title()}"
to make:
<a title="{$item->title()}" href="{{if $item->link()}}...
Save the template.
That's the basic title on hover.
If you want it a little different then add this too:
data-ipstooltip
to make:
<a title="{$item->title()}" data-ipstooltip href="{{if $item->link()}}...
Save the template.
Can you do this with CSS? Potentially, but as the 'title' is an attribute of an html element then it should be added in the html code, not using css.