Jquery Qtip mit Parameter

Philipp88 · 16.07.2012

Hi,
bin grad dabei mich in Jquery qtip2 einzuarbeiten, Das Tooltip funktioniert auch soweit sehrr Ordentlich. Jetzt möchte ich aber den Tooltip per ajax- reguest erzeugen. Die url soll etwa so lauten "wortlexikon.php?wort=meinwort". D.H. ich muss irgendwie das Wort als Parameter an qtip übergeben, sodass ich die URL für das Jeweilige wort zusammenbauen kann.

HTML:

$(document).ready(function() {
  $('.lex').qtip({
     content: {
        url: 'wortlexikon.php?wort=meinwort', method: 'get' },
 position: {
      corner: {
         target: 'topMiddle',
         tooltip: 'bottomMiddle'
      }
 },
 
   style: { 
      name: 'dark' // Inherit from preset style
   }
    });
})
</script>
</head>
<body>
<p>Das ist ein <span class="lex">Absatz</span>

Wie kann ich zum Beispiel das Wort "Absatz" an qtip übergeben?
Hab schon versucht den Span Tag ne id zu geben und wollte diese id auslesen mit

HTML:

var wort = $(this).attr('id');

Aber da kommt der Fehler "missing : after property id var wort = $(this).attr('id');"
Kann mir jemand helfen?
Philipp

mindraper · 17.07.2012

AW: Jquery Qtip mit Parameter

hi

JS

PHP:

function qTip (node) {
   var thisURL = ['wordlexikon.php?word=', node.text()].join('');
   
   node.qtip({
      content: {
         url: thisURL,
         method: 'get'
      },
      position: {
         corner: {
            target: 'topMiddle',
            tooltip: 'bottomMiddle'
         }
      },
      style: {
         name: 'dark'
      }
   }); 
};

$(function () { // shortform of $(document).ready(...)

$('.lex').each(function (index, node) {
   qTip($(node));
});

});

meinst du so?

Philipp88 · 17.07.2012

AW: Jquery Qtip mit Parameter

Danke aber jetzt führt er die funktion sofort aus, nicht bei mouseover

mindraper · 19.07.2012

AW: Jquery Qtip mit Parameter

hi.

sorry, aber ich bin nicht davon ausgegangen, dass du auf dem level hängen würdest.

PHP:

$('.lex').on('mouseover', function () {
    var _self = $(this);
    qTip(_self);
});

Philipp88 · 22.07.2012

AW: Jquery Qtip mit Parameter

Mein Script seht jetzt so aus:

HTML:

function qTip(node) {
 var url = node.text();
 alert(url);
 
 node.qtip({ 
      content: { 
         url: thisURL, 
         method: 'get' 
      }, 
      position: { 
         corner: { 
            target: 'topMiddle', 
            tooltip: 'bottomMiddle' 
         } 
      }, 
      style: { 
         name: 'dark' 
      } 
   });  
}; 

$('.lex').on('mouseover', function() {
  qTip($(this)); 
 });

In firebug kommt jetzt "$(".lex").on is not a function"

bitte helf mir

Duddle · 22.07.2012

AW: Jquery Qtip mit Parameter

Bindest du eine alte Version von jQuery ein? Die Funktion wurde erst in 1.7 eingeführt.

Duddle

Philipp88 · 22.07.2012

AW: Jquery Qtip mit Parameter

ja stimmt sry. Ich habe jetzt die Version 1.7.2 eingebunden. Firebug gibt jetzt keine Fehlermeldung mehr aus, aber es passiert nix wenn ich drüberfahre. Nichtmal ein normales alert- fenster kommt

mindraper · 22.07.2012

AW: Jquery Qtip mit Parameter

hi

abgesehen davon, ob du eine ältere version von jquery einbindest (dann müsstest du statt der on()- die bind()-methode nehmen) wird der aufruf von qTip() so wie du ihn geschrieben hast nicht funktionieren, weil du den kontext des parameters änderst. wenn du – so wie du es getan hast – qTip($(this)) schreibst, bezieht sich $(this) auf das window-object. und da soll es nicht hindeuten.

es hatte schon seinen grund, weshalb ich "var _self = $(this)" geschrieben habe und dann "qTip(_self)". wenn dir jemand den code schon zusammenschreibt solltest du ihn auch so übernehmen, wenn du nicht sicher bist.

Philipp88 · 22.07.2012

AW: Jquery Qtip mit Parameter

Hallo nochmal,

also ich musste es in ein document.readybsetzen damit es funz.
Jetzt aber stürzt mein Firefox ab, wenn ich darüber fahr:'(

HTML:

function qTip(node) {
 var url = "meineseite.php?id=4$" + node.text();
  
 node.qtip({ 
      content: { 
         url: "index.html", 
         method: 'get' 
      }, 
      position: { 
         corner: { 
            target: 'topMiddle', 
            tooltip: 'bottomMiddle' 
         } 
      }, 
      style: { 
         name: 'dark' 
      } 
   });  
}
$(document).ready(function() {
 $('.lex').on('mouseover', function() {
  var _self = $(this); 
  qTip(_self); 
 });
})

Philipp88 · 23.07.2012

AW: Jquery Qtip mit Parameter

Ich hab jetzt den Code so modifiziert das ich nun qtiip2 verwende.

Hier erstmal mein Code:

HTML:

function qTip(node) {
 var url = "meineseite.php?id=4$" + node.text();
 node.qtip({ 
      content: { 
   text: "loading...",
     ajax: {
         url: "index.html", 
         method: 'get',
     data: {},
     
     success: function(data, status) {
      this.set('content.text', data);
      }
    }
      }, 
      position: { 
         corner: { 
            target: 'topMiddle', 
            tooltip: 'bottomMiddle' 
         } 
      }, 
      style: { 
         name: 'dark' 
      } 
   });  
}
$(document).ready(function() {
 $('.lex').on('mouseover', function() {
  var _self = $(this); 
  qTip(_self); 
 });
})

leider zeigt mir der tooltip nur "loading..." als Text an

Er zeigt mir aber nicht den Inhalt meiner index.html (zum testen) an:'(
Was mach ich falsch?