我正在使用 jquery2 处理 qtip2,并且基于源代码,工具提示实际上是在页面 DOM/HTML 的末尾创建和添加的,如下所示:
<div id="qtip-38" class="qtip qtip-default qtip-pos-tl" tracking="false" role="alert" aria-live="polite" aria-atomic="false" aria-describedby="qtip-38-content" aria-hidden="true" style="display: none;"><div class="qtip-tip" style="background-color: transparent !important; border: 0px !important; height: 8px; width: 8px; line-height: 8px;"><canvas style="background-color: transparent !important; border: 0px !important;" height="8" width="8"></canvas></div><div class="qtip-content" id="qtip-38-content" aria-atomic="true">Hello</div></div>
以下是锚点的呈现方式(DOM/HTML 更改为):
<a href="/wiki/Werner_Heisenberg" data-hasqtip="true" aria-describedby="qtip-38">Werner Heisenberg</a>
但是当我将鼠标悬停在链接上时,什么都没有显示。
我的原始代码;
<a href="/wiki/Werner_Heisenberg">Werner Heisenberg</a>
有什么问题?
我还在使用 twitter 引导程序(包含所有 javascript 插件)和 laravel4 刀片模板系统。
我从http://qtip2.com/v/stable/下载了我的 qtip2,并使用了 css 和 js 的缩小版本。
我检查了我的源代码,它正确引用了 css 和 js 文件。
我的标题:
{{ HTML::style('/bootstrap/css/bootstrap.css') }}
{{ HTML::style('/bootstrap/css/bootstrap-responsive.css') }}
{{ HTML::style('/js/qtip2/jquery.qtip.min.css') }}
{{ HTML::style('/js/datatables/css/jquery.dataTables.css') }}
{{ HTML::style('/bootstrap/css/style.css') }}
我的 JS 在下面找到了所有内容:
{{ HTML::script('//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js') }}
{{ HTML::script('/bootstrap/js/bootstrap.js') }}
{{ HTML::script('/js/qtip2/jquery.qtip.min.js') }}
{{ HTML::script('/js/datatables/jquery.dataTables.min.js') }}
{{ HTML::script('/js/initialize.js') }}
初始化.js:
// Create the tooltips only on document load
$(document).ready(function()
{
//this actually works with the carousel of twitter bootstrap
$('#myCarousel').carousel({
interval: 5000
});
$('#myCarousel').carousel('cycle');
//this gets called too because the tooltip code is added to the site but it just doesn't show up when i hover on the link
$('a').qtip({
content: 'Hello'
});
});