qTip not working with Zend

Question

I'm trying to add a help button in a Zend form using qTip 2. The button is a simple image, and I would like to open a pop-in when the image is clicked.

Here my code:

in 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();
}

In my view:

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

And the rendered result in my browser:

<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"/>

which is what I wanted to get. Problem is, the tooltip doesn't show up. Not even is an event fired when I click on the picture, according to the Javascript console. So my idea i wrong, but I can't understand why. Any idea?

Answer 1

I Think that the problem is here: $(data-tooltip!="") instead of $('[data-tooltip!=""]').

An other problem is your call is before the tag img so use InlineScript ìnstead of headscript

To Finish, I think should precise de name of the tag (img) in the selector. Try to replace

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

By

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

Answer 2

Not sure but your qtip initialization has to be in doc ready:

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