ETooltip ¶

Version: 0.1, Author: Dimitrios Mengidis

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]

<img src="/img/photos/1.jpg"
     title="A must have tool for designing better user-interfaces."/>
<img src="/img/photos/2.jpg"
     title="Tooltips can be positioned relative to the trigger element."/>
<img src="/img/photos/3.jpg"
     title="Tooltips can contain any HTML links, images, forms, tables, etc."/>
<img src="/img/photos/4.jpg" style="margin-right:0px"
     title="Available show/hide effects and you can also make your own."/>

And initialize the ETooltip widget

<?php
    $this->widget('ETooltip', array("selector"=>"#demo img[title]"));
?>

Notes ¶

The only required options is the "selector" which is a string of a jquery selector. For more information how to use check the official site of the jquery plugin ( Links section ).

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 ¶

The magic selector is the only required property. I call it magic because it let you work with anything you like.

Form example ¶

So imagine instead of images there was a form. ~~~ [html]

<input type="textfield" title="The username." />
<input type="textfield" title="Password of user." />
<input type="submit" title="Submit button." />

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

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

tooltip property ¶

The tooltip configuration can be initialized by tooltip attribute like:

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



###Links

- [Github repository](http://www.github.com/dmtrs/etooltip)
- [jQuery Tooltip](http://flowplayer.org/tools/demos/tooltip/index.html)
- [Author profile](http://www.yiiframework.com/forum/index.php?showuser=4786)