[CLOSED] ToolTips : Image hover show ToolTips

[matrixwebtech]

I have some images and I want to show a tooltip on hover each image . I will not found a hover event in image listeners.
so is it possible to do with one tooltip control ? I mean to say

I have
1.png,2.png and 3.png and a tooltip control tp1 how I set tooltip's html dynamically when mouse hover .

[Daniil]

Hi @matrixwebtech,

Yes, that is possible.

You should use a ToolTip's Delegate and a Show listener.

The approach is demonstrated in this example.
https://examples2.ext.net/#/Miscella...l_Cell_Tooltip

[matrixwebtech]

Hi
I go through with example an d I understand Target , Delegate and 2nd parameter is important to do this Handler="onShow(this, #{GridPanel1});" .

Bellow is a part of my html code

 <li>
                <a href="#" id="a1">
                    <img src="/Content/ess/employee.png" width="130px" />
                </a>
                <ul>
                    <li>
                        <a href="#" id="a2">
                            <img src="/Content/ess/attendance.png" width="70px" />
                        </a>
                        <ul>
                            <li>
                                <a href="#" id="a3">
                                    <img src="/Content/ess/daily_attendance.png" width="40px" />
                                </a>
                            </li>

here I want to show a tool tip when mouse hover on the image .

[Daniil]

So, please clarify what ToolTip configuration are you trying so far?

[matrixwebtech]

I have not try any thing yet ,because I am not understand what I assign to Target , Delegate and onShow. please consider my case and suggest me .

[Daniil]

Ok, what are the Target and Delegate options?

[matrixwebtech]

This code from example

<ext:ToolTip 
            runat="server" 
            Target="={#{GridPanel1}.getView().el}"
            Delegate=".x-grid-cell"
            TrackMouse="true">
            <Listeners>
                <Show Handler="onShow(this, #{GridPanel1});" /> 
            </Listeners>
        </ext:ToolTip>

1. How I assign Target for each a tag?

2. How I assign Delegate for each a tag?

3. How I write onShow function as per my requirement.

[Daniil]

How I assign Target for each a tag?

You should assign it to the element that contains all the <a> elements.

2. How I assign Delegate for each a tag?

I think just

Delegate="a"

3. How I write onShow function as per my requirement.

Inside an onShow function you will be able to use toolTip.triggerElement which will be an <a> element. Hope this helps.