Einbinden von HTML und JS in der HeadSection. Event feuert nicht

Bexx

Verrückte Erfinderin bei Daniel Düsentrieb
#1
Hi Leute,

ich habe dem Entwickler vom tutorial für das eigene Tooltip bereits geschrieben und leider noch keine Antwort erhalten. Habt ihr eine Ahnung, warum der Code unten nicht funkt, bzw. er das Event nie feuert?
Mir kommt die Herangehensweise komisch vor, weil irgendwo werde ich -Tooltip- ja wohl auch einbinden müssen oder nicht? Mir ist bewusst dass der Listener auf dem Tag liegt, trotzdem kommt es mir nicht kosha vor :(

Konkret geht es um dieses Tag:
Code:
<img src="help.png" id="HelpSign_main" title="Beispieleinträge:\n„Umschlossene(r) Strahler Firma xyz, Nr. 12345678“\n„Cs-137-Prüfstrahler, Nr. 12345678“, in Bleiabschirmung\n„ECD-Detektor“"
alt="Hilfe" height="15" width="15" onclick="" style="float: right"/>
ZITIERT:
Hi there,

thanks for the well explained tutorial. I tried to recreate your code within an asp.net webpage.
Well, it's not working at this point and I was wondering if maybe you could help me understand the problem.
I have altered the HTML-tag select of the : init function in your code, the tip is needed for one tag only.

So, here goes my code:
Code:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
      <script type="text/javascript">
        
         var Tooltip = {
         init : function() {
            var elementOfTooltip = document.getElementById("HelpSign_main"); // I just need a tip for this particular Element
          
            if(elementOfTooltip.title.length) // help text is dynamically generated, so might be empty
            {
                elementOfTooltip.addEventListener("mouseover", Tooltip.showTip);
                elementOfTooltip.addEventListener("mouseout", Tooltip.hideTip);                               
            }
         },
         showTip : function(event){
            var tip = document.createElement("span");
            tip.className = "tooltip";     
            tip.innerHTML = event.target.title;
          
            event.target.title = "";
            event.target.appendChild(tip);
            event.target._spanRef = tip;
         },
         hideTip : function(event){
            event.target.title = event.target._spanRef.innerHTML;
            event.target.removeChild(event.target._spanRef);
         };
        
         window.addEventListener("load", Tooltip.init);
        
    </script>
    <style type="text/css">
        .tip
        {
            border: 1px dotted #000;
            background: lightblue;
            color: #fff;
            font-weight:normal;
            padding: 10px;
                      
            position:absolute;
            z-index:1;
            top:30px;
            left:20px;
            width:150px;
          
        }
    </style>
</asp:Content>
// Content Section Example
<asp:Content ID="Content2" ContentPlaceHolderID="Menue" runat="server">
    <dx:ASPxMenu ID="MainMenu" runat="server" Orientation="Vertical" Width="202px">
        <Items>
        </Items>
    </dx:ASPxMenu>
</asp:Content>
I embedded the code within the head section of my asp.net webpage as you can see,
asp understands both HTML (up to vs. 4 and descending ) and JS (no framework libs allowed).
In debug I came to the conclusion that the event is not firing at all.
Did I miss something?

Greets and thanks in advance from Germany, yours sincerely, Rebecca