Bootstrap 可扩展侧边栏元素答案

【问题标题】：Bootstrap Expandable Sidebar ElementBootstrap 可扩展侧边栏元素
【发布时间】：2014-08-01 17:36:38
【问题描述】：

我的侧边栏看起来有点像本网站的侧边栏：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>

我希望能够单击它并以最简单的形式在元素右侧获得一个弹出框。

谢谢

【问题讨论】：

标签： javascript html css twitter-bootstrap popover

【解决方案1】：

使用一点 jQuery，它也适用于链接。

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

检查这个小提琴：http://jsfiddle.net/HsZ9q/5/

【讨论】：