Twitter Bootstrap Tooltip (PHP) 在 Wordpress 中不起作用


Twitter Bootstrap Tooltip (PHP) not working in Wordpress

我正在尝试使用Twitter引导弹出框/工具提示,但我在控制台中收到以下错误:

Uncaught TypeError: Object #<Object> has no method 'popover'

我的函数文件中有以下内容来包含文件,这些文件可以在源代码中看到,并在单击时直接指向正确的脚本:

add_action('wp_enqueue_scripts','dcr_enqueue_scripts');
if(!function_exists('dcr_enqueue_scripts')):
function dcr_enqueue_scripts(){
    wp_register_script('tooltip',get_template_directory_uri().'/js/bs-tooltip.js','jquery');
    wp_register_script('popover',get_template_directory_uri().'/js/bs-popover.js',array('jquery','tooltip'),'1.0');
    wp_enqueue_script('tooltip');
    wp_enqueue_script('popover');
}
endif; 

以下元素需要弹出框:

<th><span>Description:</span><img class="popoverthis" src="<?php bloginfo('template_url')?>/images/info.png" data-content="This is the content" title="Title"></th>

而页面上包含的调用弹出函数的jQuery是这样的:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('.popoverthis').popover({
        placement: "bottom"
    });
});

关于解决这个问题的任何想法将不胜感激。

我看不到任何对 $.noConflict() 的调用;

http://api.jquery.com/jQuery.noConflict/

我在网站关闭之前从控制台尝试了jQuery('.popoverthis').hide(),结果相同。

要检查的几件事:

  • 页面加载顺序 - 您的弹出窗口是否在调用 jQuery 或jquery.popover.js插件之前执行?

如果这是问题,则必须提高/降低enque脚本的优先级,如下所示:

add_action('wp_enqueue_scripts','dcr_enqueue_scripts', **5**); // default is 10

  • 你有正确的jQuery版本吗(WordPress捆绑包一个,它有时可能比外部脚本所需的旧)?

  • 打开 firebug/Web 检查器并手动运行:
    jQuery('.popoverthis').popover({ placement: "bottom" });

查看出了什么问题

更新:还有更多可能出错的事情(这是如何解决问题的列表):

  • 您在网站上包含两个jQuery(可能是通过另一个插件) - 1.4.2 在 1.7.2 之后,破坏了基本的引导 javascript。
  • 您缺少此插件所需的引导 CSS 信息。它实际上有效,但它在网站底部显示工具提示信息,因为 CSS 不是为了让它看起来很漂亮。

解决方案:使用一个独立的popovover插件,如crowdfavorite的这个: https://github.com/crowdfavorite/jquery-popover 并包含其CSS文件。

(你也可以拉进引导程序的CSS,但它可能会破坏你的网站CSS