Keep tooltip (title attribute) updated while mouseover

Question 1

I wouldn't try and update the native browser tooltip if I were you, I would try something more custom like this:

  <html>
    <head>
    </head>
    <style>

      #last-update-title{
        position: relative;
        margin-top: 20px;
      }

      #tooltip{
        position: absolute;
        top: -20px;
        display:none;
      }

      #tooltip.show{
        display:inherit;
      }

    </style>
    <body>

      <div id="last-update-title" onmouseover="showToolTip('show');" onmouseout="showToolTip('');">
        Some Text here
        <div id="tooltip"></div>
      </div>

    </body>
    <script type="text/javascript">

      function showToolTip(show){
        document.getElementById('tooltip').className = show;
      }

      var startDate = new Date();
      setInterval(function(){
          document.getElementById('tooltip').innerHTML = customFormatTimeSecondsAgo(startDate);
      }, 1000)

      function customFormatTimeSecondsAgo(date) {
          var result = Math.floor((new Date() - date) / 1000);
          if (result <= 1) return "Updated: Just now";

          return "Updated: " + result + " seconds ago";
      };


    </script>
  </html>

This avoids problems around how different browsers render tooltips, and also will get around the tooltip not updating dynamically as you want it to.

Question 2

If you want to have a something that acts similar to a clock i recommend using the interval function, like so:

<li id="last-update-title" onmouseover="function(){setInterval(updateTimeToolTip(), 3000);}">Some Text here</li>

Question 3

Try this.

var updateInterval;
$(function() {
    $('#last-update-title').on('mouseover', function() {
        updateInterval = setInterval(updateTimeToolTip, 10);
    });

    $('#last-update-title').on('mouseout', function() {
        clearInterval(updateInterval);
    });
});