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]
<div id="demo">
    <img src="http://static.flowplayer.org/tools/img/photos/1.jpg"
         title="A must have tool for designing better layouts and more intuitive user-interfaces."/>
    <img src="http://static.flowplayer.org/tools/img/photos/2.jpg"
         title="Tooltips can be positioned anywhere relative to the trigger element."/>
    <img src="http://static.flowplayer.org/tools/img/photos/3.jpg"
         title="Tooltips can contain any HTML such as links, images, forms, tables, etc."/>
    <img src="http://static.flowplayer.org/tools/img/photos/4.jpg" style="margin-right:0px"
         title="There are many built-in show/hide effects and you can also make your own."/>
</div>
~~~

And initialize the ETooltip widget

~~~
[php]
<?php
    $this->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]
<form id="myform">
    <input type="textfield" title="The username." />
    <input type="textfield" title="Password of user." />
    <input type="submit" title="Submit button." />
</form>
~~~
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]
<?php
    $this->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.