[JavaScript] tooltipp

encud · 25. Juli 2007

tooltipp

hi ich wollte mal fragen wie man so einen tooltipp wie auf dieser seite machen kann(wenn es so heißt bin mir net sicher...)
hoffe der link klapt: http://www.talesofmagic.de/index.php?c=70
also wenn man da über so eines der symbole geht mit der maus kommt da so ein fenster und das sowas würde ich gerne auch auf meiner hp machen können... würde mich über ne antwort freuen, gruß encud

Heute: Deals & Sale mit stark reduzierten Angeboten finden.

Telefonzelle · 25. Juli 2007

AW: tooltipp

Nimm 'n Div,
Position Absolute
und dann on MouseMove zB rufste die Position der Maus ab und gleichst die mit der Position des Div's an. ^^

So ungefähr.

Murdoc · 25. Juli 2007

AW: tooltipp

[G]overlib[/G]

tooltip wär:

HTML:

<a href="#" style="cursor: help;" onclick="alert('blabla'); return false;">Hilfe</a>

Mutator · 25. Juli 2007

AW: tooltipp

hier habe ich mein kleines tooltip script das dafür komplet ausreichend iss ^^

code glei mit nem kleinen Beispiel

PHP:

    < script >
<!--
  wmtt  =  null ;
 
  document . onmousemove  =  updateWMTT ;
 
function  updateWMTT ( e ) {
     x  = ( document . all ) ?  window . event . x  +  document . body . scrollLeft  :  e . pageX ;
     y  = ( document . all ) ?  window . event . y  +  document . body . scrollTop   :  e . pageY ;
    if ( wmtt  !=  null ) {
         wmtt . style . left  = ( x  +  20 ) +  "px" ;
         wmtt . style . top      = ( y  +  20 ) +  "px" ;
    }
}
 
function  showWMTT ( id ) {
     wmtt  =  document . getElementById ( id );
     wmtt . style . display  =  "block"
  }
 
function  hideWMTT () {
     wmtt . style . display  =  "none" ;
}
  //-->
  </ script >
 
< style type = "text/css" >
. tooltip  {
     position :  absolute ;
     display :  none ;
     background - color :  #FFFFFF;
  }
< style >
 
 
 
  //<!-- das iss der inhalt der im tooltip angezeigt wird -->
  < div  class= "tooltip"  id = "1" >
     Dies ist unser erster Tooltip
  </ div >
 
 
 
  //<!-- aufruf des tooltips -->
  < a href = "#"   onMouseOver = "showWMTT('1')"  onMouseOut = "hideWMTT()" >
  Unser Link
  </ a >

greetz

encud · 26. Juli 2007

AW: tooltipp

ok

wie kann man das dann sonst nennen?

Zitat von Mutator: ↑

hier habe ich mein kleines tooltip script das dafür komplet ausreichend iss ^^

code glei mit nem kleinen Beispiel

PHP:

