jQuery在其容器的右上角放置一個工具提示

Question

這就是我到目前為止所得到的。

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

這是到目前為止我得到的少量JavaScript代碼。 我嘗試使用上下兩個位置（我想它們不會起作用，但是一個人可以做夢，是嗎？）。

這是我所說的進度欄的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

您可以使用

工具提示擴展

經過小修改就可以實現

JQUERY

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

CSS

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

演示http://jsfiddle.net/HeVC9/1/