Jquery 悬停显示不同文本引导3？

我有一些导航，必须有一些链接的解释，但它必须在另一个元素，不像弹出窗口或工具提示。当用户将鼠标悬停在该链接上时，它必须是可见的；当用户从该链接上删除mosue时，它必须是删除的；在另一个链接上，不同的文本也必须是可见的，等等

BS3中是否有简单优雅的解决方案，或者必须编写自定义JS：(

这是我的html

 <aside class="left-side-content" role="complementary">      
          <div class="list-group">
            <a href="#" data-description="1" class="list-group-item"><i class="fa fa-folder fa-2x"></i>Add</a>
            <a href="#" data-description="2" class="list-group-item"><i class="fa fa-file fa-2x"></i>Move</a>
            <a href="#" data-description="3" class="list-group-item"><i class="fa fa-upload fa-2x"></i>Delete</a>
          </div>
        </aside>

  <div class="content-explanation">
      <h2>Add</h2>
      <p> Lorem ipsum dolor sit amet, consectetur </p>    
  </div>

这是小提琴

更新

$(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("");
});

---

问题是我认为它可以更短、更好，有什么想法吗？

请参考前面的内容

尝试上一个问题中提到的方法

尝试此解决方案

$(document).on("mouseenter", ".list-group-item" , function(){
    $(".content-explanation").find("h2").html($(this).text());
});

$(document).on("mouseleave", ".list-group-item" , function(){
    $(".content-explanation").find("h2").html("");
});

通过这种方法，您可以将数据内容添加到html中，从而生成动态内容

---

我不知道我会有多少个链接，我也不知道我会有多少描述，我必须用css写下所有这些？？是的，但我不总是只有描述，还有标题

.item:hover a p.new-label span{
 display: none;
}
.item:hover a p.new-label:after{
content: 'ADD';
}

$(document).on("mouseenter", ".list-group-item" , function(){
    $(".content-explanation").find("h2").html($(this).text());
});

$(document).on("mouseleave", ".list-group-item" , function(){
    $(".content-explanation").find("h2").html("");
});

   <aside class="left-side-content" role="complementary">      
      <div class="list-group">
        <a href="#" class="list-group-item" data-content="Lorem ipsum dolor sit amet, consectetur"><i class="fa fa-folder fa-2x"></i>Add</a>
      </div></aside>

.list-group:hover .list-group-item:after{
    content: attr(data-content);
 }