Question

我尝试使用qTip 2在Zend表单中添加帮助按钮。该按钮是一个简单的图像，我想在单击图像时打开一个弹出窗口。

这是我的代码：

在Booostrap.php中：

protected function _initView() {
    ...
    $view->headLink()
            ->appendStylesheet('/css/jquery/smoothness/jquery-ui-1.10.1.custom.min.css')
            ->appendStylesheet('/css/jquery/jquery.qtip.min.css');
}

protected function _initJQuery() {
    ...
    $view->jQuery()
            ->setLocalPath('/js/jquery/jquery-1.9.1.min.js')                
            ->setUiLocalPath('/js/jquery/jquery-ui-1.10.1.custom.min.js')
            ->addJavascriptFile('/js/jquery.qtip.min.js')
            ->enable()
            ->uiEnable();
}

在我看来：

<?php
    $this->headscript()->appendScript('$(data-tooltip!="").qtip({content: {attr: \'data-tooltip\'}});');
?>
...
<img data-tooltip="thing" src="/images/repo/help-22x22.png"/>

我的浏览器中的渲染结果：

<link href="/css/jquery/smoothness/jquery-ui-1.10.1.custom.min.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/css/jquery/jquery.qtip.min.css" media="screen" rel="stylesheet" type="text/css" >
...
<script type="text/javascript" src="/js/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.qtip.min.js"></script>
...
<script type="text/javascript">
    //<!--
$(data-tooltip!="").qtip({content: {attr: 'data-tooltip'}});    //-->
</script>
...
<img data-tooltip="truc" src="/images/repo/help-22x22.png"/>

这是我想要的。问题是，工具提示没有显示出来。根据Javascript控制台，当我点击图片时，甚至没有触发事件。所以我的想法是错的，但我无法理解为什么。有什么想法吗？

Answer 1

不确定，但您的qtip初始化必须在doc ready：

<?php
   $this->headscript()->appendScript('$(function(){// here qtip code});');
?>

Answer 2

我认为问题在于：$(data-tooltip!="")而不是$('[data-tooltip!=""]')。

另一个问题是您的电话在标签img之前，因此使用InlineScript“而不是headscript

要完成，我认为应该在选择器中精确标记标记（img）。尝试替换

$this->headscript()->appendScript('$(data-tooltip!="").qtip({content: {attr: \'data-tooltip\'}});');

通过

$this->InlineScript()->appendScript('$(\'img[data-tooltip!=""]\').qtip({content: {attr: \'data-tooltip\'}});');

q没有与Zend合作

2 个答案: