Ergebnis 1 bis 6 von 6
  1. #1
    manulea19 ist offline Grünschnabel
    registriert
    20-10-2005
    Beiträge
    4

    Brauche Hilfe bei richtiger Tooltip auswahl.

    hallöchen,
    bin noch neu hier und starte direkt mit einer dringlichen frage

    ich habe ein vbulletin forum und möchte gerne für einen selbst geschriebenen hack der die letzten 10 postings anzeigt gerne eine vorschau vom ganzen posting text in einem tooltip anzeigen lassen was auch mit der momentanen lösung einwandfrei klappt.

    im FireFox schaut das alles wunderbar aus nur gibt es das problem das der tooltip sobald man über einen link oben oder unten am browserrand drüberfährt sich nicht am rand orientiert und man nur ein stück von dem tooltip sieht.
    auch beim Internet Explorer ist es komischerweise so das der tooltip weit entfernt vom eigentlichen link hover erscheint.

    hier mal die scripte...


    Javascript
    PHP-Code:
    wmtt null;

    document.onmousemove updateWMTT;

    function 
    updateWMTT(e) {
        
    = (document.all) ? window.event.document.body.scrollLeft e.pageX;
        
    = (document.all) ? window.event.document.body.scrollTop  e.pageY;
        if (
    wmtt != null) {
            
    wmtt.style.left = (20) + "px";
            
    wmtt.style.top     = (20) + "px";
        }
    }

    function 
    showWMTT(id) {
        
    wmtt document.getElementById(id);
        
    wmtt.style.display "block"
    }

    function 
    hideWMTT() {
        
    wmtt.style.display "none";

    CSS
    PHP-Code:
    <style type="text/css">
    .
    tooltip  color#000000; background-color: #f5f5ff; display: none; border: solid 1px #0b198c }
    .ttborder width160pxheight150px;    border1px solid #0B198C; }
    </style
    HTML
    PHP-Code:
    <div class="tooltip" id="1">
    Variabler Inhalt
    </div>
    <
    a href="#" onMouseOver="showWMTT('1')" onMouseOut="hideWMTT()">Link</a
    ich bin auch für andere javascript alternativen offen, es sollte lediglich die möglichkeit geben wie im <div> element zu sehen einen grösseren variablen text unterzubringen und nicht wie in anderen tooltip varianten den text in deiner function auszugeben wie hier zb.
    PHP-Code:
    <a href='tooltips.htm' onmouseover="showBallon('Die Ballon-Formatierung richtet sich nach Vorgabewerten, die im Script selber festgelegt werden.'); window.status='Tooltip 1'; return true;"    onmouseout="hideBallon(); return true;"><b>Tooltip 1</b></a

    grüßle
    manuela

  2. #2
    pit-r Guest

    AW: Brauche Hilfe bei richtiger Tooltip auswahl.

    Moin!

    Vielleicht ist das eine Basis für weitere Spielereien:
    PHP-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <
    title>Beispiel</title>
    <
    style type="text/css"
    .
    tooltip color#000000; background-color: #f5f5ff; display: none; border: solid 1px #0b198c; position:absolute; width: 160px; z-index:10}
    </style>
    <
    script type="text/javascript">
    <!--
    wmtt null;
    var 
    xy;
    document.onmousemove updateWMTT;
    function 
    updateWMTT(e){
    = (!e) ? window.event.document.body.scrollLeft e.pageX;
    = (!e) ? window.event.document.body.scrollTope.pageY;
    }
    function 
    showWMTT(id){
    wmtt document.getElementById(id);
    wmtt.style.display "block";
    if(
    typeof document.body.scrollLeft=='number'){
    document.body.scrollLeft document.body.clientWidth;
    document.body.scrollTop document.body.clientHeight
    }
    else if(
    typeof window.pageYOffset=='number'){
    window.pageXOffset+window.innerWidth;
    window.pageYOffset+window.innerHeight
    }
    20;
    20;
    if(
    wmtt.offsetHeight hwmtt.style.top 20 wmtt.offsetHeight 'px';
    else 
    wmtt.style.top "px"
    if(
    wmtt.offsetWidth wwmtt.style.left 20 wmtt.offsetWidth+'px';
    else 
    wmtt.style.left "px";
    }
    function 
    hideWMTT(){
    wmtt.style.display "none";
    }
    //-->
    </script>
    </head>
    <body>
    <div class="tooltip" id="d1">
    Variabler Inhalt<br>
    Variabler Inhalt
    </div>
    <a href="#" onMouseOver="showWMTT('d1')" onMouseOut="hideWMTT()">Link</a>
    <a href="#" onMouseOver="showWMTT('d1')" onMouseOut="hideWMTT()" style="position:absolute;right:150px;">Link</a>
    <a href="#" onMouseOver="showWMTT('d1')" onMouseOut="hideWMTT()" style="position:absolute;top:1000px;">Link</a>
    <a href="#" onMouseOver="showWMTT('d1')" onMouseOut="hideWMTT()" style="position:absolute;right:20px;top:1200px">Link</a>
    </body>
    </html> 
    Ahoi - Pit

  3. #3
    manulea19 ist offline Grünschnabel
    registriert
    20-10-2005
    Beiträge
    4

    AW: Brauche Hilfe bei richtiger Tooltip auswahl.

    huhu pit,
    danke erstmal für diese schnelle antwort, da der geladene content aber immer "variable" ist, sprich die länge und die position der links ist es (aus meiner sicht) schwierig mit deinem beipsiel zu arbeiten, ausserdem bleiben die tooltips "statisch" beim link, wäre natürlich schöner wie beim oberen beispiel das die tooltips "mit ziehen" wenn man über die links geht.



    grüßle
    manuela

  4. #4
    pit-r Guest

    AW: Brauche Hilfe bei richtiger Tooltip auswahl.

    Hi!

    Wenn es denn unbedingt zappeln und viel mehr Rechenarbeit erfordern soll:
    PHP-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <
    title>Beispiel</title>
    <
    style type="text/css"
    .
    tooltip color#000000; background-color: #f5f5ff; display: none; border: solid 1px #0b198c; position:absolute; width: 160px; z-index:10}
    </style>
    <
    script type="text/javascript">
    <!--
    wmtt null;
    var 
    xy;
    document.onmousemove updateWMTT;
    function 
    updateWMTT(e){
    = (!e) ? window.event.document.body.scrollLeft e.pageX;
    = (!e) ? window.event.document.body.scrollTope.pageY;
    if(
    typeof document.body.scrollLeft=='number'){
    document.body.scrollLeft document.body.clientWidth;
    document.body.scrollTop document.body.clientHeight
    }
    else if(
    typeof window.pageYOffset=='number'){
    window.pageXOffset+window.innerWidth;
    window.pageYOffset+window.innerHeight
    }
    20;
    20;
    if(
    wmtt){
    if(
    wmtt.offsetHeight hwmtt.style.top 20 wmtt.offsetHeight 'px';
    else 
    wmtt.style.top "px"
    if(
    wmtt.offsetWidth wwmtt.style.left 20 wmtt.offsetWidth+'px';
    else 
    wmtt.style.left "px";
    }
    }
    function 
    showWMTT(id){
    wmtt document.getElementById(id);
    wmtt.style.display "block";
    }
    function 
    hideWMTT(){
    wmtt.style.display "none";
    }
    //-->
    </script>
    </head>
    <body>
    <div class="tooltip" id="d1">
    Variabler Inhalt<br>
    Variabler Inhalt
    </div>
    <div class="tooltip" id="d2">
    Variabler Inhalt<br>
    Variabler Inhalt<br>
    Variabler Inhalt<br>
    Variabler Inhalt<br>
    Variabler Inhalt<br>
    Variabler Inhalt<br>
    Variabler Inhalt<br>
    Variabler Inhalt<br>
    Variabler Inhalt<br>
    Variabler Inhalt<br>
    Variabler Inhalt<br>
    Variabler Inhalt<br>
    Variabler Inhalt
    </div>
    <a href="#" onMouseOver="showWMTT('d1')" onMouseOut="hideWMTT()">Link</a>
    <a href="#" onMouseOver="showWMTT('d2')" onMouseOut="hideWMTT()" style="position:absolute;right:150px;">längerer Link</a>
    <a href="#" onMouseOver="showWMTT('d1')" onMouseOut="hideWMTT()" style="position:absolute;top:1000px;">Link</a>
    <a href="#" onMouseOver="showWMTT('d1')" onMouseOut="hideWMTT()" style="position:absolute;right:20px;top:1200px">Link</a>
    </body>
    </html> 
    Ahoi - Pit

  5. #5
    manulea19 ist offline Grünschnabel
    registriert
    20-10-2005
    Beiträge
    4

    AW: Brauche Hilfe bei richtiger Tooltip auswahl.

    huhu pit,
    dank dir so klappt das nun einwandfrei

    schaut halt schöner aus wenn alles etwas smoother ausschaut hihi^^





    grüßli
    manuela

  6. #6
    pit-r Guest

    AW: Brauche Hilfe bei richtiger Tooltip auswahl.

    Gern geschehen. Auf daß die tooltips zappeln.

    Gruß - Pit

Ähnliche Themen

  1. Brauche Hilfe bei Javascript!
    Von Paddyy im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 28-07-2005, 16:30
  2. Postnuke brauche dringend Hilfe!!!
    Von carmenscholz im Forum Allgemeines
    Antworten: 1
    Letzter Beitrag: 18-02-2005, 21:47
  3. Hallo ich brauche dringend hilfe
    Von Dekar im Forum Allgemeines
    Antworten: 54
    Letzter Beitrag: 06-09-2004, 20:30
  4. brauche hilfe... bitte!
    Von Heavy_Metal im Forum Serverseitige Programmierung
    Antworten: 7
    Letzter Beitrag: 15-03-2003, 14:37
  5. brauche hilfe mit netscape
    Von Santos im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 24-12-2001, 01:01

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •