Binding mouseover event to asp.net repeater

Question

I have an asp.net repeater that displays a title and and image. The title is very long , so I want to display the title again on mouse over.

I tried to implement a mouse over but I have the following problem.

My display looks like this :

  Repeater Element 1  Repeater Element 2
  Title 1             Title 2 
  Image 1             Image 2

Now on doing a mouse over on Element1 , my mouse over displays Title1. On doing a mouseover on Element2 , my mouse over displays Title1 again ,and I would like it to display Title2 ? Can anyone point me on how i can achieve this.

My code is below :

<asp:Repeater ID="rptMonitorSummary" runat="server" OnItemDataBound="rptMonitorSummary_OnItemDataBound">
                                            <ItemTemplate>
                                           <asp:Panel ID="Pnl" runat="server" onmouseover="return showsamplepopup();" onmouseout="return hidesamplepopup();">
                                                    <li class="ui-widget-content ui-corner-tr">
                                                        <h5 class="ui-widget-header">
                                                            <%# Eval("Name").ToString().Length > 9 ? (Eval("Name") as string).Substring(0, 9) : Eval("Name")%>
                                                        </h5>
                                                        <div id="popup" style="position: absolute; width: 80px; height: auto; background-color: Lime;
                                                            border-bottom: solid 3px gray; display: none; border-right: solid 3px gray; display: none;">
                                                            <%#Eval("Name")%>
                                                        </div>
                                                        <div class="center">
                                                            <asp:Image Width="50px" ID="btnPerformanceImage" runat="server" Height="28px"></asp:Image>
                                                        </div>
                                                    </li>
                                                </asp:Panel>
                                            </ItemTemplate>
                                        </asp:Repeater>

The javascript functions are as follows :

function hidesamplepopup() {
            document.getElementById('popup').style.display = 'none';
            return false;
        }
        function showsamplepopup(e) {
            e = (e) ? e : window.event;
            var element = (e.target) ? e.target : e.srcElement;
            var left = element.offsetLeft;
            var top = element.offsetTop;
            while (element = element.offsetParent) {
                left += element.offsetLeft;
                top += element.offsetTop;
            }
            document.getElementById('popup').style.display = 'block';
            document.getElementById('popup').style.left = left;
            document.getElementById('popup').style.top = top;
            return false;
        }

Answer 1

Notice that getElementById will return the first element with that ID. And you're using the same ID for your Div's.

You should either use a different ID for each item of the repeater (generating different ID's for each of them), or change your logic to fetch them by some other property. I highly recommend using jQuery as well.

Answer 2

I do not know what is your requirement. It could have been a lot easier if you use jQuery tooltip.

This is just an alternative approach.

<link rel="stylesheet" 
 href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    $(function () {
        $(document).tooltip();
    });
</script>

<asp:Repeater ID="rptMonitorSummary" runat="server" 
    OnItemDataBound="rptMonitorSummary_OnItemDataBound">
    <ItemTemplate>
        <asp:Panel ID="Pnl" runat="server">
            <li class="ui-widget-content ui-corner-tr">
           <h5 class="ui-widget-header" title="<%# Eval("Name").ToString() %>">
                    <%# Eval("Name").ToString().Length > 9 ? 
                   (Eval("Name").ToString()).Substring(0, 9) : Eval("Name")%>
                </h5>
                <div class="center">
                    <asp:Image Width="50px" ID="btnPerformanceImage" 
                      runat="server" Height="28px"></asp:Image>
                </div>
            </li>
        </asp:Panel>
    </ItemTemplate>
</asp:Repeater>

Answer 3

I would change the way which you are binding the events to elements, as your sample code doesn't use jQuery I'll assume you don't want it :)

First things first, you'll want to add a class to the asp:panel so that there will be some way of identifying and selecting all the instances. Also you'll want to use classes for your popups not IDs as IDs should be unique on a page.

then you can do something like:

var elements = document.querySelectorAll('.thatClassYouAdded'),
i = 0, l = elements.length;

for(;i<l;i++)
{
    elements[i].addEventListener('mouseover', function(e) {
        var popup = this.querySelector('.popup');
        //do some stuff to popup
    });
}

It's also important to note that querySelector is not supported in legacy browsers (see https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector for more info and support table) and older IEs (pre 9) use attachEvent instead of addEventListener which you may need to write additional code to support