倒计时结束时的bootstrap工具提示

Question

我的页面会倒计时显示＆＃34;请稍候＆＃34;当它达到0.我想显示带有一些文本的bootstrap工具提示。

＆＃34;请等待＆＃34;文本是由下面的javascript生成的，或者如果用户重新加载页面（并且倒计时后数据库已经更新了 - 我每两分钟运行一次脚本来更新数据库状态）。

当我重新加载页面时，工具提示会很好地显示：

生成的代码是：

<div title="" data-placement="bottom" data-toggle="tooltip" data-original-title="It can take up to two minutes...">
<div data-countdown="Please wait">Please wait</div>

但如果＆＃34;请等待＆＃34;来自javascript，工具提示没有很好地显示：

在这种情况下，生成的代码是：

<div data-countdown="2016-05-14 16:44:21">
<div title="It can take up to two minutes..." data-placement="bottom" data-toggle="tooltip">Please wait</div>
</div>

这是我的javascript：

<script type="text/javascript">
    $('[data-countdown]').each(function() {
    var $this = $(this), finalDate = $(this).data('countdown');   
        $this.countdown(finalDate, function(event) {
            if (event.elapsed) {
                $this.html(event.strftime('<?php echo '<div data-toggle="tooltip" data-placement="bottom" title="'.$this->lang->line('wait_tooltip').'">'.$this->lang->line('pleasewait').'</div>';?>'));
            }
            else {
              $this.html(event.strftime('%D <?php echo $this->lang->line('days');?> %H:%M:%S'));
            }
        });
 });
</script>

如何从javascript中正确显示工具提示？

Answer 1

micmia的意见应该是正确的，让我试着澄清一点。
首先，正如bootstrap文档中所述，For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.此外，我尝试了jsfiddle：https://jsfiddle.net/qbfz6zcu/，如果没有显式初始化，tooltip s将无效（请注意init） js代码被注释，如果你取消它们，工具提示将显示）。不确定您的页面重新加载和工具提示工作部分是如何工作的 这里是对初始化的作用的简要说明：bootstrap的工具提示通过将eventListener添加到“请稍候”部分来工作，因此当您将鼠标悬停在它们上时，事件触发并且您会看到工具提示。我猜你的页面中有一些你没注意到的初始代码，所以无论如何，如果你在页面加载后的某个时候修改你的dom，你必须在每次之后再次初始化你这样做，因为新添加的html元素将没有事件监听器来显示工具提示