etooltip Extension to support jQuery Tooltip.

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)

5 3
9 followers
1 676 downloads
Yii Version: 1.1
License: BSD-2-Clause
Category: User Interface
Developed by: tydeas_dr
Created on: Mar 13, 2011
Last updated: 7 years ago

Downloads

show all

Related Extensions