Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Yii framework extension to support jQuery Tooltip.
branch: master

update README

latest commit 35654bd494
server@dimeng.home.gr authored
Failed to load latest commit information.
css version 0.1
images css, js, images added
js css, js, images added
ETooltip.php version 0.1
README update README
tooltip.options.php version 0.1

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]
<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.



Something went wrong with that request. Please try again.