Question

我开发了一个bootstrap网站，并希望使用工具提示或popover图像。

但我遇到了失败。工具提示永远不会自定义，它以原始文本形式出现。我不知道为什么。

我停止了我正在做的所有事情并转到http://reecegeorge.com/bootstrap-popovers.html从头开始学习工具提示/弹出窗口。

即使在逐字复制他们的例子后，我也得到了相同的结果。

查看我的输出屏幕截图并请求帮助。

我曾在http://digitex.ovh托管该网站。您可以将其打开并悬停在顶部图片上，这是一种耻辱。您也可以直接检查源代码。

我想知道我做错了什么。

我使用EasyPHP作为本地服务器。（虽然我的工作只是bootstrap + JS）

谢谢

在这里检查两个图像，删除其间的空格并将http：//添加到前面

我。堆。 imgur。 COM / 2sydp。 JPG 一世。堆。 imgur。 COM / Dfyby。 JPG

Answer 1

你绝对可以拥有一个包含任何有效html的弹出窗口。

HTML:

<div class="container">
   <button type="button" class="btn btn-lg btn-danger" 
           data-toggle="popover" title="Popover title">
       Custom Popover (Hover over me)
   </button>

JS:

$(document).ready(function(){
    var options = {
        html: true,
        trigger: 'hover',
        placement: 'bottom',
        content: "<div style='text-align:center;'>
                    <img src='http://placehold.it/200x100'>
                    <div>This is a popover content with image. 
                        it can have any valid html :-)
                    </div>
                  </div>"
    };    
    $('[data-toggle="popover"]').popover(options);
});

这是一个小提琴：

https://jsfiddle.net/callicoder/hvwh75nL/

有关详细信息，请参阅http://getbootstrap.com/javascript/#popovers

Bootstrap工具提示和弹出窗口似乎对我开发的任何东西都没有起作用

1 个答案: