Twitter bootstrap 3 引导程序3.1-工具提示仅显示在底部位置

我在引导工具提示方面有点麻烦。它只在底部显示。 HTML代码：

 <div class="col-md-6 col-sm-6 col-xs-12 portfolio-similar">
     <h3>Similar Products</h3>
     <a href="#"><img class="about-me-portfolio" src="images/about/01.jpg" data-toggle="tooltip" data-placement="top" title="Product 1"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/02.jpg" data-toggle="tooltip" data-placement="top" title="Product 2"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/03.jpg" data-toggle="tooltip" data-placement="top" title="Product 3"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/04.jpg" data-toggle="tooltip" data-placement="top" title="Product 4"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/05.jpg" data-toggle="tooltip" data-placement="right" title="Product 5"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/06.jpg" data-toggle="tooltip" data-placement="left" title="Product 6"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/07.jpg" data-toggle="tooltip" data-placement="bottom" title="Product 7"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/08.jpg" data-toggle="tooltip" data-placement="bottom" title="Product 8"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/03.jpg" data-toggle="tooltip" data-placement="bottom" title="Product 9"></a>
     <a href="#"><img class="about-me-portfolio" src="images/about/05.jpg" data-toggle="tooltip" data-placement="bottom" title="Product 10"></a>
</div>

---

我尝试添加位置作为选项，但没有任何改变。我还尝试删除数据放置，但没有结果。这是什么样的黑色魔法？

你的HTML格式正确吗？有时，未关闭的元素可能会导致UI显示不正确。仔细检查后，所有内容都已就绪。运行HTML，查看是否有错误返回。我看到的一件事是你的

。一切都井然有序。没有必要关闭img标签（因为HTML5）。我不知道HTML5是这样的。我用一个工作示例创建了一个JSFIDLE：

 $("[data-toggle='tooltip']").tooltip();