Search the Community
Showing results for tags 'qtip2'.
Found 1 result
-
Wondering Am I doing the correct thing. Im using qtip2 plug in to show something from another page content. I have 2 pages of php. aa.php <html> <head> <title>My site</title> <!-- CSS file --> <link type="text/css" rel="stylesheet" href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.css" /> </head> <body> <!-- jQuery FIRST i.e. before qTip (and all other scripts too usually) --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <!-- Include either the minifed or production version, NOT both!! --> <script type="text/javascript" src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.js"></script> <!-- Optional: imagesLoaded script to better support images inside your tooltips --> <script type="text/javascript" src="/path/to/jquery.imagesloaded.pkg.min.js"></script> <a href="#">Test</a> <script type="text/javascript"> $('a').qtip({ content: { text: function(event, api) { $.ajax({ url: 'aaCal.php', // URL to the JSON file dataType: 'json', // Tell it we're retrieving JSON }) .then(function(data) { /* Process the retrieved JSON object * Retrieve a specific attribute from our parsed * JSON string and set the tooltip content. */ var content = 'My name is ' + data.person.firstName; // Now we set the content manually (required!) api.set('content.text', content); }, function(xhr, status, error) { // Upon failure... set the tooltip content to the status and error value api.set('content.text', status + ': ' + error); }); return 'Loading...', // Set some initial loading text } } }); Another page aaCal.php $arr = array('person' =>array('firstname' => "Foo")); echo json_encode($arr); The output of aaCal.php is {"person":{"firstname":"Foo"}}. reference plug in guide: http://qtip2.com/guides
