title: On hover show diferrent text bootstrap 3?
body: <p>I have some navigation that has to have some explanation of the link but it has to be in another element, not like popup or tooltip. It has to be visible when user hover over that link, and removed when user remove mosue from that link, also different text has to be visible on another and etc.</p>
  
  <p>Is there is simple elegant solution in BS3, or custom JS must be written :(</p>
  
  <p>Here is my html</p>
  
  <pre><code> &lt;aside class="left-side-content" role="complementary"&gt;      
            &lt;div class="list-group"&gt;
              &lt;a href="#" data-description="1" class="list-group-item"&gt;&lt;i class="fa fa-folder fa-2x"&gt;&lt;/i&gt;Add&lt;/a&gt;
              &lt;a href="#" data-description="2" class="list-group-item"&gt;&lt;i class="fa fa-file fa-2x"&gt;&lt;/i&gt;Move&lt;/a&gt;
              &lt;a href="#" data-description="3" class="list-group-item"&gt;&lt;i class="fa fa-upload fa-2x"&gt;&lt;/i&gt;Delete&lt;/a&gt;
            &lt;/div&gt;
          &lt;/aside&gt;
  
    &lt;div class="content-explanation"&gt;
        &lt;h2&gt;Add&lt;/h2&gt;
        &lt;p&gt; Lorem ipsum dolor sit amet, consectetur &lt;/p&gt;    
    &lt;/div&gt;
  </code></pre>
  
  <p>In class content-explanation different text has to be shown on hover on links, now it is Add, when i hover on Move it has to say Move and again different text</p>
  
  <p>I have made eleagnt solution so saf, the problem is when mouse leave ASIDE i must hidd that desription, here is update fiddle</p>
  
  <pre><code>var targetDescription = $('[data-description]');
  targetDescription.on("mouseenter", function () {
      var linkHeading = $(this).text();
      var linkDescritpion = $(this).attr("data-description");
      $('.content-explanation h2').text(linkHeading);
      $('.content-explanation p').text(linkDescritpion);
  });
  </code></pre>
  
  <p>Here is working fiddle
  <a href="http://jsfiddle.net/52VtD/9274/" rel="nofollow">http://jsfiddle.net/52VtD/9274/</a></p>
  
  <p>Update</p>
  
  <pre><code>$(document).on("mouseenter", "[data-description]", function () {
      var linkHeading = $(this).text();
      var linkDescritpion = $(this).attr("data-description");
      $('.content-explanation h2').text(linkHeading);
      $('.content-explanation p').text(linkDescritpion);
  });
  $(document).on("mouseleave", "[data-description]", function () {
      $('.content-explanation h2').text("");
      $('.content-explanation p').text("");
  });
  </code></pre>
  
  <p>The problem is i think it can be shorter function and better, any idea?</p>