Bootstrap可扩展的边栏元素

Question

我有一个边栏，看起来有点像这个网站的边栏:http://scotch.io/

如果将鼠标悬停在教程上，它将展开元素，并提供可供选择的项目菜单。

我想做的是得到它，所以如果我点击其中一个元素，它会显示一个很好的弹出窗口，而不是展开整个侧边栏。有些东西可以缓解，但如果它只是显示，那也很好。

我看了bootstrap 3弹出窗口，但它似乎只与按钮工作，我使用的是这是我的列表元素之一:

<li class="sidebar-available-rooms" data-container="body">
    <a class="fa fa-comments" id="sidebar-icon-comments" data-toggle="popover" data-placement="right"></a>
    <span class="sidebar-text" id="sidebar-available-rooms-text">Available Rooms</span>
</li>

我将能够点击它，在最简单的形式，得到一个弹出窗口在元素的右边。

谢谢

Answer 1

使用一小块jQuery，它也可以用于链接。

$("[data-toggle=popover]").popover({html:true})

检查此提琴:http://jsfiddle.net/HsZ9q/5/