etooltip Extension to support jQuery Tooltip.


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


<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

    $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:

  • 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:

    $this->widget('ETooltip', array("selector"=>"#demo img[title]",
            "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 ~~~

where are all available images you can use.


- [Github repository](
- [jQuery Tooltip](
- [Author profile](

5 3
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: 11 years ago


show all

Related Extensions