Question

I am using qTip2 to handle some tool tips on my site. I have the following code inside a template for the pages it applies to:

HTML

<div class="overview"><a href="#"><img class="border-gray" src="src.jpg"></a></div>
<div class="estimate"><a href="#"><img class="border-gray" src="src.jpg"></a></div>
<!-- More HTML similar to above -->

JS

$('.overview').qtip({
  content: 'Overview',
  position: {
    my: 'bottom center', 
    at: 'top center'
  },
   style: {classes: 'qtip-tipsy'}
});
$('.estimate').qtip({
   content: 'Estimating',
   position: {
     my: 'bottom center', 
  at: 'top center'
  },
   style: {classes: 'qtip-tipsy'}
});
//More JS as above

On the individual pages I would like to have the tool tip visible if the class correlates with the page. IE: site.com/overview would have the tool tip with the class of overview always visible. As would site.com/estimate have the tool tip estimate visible.

I have attempted to add this code to the page but it doesn’t work:

$('.overview').qtip({
   hide: false
});

What I am after is when the page loads the tool tip is visible. No mouse over etc is required. The visible tool tip will depend on what page is visible. IE: /overview = .overview tool tip.

How can I achieve this?

UPDATE

The following code will achieve what I am looking for:

$('.overview').qtip({
   content: 'Overview',
   position: {
     my: 'bottom center', 
     at: 'top center'
},
  show: {
    ready: true
},
  hide: false,
  style: {classes: 'qtip-tipsy'}
});

However this portion of the code is in a template and not editable on the page level:

$('.overview').qtip({
  content: 'Overview',
  position: {
    my: 'bottom center', 
    at: 'top center'
  },
   style: {classes: 'qtip-tipsy'}
});

If I try this below the above code it doesn’t work:

$('.overview').qtip({
    show: { ready: true },
    hide: false

}); 

How do I combine the two if one is not editable on the page level? IE: How would I add the show and hide code into the above code if I cannot edit the code on the page level?

Answer 1

SHOWING BY DEFAULT

$('.overview').qtip({
  content: 'Overview',
  position: {
      my: 'bottom center', 
      at: 'top center'
    },
  style: {classes: 'qtip-tipsy'},
  show: { ready: true }
  });

This is the line you need:

show: { ready: true }

Here is the documentation:
gTip: http://craigsworks.com/projects/qtip/docs/reference/#show
gTip2: http://craigsworks.com/projects/qtip2/docs/show/#ready

SHOWING CONDITIONALLY

<?php
  // Get the url
  $current_url = $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
  // Get the two parts of the url, seperated by: /
  $url_array = explode('/', $current_url);
?>

<script>
  $('.overview').qtip({
    content: 'Overview',
    position: {
      my: 'bottom center', 
      at: 'top center'
    },
    /* Check if the second part of the url is 'overview'
       If it is, add the show ready code */
    <?php if( isset( $url_array[1] ) && $url_array[1] == 'overview' ) : ?>
      show: { ready: true },
    <?php endif; ?>
    style: {classes: 'qtip-tipsy'}
  });
</script>

SHOWING CONDITIONALLY | ONLY JAVASCRIPT

<script type="text/javascript">
  $(document).ready(function() 
    {
      // Prepare some variables
      var current_url = window.location.host + window.location.pathname;
      var url_array = current_url.split('/');
      // The qtip code
      $('.overview').qtip({
        content: 'Overview',
        position: {
          my: 'bottom center', 
          at: 'top center'
        },
        show: { ready: url_array[1] == overview ? true : false },
        style: {classes: 'qtip-tipsy'}
      });
  });
</script>