< script >  </ script > < style type = "text/css" > . tooltip { position : absolute ; display : none ; background - color : #FFFFFF; } < style > // < div class= "tooltip" id = "1" > Dies ist unser erster Tooltip </ div > // < a href = "#" onMouseOver = "showWMTT('1')" onMouseOut = "hideWMTT()" > Unser Link </ a >

greetz

Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

hmm das geht iwie net oder hab ich jetzt was falsch verstanden?

da passiert dann das: http://encud.kilu.de/tooltipp.htm

Telefonzelle · 26. Juli 2007

AW: tooltipp

So funktionierts bei mir:

Code:

<html>
 <head>
 <script type="text/javascript" language="javascript">
wmtt = null;

document.onmousemove = updateWMTT;

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

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

function hideWMTT() {
 wmtt.style.display = "none";
}
</script>

</head>
<body>


<!-- das iss der inhalt der im tooltip angezeigt wird -->
<div style="border:1px solid #000000;padding:15px;background-color:silver;position:absolute;display:none;" class="tooltip" id="d1">
 Dies ist unser erster Tooltip
</div>



<!-- aufruf des tooltips -->
<a href="#" onMouseOver="showWMTT('d1')" onMouseOut="hideWMTT()">
Unser Link
</a>
</body>
</html>

encud · 26. Juli 2007

AW: tooltipp

Zitat von Telefonzelle: ↑

So funktionierts bei mir:

Code:

<html>
 <head>
 <script type="text/javascript" language="javascript">
wmtt = null;

document.onmousemove = updateWMTT;

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

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

function hideWMTT() {
 wmtt.style.display = "none";
}
</script>

</head>
<body>


<!-- das iss der inhalt der im tooltip angezeigt wird -->
<div style="border:1px solid #000000;padding:15px;background-color:silver;position:absolute;display:none;" class="tooltip" id="d1">
 Dies ist unser erster Tooltip
</div>



<!-- aufruf des tooltips -->
<a href="#" onMouseOver="showWMTT('d1')" onMouseOut="hideWMTT()">
Unser Link
</a>
</body>
</html>

Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

jop so bei mir auch

dickes dankeschön

Mutator · 26. Juli 2007

AW: tooltipp

jaaa das man die head und body tags noch dran baut habe ich für selbstverständlich gehalten ^^ meins war nur das eigentliche Script und n kleines beispiel für ( wie schon geschrieben

) naja iss ja jetzt auch egal

encud · 26. Juli 2007

AW: tooltipp

hatte aber eigentlich body und head drangebaut... nur kein html mehr drum naja egal, geht ga jetzt... bis auf eine kleine ausnahme... ich habe das jetzt bei nem bild verwendet... und nun ist es so, das der tooltip dann immer hinter den bildern ist... gibt es da ne möglichkeit das auf vor die bilder zu bekommen?

Telefonzelle · 26. Juli 2007

AW: tooltipp

Jop. Z-Index vom Div verändern.
[G]Z-index CSS HTML[/G] da solltest du was finden.

encud · 26. Juli 2007

AW: tooltipp

ok das klappt jetzt auch

und jetzt noch, wenn man das jetzt bei mehreren machen möchte muss man das ja so schreiben:

HTML:

<div class="tooltip" id="d1">
 tooltip1
</div>

<div class="tooltip" id="d2">
 tooltpi2
</div>

wird aber nach der zeit ziehmich viel text... geht das auch noch anders oder ist das pflicht?

Telefonzelle · 26. Juli 2007

AW: tooltipp

Geht sicher auch anders, zb mit AJAX, aber mit dem Script das du hast musst du es wohl oder übel so machen.

encud · 26. Juli 2007

AW: tooltipp

ok auch net so schlimm

und was ich jetzt noch habe ist wenn man jetzt auf ein bild mit der maus hällt und dann mit dem mausrad scrollt, und dann wieder auf ein anderes bild kommt bei dem auch so ein tooltip ist, dann ist das fenster bevor man die maus wieder bewegt oben link.... kann man das auch iwie ändern oder würde das zu viel text werden?

MakenX · 26. Juli 2007

AW: tooltipp

Ich verstehe nicht warum man nicht einfach mal ordentlich googlet ... hier das z.B. ist eine Schritt für Schritt Anleitung für AJAX - Tooltips...

selfhtml.de - Tooltips f

Murdoc · 27. Juli 2007

AW: tooltipp

Warum verwendest du nicht die eigens dafür geschriebene Javascript lib?

Hat alles was du brauchst und is dazu noch Browserunabhängig!

overlib - Google-Suche

HTML:

<a href="#" onmouseover="return overlib('Ich bin ein Text!');" onmouseout="return nd();">Mit der Overlib einen Tooltip erstellen!</a>

AJAX ist keine Script/Programmiersprache lediglich die Methode per Javascript einen XML-request abzusetzen wird so genannt. AJAX lernen, ymmd, geht nicht^^ du musst Javascript lernen, inkl. die Methoden die AJAX genannt werden. nicht an MakenX gerichtet^^

Was ist DOM-Scripting? | Webkrauts
Galileo Computing - openbook - Bücher online lesen und herunterladen

Cydoc · 27. Juli 2007

AW: tooltipp

gut, dann kenn ich ja jetz deinen reallifenamen, wenn es wirklich DEIN script ist.
denn genau das, mit demselben text, gibt es auf einer website mit vielen tipps....

nenn ich jetzt nicht, falls es wirklich deine seite sein sollte

aber wenn nicht, sollte man nicht andere scripte zu eigen machen

@MakenX

warum immer AJAX? jedes mal AJAX^^
wenn ich mir deinen link so anschaue, sieht das da echt mist aus, ich mein es dauert ne weile bis es weg geht, manchmal gehts nicht weg und er bleibt da stehen wo man ihn das erste mal geladen hat.
find ich persöhnlich ne schlechtere lösung, anstatt die erste, die genannt wurde.
man brauch nicht immer AJAX, auch wenn es toll klingt.

mfg

encud · 27. Juli 2007

AW: tooltipp

hmm ja das andere hab ich jetzt auch garicht probiert weil das was hier gepostet wurde ja funkioniert... ich hatte nur gehofft es vllt noch ein bissel verbessern zu können aber so wie es jetzt ist, ist ja eigentlich auch schon in ordnung...

Murdoc · 29. Juli 2007

AW: tooltipp

alles gesagt = dicht

[JavaScript] tooltipp

Anzeige

Videos zum Thema

Bombermann in Javascript schreiben! (Canvas vs SVG)

JavaScript readAsBinaryString Function on IE10-IE11

Variable aus JavaScript in PHP übergeben

Chrome: Seiten laden nicht, vermutlich fehler in javascript?

JavaScript Cookie Manager

Annonce

Annonce

Nützliche Suchen

[JavaScript] tooltipp

Anzeige

Videos zum Thema

Bombermann in Javascript schreiben! (Canvas vs SVG)

JavaScript readAsBinaryString Function on IE10-IE11

Variable aus JavaScript in PHP übergeben

Chrome: Seiten laden nicht, vermutlich fehler in javascript?

JavaScript Cookie Manager