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

您可以使用

Tooltip Extension

进行修改以实现此目的

<强> JQUERY

$('.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;
}

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

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

1 个答案:

Tooltip Extension