Version: 0.1, Author: Dimitrios Mengidis
Extract the zip file under the extension folder and should look like.
In your view file add your images
<div id="demo"> <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."/> </div>
And initialize the ETooltip widget
$this->widget('ETooltip', array("selector"=>"#demo img[title]"));
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 ).
Available options of extensions:
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.
<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:
... "selector"=>"#myform :input", ...
The tooltip configuration can be initialized by tooltip attribute like:
$this->widget('ETooltip', array("selector"=>"#demo img[title]", "tooltip"=>array( "opacity"=>1, "position"=>"bottom center", ), ));
Image is the file name of the background image of the tooltip, as mentioned before. The image must be under the
where are all available images you can use.