Using QTip (JQuery tooltip) in Drupal / Calling external PHP file

Hi folks. I'm relatively new to Drupal. So far, I've gotten a basic understanding on how to create a theme from scratch by creating a custom page.tpl.php, specific versions of node-xxx.tpl.php, as well as a template.php.

Now, I'm trying to implement QTip for pop-up definitions of terms. I wanted to create one definitions.php file, which would be a central repository for these definitions, and then I could use these on every page where needed.

I've added the following Javascript code in the header of page.tpl.php:

<script type="text/javascript">
   // Create the tooltips only on document load
   $(document).ready(function() {
   // Notice the use of the each() method to acquire access to each elements attributes
      $('#content a[tooltip]').each(function() {
         $(this).qtip({
           content: {
               url: 'definitions.php'
           },
...

There are further options to use a specific data id, but I can't even get to that point. The truth is, I'm not even sure I'm approaching this correctly. I don't think it's seeing my definitions.php file at all, because I just put static text in there and it's not reading it. Whereas if I hard-code a tooltip, it works fine.

Where would I put that definitions.php file so Drupal sees it??

Any help would be greatly appreciated!

Omar.

pbull's picture
Peter Bull
Acquia Staff

Hi Omar, It appears that the

Posted on February 1, 2010 - 5:48pm by Peter Bull.

Hi Omar,

It appears that the JavaScript pasted above would be looking in the current directory for the definitions.php file. You will need to define an absolute path for that file.

First, put the definitons.php file in your theme directory.

Then, add some PHP within that JavaScript, so the correct path for that file is defined:

<script type="text/javascript">
   // Create the tooltips only on document load
   $(document).ready(function() {
   // Notice the use of the each() method to acquire access to each elements attributes
      $('#content a[tooltip]').each(function() {
         $(this).qtip({
           content: {
               url: '<?php print base_path() . path_to_theme(); ?>/definitions.php'
           },
...

---
Regards,
Peter Bull
Acquia Client Advisory Team

Peter, That worked like a

Posted on February 1, 2010 - 6:01pm by Omar Qazi.

Peter,

That worked like a charm!

Out of curiosity: Is this the best way to access a list of definitions? Or is there a better way to do so within Drupal itself?

Thank you!

Omar.

pbull's picture
Peter Bull
Acquia Staff

Omar, I'm glad that worked

Posted on February 1, 2010 - 6:21pm by Peter Bull.

Omar,

I'm glad that worked for you. I am not familiar with the nuances of the Qtip Jquery plugin, but this should a perfectly acceptable solution as long as the JavaScript can access that definitions.php file.

---
Regards,
Peter Bull
Acquia Client Advisory Team

Post new comment