https://github.com/dmtrs/etooltip

Yii framework extension to support jQuery Tooltip.
https://github.com/dmtrs/etooltip

Last synced: 22 minutes ago
JSON representation

Yii framework extension to support jQuery Tooltip.

• Host: GitHub
• URL: https://github.com/dmtrs/etooltip
• Owner: dmtrs
• Created: 2011-03-13T13:20:22.000Z (almost 14 years ago)
• Default Branch: master
• Last Pushed: 2011-03-13T17:47:21.000Z (almost 14 years ago)
• Last Synced: 2024-11-09T07:53:58.137Z (about 2 months ago)
• Homepage:
• Size: 154 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README

Awesome Lists containing this project

README

        
ETooltip

--------

- Version: 0.1

- Author:  [Dimitrios Mengidis](http://www.github.com/dmtrs/)

- jQuery:  [Tooltip](http://flowplayer.org/tools/demos/tooltip/index.html) 

###Install

Extract the zip file under the extension folder and should look like.

~~~

    ./webapp/protected/extension/ETooltip

~~~

###Use

In your view file add your images

~~~

[html]



    

    

    

    



~~~


And initialize the ETooltip widget

~~~

[php]

widget('ETooltip', array("selector"=>"#demo img[title]"));

?>

~~~

###Properties

Available options of extensions:

- selector, string, the jquery selector. **Required**

- tooltip,  array,  the jquery tooltip plugin options. Optional

- image,    string, the image file name for the backround (default: black\_arrow.png ). Optional

####**selector** property 

#####Form example

The magic **selector** is the only required property. I call it magic because it let you work with anything you like. So imagine instead of images

there was a form.

~~~

[html]

    

    

    

~~~

I can take a tooltip, with content the title attribute value, if you simple set selector to:

~~~

[php]

...

    "selector"=>"#myform :input",

...  

~~~

####**tooltip** property

The [tooltip configuration](http://flowplayer.org/tools/tooltip/index.html#configuration) can be initialized by tooltip attribute like:

~~~

[php]

widget('ETooltip', array("selector"=>"#demo img[title]",

        "tooltip"=>array(

            "opacity"=>1,

            "position"=>"bottom center",

        ),

    ));

?>    

~~~

####**image** property

Image is the file name of the background image of the tooltip, as mentioned before. The image must be under the 

~~~

    ./webapp/protected/extension/ETooltip/images/

~~~

where are all available images you can use.