etooltip Follow @yiiframework

Extension to support jQuery Tooltip.

ETooltip

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

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

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

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

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

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

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

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

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

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

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

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.

Please login to leave your comment.