Different tooltip onmouseover on div and an image inside the div

Question

I'm having an image inside a div. I want to show tooltip1 on mouseover div and tooltip2 onmouseover image inside the div. How to acheive this?

<div id="_div1" runat="server">
<ul>
    <li class="right">
      <asp:Image ID="img1" runat="server" />
    </li>
</ul>
</div>

    _div1.Attributes.Add("onmouseover", "javascript:ShowTooltip('divToolTip', " + tooltipText + ");");
    _div1.Attributes.Add("onmouseout", "javascript:HideTooltip('divToolTip');");
.
        img1.Attributes.Add("onmouseover", "javascript:ShowTooltipForImg('divImgToolTip'," + tooltipText1 + ");");
        img1.Attributes.Add("onmouseout", "javascript:HideTooltipForImg('divImgToolTip');");

The above code doesn't seem to work...it always shows div tooltip only.

Answer 1

event.cancelBubble = true

for IE and

event.stopPropagation()

for Mozilla

in your image tooltip function