title: showing text under a circle when hovering over the circle
body: <p>I need to have text underneath the circle when I hover over it. I have to use html, css and javascript. I'm not that good with javascript so I know thats the problem. Any help would be appreciated and if there is a simpler way to do the javascript code that would be good too!  </p>
  
  <p>Here is my html code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link type="text/css" rel="stylesheet" href="style.css"/&gt;
      &lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
      &lt;body&gt;
  
  &lt;p&gt;I often scribble in the sand&lt;/p&gt;
  &lt;p&gt;The words I find so hard to say&lt;/p&gt;
  &lt;p&gt;And hope the wind will come along&lt;/p&gt; 
  &lt;p&gt;And blow them all your way.&lt;/p&gt;
      &lt;div data-bind="event: { mouseover: EnableDetails, mouseout: DisableDetails   
  }"&gt;&lt;/div&gt;
  &lt;p data-bind="visible: DetailsViewable(), text: AuthorName"&gt;&lt;/p&gt;         
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here is my css code</p>
  
  <pre><code>div {
  display: inline-block;
  margin-left: 5px;
  height: 100px;
      width: 100px;
      border-radius: 100%;
      border:2px solid black;
      background-color: black;
      }
  </code></pre>
  
  <p>here is my javascript code:</p>
  
  <pre><code>var ViewModel = function() {
  var self = this;
  self.AuthorFirstName = ko.observable("Joe");
  self.AuthorLastName = ko.observable("Blow");
  self.AuthorName = ko.computed(function(){
      return self.AuthorFirstName() + " " + self.AuthorLastName();
  });
  self.DetailsViewable = ko.observable(false);
  self.EnableDetails = function() {
      self.DetailsViewable(true);
  };
  self.DisableDetails = function() {
      self.DetailsViewable(false);
  };
  };
  
  var viewModel = new ViewModel();
  ko.applyBindings(viewModel);
  </code></pre>