Yii 1.1: etooltip

Extension to support jQuery Tooltip.
10 followers

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

<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

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

<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",
...

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

Total 11 comments

#7894 report it
tydeas_dr at 2012/04/25 04:52am
@vasudev_bhat

Hey, If you notice the script tag in the bottom of your page is this Open in firefox and check how it looks with tooltip. There is broken code there that should when a yiitab function is called. Please try to assign id to all the tab widgets you have.

#7890 report it
vasudev at 2012/04/25 02:16am
yiitabs and etooltip clash

hey tydeas, i am good, how are you?

the issue is i am using yiitabs and etooltip and i get the error i mentioned. http://electric-motel.com/Members/Details/Artist/born-to-funk check this page. right now i have disabled tooltip. so tabs are working fine. but once i enable tooltip, the tabs stop working. this is the error i get when i enable etooltip. Uncaught TypeError: Object # has no method 'yiitab'.

#7889 report it
tydeas_dr at 2012/04/25 02:06am
@vasudev_bhat

Hey, How are you doing? I am not pretty sure if I got your issue. There is probably some js broken, if this is an js error?

To be honest, you have not provided any informantion to help you resolve the issue. Thanks

#7881 report it
vasudev at 2012/04/24 02:14pm
yiitabs and etooltip clash

hi tydeas, if u use etooltip with yiitabs, yii tabs stop working. i get Uncaught TypeError: Object # has no method 'yiitab'.

what cud be the issue?

#6494 report it
Junior - df9 at 2012/01/13 10:21pm
Switched to qTip2 due to limited time

Hi, thanks for replying. That issue with effect I solved as shown in the "edit" section of my other comment:

$this->widget('ext.ETooltip.ETooltip', array("selector"=>".text_tip", 'image'=>'black_arrow_big.png', 'tooltip'=>array('effect'=>'slide')));

The only thing i could not achieve with this plugin was to make tooltips for image maps. Due to a limited time in the project I was working on, I ended up switching to qTip2 (raw project, not Yii extension).

Thanks anyway, I'll give the plugin a new try as soon as possible and see what can be done in the case of maps

:)

#6490 report it
tydeas_dr at 2012/01/13 11:12am
@scoob.junior

What errors are there ? What version is in tooltip and what version is supported for the effect ? Because there is a long time ago I have not worked with this extension, if you could fix please make a pull request to the repo in github. Thank you

#6439 report it
Junior - df9 at 2012/01/10 05:34pm
How to set Slide effect?

Hi, thanks for the extension.

How do I set the slide effect shown at http://flowplayer.org/tools/demos/tooltip/any-html.html ?

Tried options, effect=>'slide' but no success, only errors.

Thanks

---EDIT--- code is $this->widget('ext.ETooltip.ETooltip', array("selector"=>".text_tip", 'image'=>'black_arrow_big.png', 'tooltip'=>array('effect'=>'slide')));

Regards

#3794 report it
tydeas_dr at 2011/05/08 12:35pm
back again

hello ppl, @siskalandre, @mjkulet please give more information and code ( a test case will be fine ) so I can reproduce your errors. Use pastebin.com or other paste bin service to share code. Thanks.

#3783 report it
siskalandre at 2011/05/08 03:04am
conflict with cjuidialog

Hi there, correct me if I am wrong

I used cjuidialog to show dialog form, and using this extension, but something messy. The tooltip of form field show behind the cjuidialog, can anyone help ?

#3777 report it
mjkulet at 2011/05/07 02:07pm
conflict when enableClientValidation is true..

Hi there, another nice extension from you.

Though I have to set enableClientValidation to false so as to eliminate the error

$("#login-form").yiiactiveform is not a function

But for me it's only a minor issue. I just want you to know. :)

#3070 report it
tydeas_dr at 2011/03/13 06:46pm
Known issue

In a form if some fields do not have title then there is something messy will happen.

Leave a comment

Please to leave your comment.

Create extension