jquery在其容器的右上角放置一个工具提示

Question

到目前为止，我得到了这样的结果。

$(document).ready(function () {
$('.progress-bar').tooltip({ placement: 'right' });
$('.carousel.slide').carousel({ interval: false });
$('.progress-bar').tooltip('show', placement('top'));
});

这是到目前为止我得到的javascript小代码。我试着用top，把两者都留着放置(我以为它们不起作用，但男人可以做梦，嗯？)。

这是我为上述进度条创建的html。

<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 55%" data-title="55%">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h6>Graphic Design</h6>
<div class="progress" data-toggle="tooltip" data-original-title="70%">
<div class="progress-bar" role="progressbar" style="width: 70%">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h6>WordPress Development</h6>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h6>HTML & CSS</h6>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%">
<span class="sr-only">60% Complete</span>
</div>
</div>

我想把工具提示放在每个进度条的末尾。正如我已经提到的，我想我会结合两个位置选项，但似乎我不能给出多个参数。还有，我该怎么做才能使它们永久显示(目前它们只显示在鼠标悬停时)。我设法让它们在文档加载时显示，但当我悬停在它们上面时，它们就消失了，只是在悬停时再次出现。我该怎么做才能永久显示它们？

Answer 1

您可以使用

工具提示扩展

通过一个小的修改来实现这个

查询

$('.progress-bar')
.tooltip({ placement: 'top-right', trigger: 'manual' })
.tooltip('show');
$('.progress-bar')
.next('.tooltip')
.find('.tooltip-arrow')
.addClass('toolright');
$('.carousel.slide').carousel({ interval: false });

CSS

.toolright {
bottom: -5px;
right: 12px;
border-width: 5px 5px 0;
border-top-color: black;
}

Demohttp://jsfiddle.net/HeVC9/1/