[英]Twitter Bootstrap Tooltip (PHP) not working in Wordpress
I am trying to use the Twitter Bootstrap Popover / Tooltip but I am getting the following error in the console: 我正在尝试使用Twitter Bootstrap Popover / Tooltip,但在控制台中出现以下错误:
Uncaught TypeError: Object #<Object> has no method 'popover'
I have the following in my functions file to include the files, which can be seen in the source and direct to the correct scripts when clicked: 我的函数文件中包含以下文件,这些文件可以在源代码中看到,并在单击时直接定向到正确的脚本:
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;
With the following element expecting the popover: 带有以下元素的弹出框:
<th><span>Description:</span><img class="popoverthis" src="<?php bloginfo('template_url')?>/images/info.png" data-content="This is the content" title="Title"></th>
And the jQuery included on the page to call the popover function is this: 页面上包含的用于调用popover函数的jQuery是这样的:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.popoverthis').popover({
placement: "bottom"
});
});
Any ideas on resolving this issue would be appreciated. 解决此问题的任何想法将不胜感激。
Few things to check for: 几件事要检查:
jquery.popover.js
plugin is being called? jquery.popover.js
插件之前执行弹出窗口? If this is issue, you'll have to bump/lower priority of your enque script as in: 如果出现此问题,则必须提高/降低enque脚本的优先级,如下所示:
add_action('wp_enqueue_scripts','dcr_enqueue_scripts', **5**); // default is 10
do you have correct version of jQuery (wordpress bundles one and it sometimes can be older than is required for external scripts)? 您是否具有正确的jQuery版本(wordpress捆绑了一个版本,有时它可能比外部脚本所要求的版本更旧)?
Open firebug/web inspector and manually run: 打开firebug / web检查器并手动运行:
jQuery('.popoverthis').popover({ placement: "bottom" });
To see what goes wrong 看看出了什么问题
Update : there are few more things that can go wrong (and this is list how to fix your problem): 更新 :还有几处可能出错的问题(这是解决问题的方法):
Solution : use a standalone popovover plugin like this one by crowdfavorite: https://github.com/crowdfavorite/jquery-popover and also include its CSS files. 解决方案 :使用一个独立的popovover插件,例如:crowfavorite: https : //github.com/crowdfavorite/jquery-popover ,并包括其CSS文件。
(you could also pull in bootstrap's CSS but it will probably break your sites CSS ) (您也可以拉入bootstrap的CSS,但这可能会破坏您的网站CSS )
I can't see any call to $.noConflict(); 我看不到对$ .noConflict()的任何调用;
http://api.jquery.com/jQuery.noConflict/ http://api.jquery.com/jQuery.noConflict/
I tried jQuery('.popoverthis').hide() from the console with the same result, just before the site went down. 在站点关闭之前,我从控制台尝试了jQuery('。popoverthis')。hide(),结果相同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.