我在使用bootstrap工具提示时遇到了一些麻烦。它只显示在底部。 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>
JS：
$("[data-toggle='tooltip']").tooltip();
我尝试添加展示位置作为选项，但没有任何更改。我也尝试删除数据放置，但没有结果。这是什么样的黑色巫术？