kostenloser Webspace werbefrei: lima-city


html tooltip

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    unlikus

    unlikus hat kostenlosen Webspace.

    Ich habe einige Bilder, bei denen beim mit der tag/maus">Maus rüberfahren ein javascript code ausgeführt wird. Dieser Code erzeugt einen html code(eine div mit einer tabelle), es soll dann eine art Tooltipp angezeit werden, die diesen html code anzeigt.
    Hat jemand eine Ahnung wie sowas gehen könnte, wichtig ist, dass der tooltip, die darunterliedene html ebene auf keinen Fall beeinflussen darf.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. w*****e

    Guten Tag,

    ich kann dir die Tooltips von blog.kuschku.de empfehlen.

    Ist dann aber ohne js und so...

    Grüße webaffe
  4. Autor dieses Themas

    unlikus

    unlikus hat kostenlosen Webspace.

    möchte eigentlich kein framework oder so was verwenden. und erst mein javascriptcode erstellt den Code für den tooltip
  5. w*****e

    Guten Tag nochmal,

    seine Technik ist CSS und html, http://blog.kuschku.de/webdesign/css/bessere-tooltips/.

    Viele Grüße nochmal
  6. Autor dieses Themas

    unlikus

    unlikus hat kostenlosen Webspace.

    Wie gesagt, ich verwende schon javascript um den code der den Tooltipp darstellen soll, also muss ich den tooltipp auch mit javascript realieseren
  7. m******e

    unlikus schrieb:
    Wie gesagt, ich verwende schon javascript um den code der den Tooltipp darstellen soll, also muss ich den tooltipp auch mit javascript realieseren


    http://www.walterzorn.de/tooltip/tooltip.htm
  8. Autor dieses Themas

    unlikus

    unlikus hat kostenlosen Webspace.

    Hab jetzt selbst eine Lösung gefunden. Und menschle, ich müsste den Code so verändern, dass ich ihn auch gleich selbst schreiben könnte
  9. m******e

    unlikus schrieb:
    Hab jetzt selbst eine Lösung gefunden. Und menschle, ich müsste den Code so verändern, dass ich ihn auch gleich selbst schreiben könnte
    Wenn Du es selbst könntest, verstehe ich nicht so wirklich, warum Du dann erst hier fragst.

    Und wie sieht Deine Lösung nun aus? Wäre vielleicht für später nachlesende User ganz hilfreich.
  10. Autor dieses Themas

    unlikus

    unlikus hat kostenlosen Webspace.

    Bin erst später drauf gekommen.
    das div wird an das ende des html documtens geschrieben mit position:abslulute in css, mit der id tooltip
    jetzt kann man über javascript dem Div den Inhalt zuordnen und gleichzeitig display auf block setzen
    und die css attribute top und left dann auf die Mauskoordinaten stzeten.
    Das war das schwirigste, weil IE und FIrefox sich da sehr unterscheiden:
    function koo(ev) {
    	var posx = 0;
    	var posy = 0;
    
        if(!ev)var ev = window.event;
    
    	if (ev.pageX || ev.pageY) 	{
    		posx = ev.pageX;
    		posy = ev.pageY;
    	}
    	else if (ev.clientX || ev.clientY) 	{
    		posx = ev.clientX + document.body.scrollLeft
    			+ document.documentElement.scrollLeft;
    		posy = ev.clientY + document.body.scrollTop
    			+ document.documentElement.scrollTop;
    	}
    	return new Array(posx,posy);
    }


    Wichtig: an die funktion muss event übergeben werden, und zwar aus dem html tag.

    und beim verlassen der Maus wird display auf none gesetzt
  11. Hallo unlikus,

    ich persönlich benutze am liebsten die Tooltip-Variante der Web Toolbox.

    http://www.web-toolbox.net/webtoolbox/dhtml/info-box01/info-box01.htm

    Dort findest du alles mit einer ausführlichen Erklärung und vielen Beispielen.

    Viele Grüße
    Gentleman1 :king:
  12. unlikus schrieb:
    Wie gesagt, ich verwende schon javascript um den code der den Tooltipp darstellen soll, also muss ich den tooltipp auch mit javascript realieseren


    Das ist mal eine originelle Antwort. :thumb:
    Und leider sinnfrei.
    Du brauchst so oder so CSS dafür. Warum also noch zusätzlich kompliziertes JavaScript einarbeiten?

    Warum einfach wenn es auch kompliziert geht.
    Die erste Lösung von webaffe http://blog.kuschku.de/webdesign/css/bessere-tooltips/ ist eine saubere und einfache Lösung.
    Und sie funktioniert definitiv überall, auch dort wo kein Javascript erlaubt ist.

    Gib dir einen Ruck und mach es dir einfacher.:wink:

    Beitrag zuletzt geändert: 1.12.2012 15:02:33 von kgreen
  13. Ich bin seit Jahren wunderbar zufrieden mit http://www.walterzorn.de/tooltip/tooltip.htm dem Tool des verstorbenen Walter Zorn.

    Im Gegensatz zu JQuery kein Overkill sondern nur die Funktion. Dabei lassen sich die Tips sowohl global stylen, aber bei Bedarf einzelne auch separat stylen. Die komprimierte Version ist nur 19,6 k groß.

    Einbindung einzelner Tooltips kann über eine ausgelagerte js Datei erfolgen oder als Bereich mit "ID" Der text bleibt dann für Suchmaschienen auffindbar.

    Beispiel für letzteres, wobei man über die class allen möglichen css verwenden kann
    <span class="tt" onmouseover="TagToTip('ID');" onmouseout="UnTip();">TEXT</span><span id="ID"> ()</span>


    Es empfiehlt sich den Strichpunkt wie hier zu setzen onmouseout="UnTip();" das wäre nach Anleitung nicht zwingend nötig aber tidy motzt.

    Wer modernizer.js im <head> hat und seine js gesammelt in eine Datei ans Ende packt kann die wz-tools dort auch mit reinkopieren und muß nicht den in der Anleitung beschriebenen etwas unschönen Weg der Einbindung direkt hinter dem <body>-tag


  14. geht auch ganz einfach mit html, zumindest bei list items:
    einfach beim <li> tag das attribute title hinzufügen
    Bsp:
    <ul>
    		<li title="Ich bin ein Tooltip!">Test</li>
    	</ul>
  15. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!