Threaded Mode | Linear Mode

hari41980

Hi Craig,

Nice work and really helpfull.

Please do help me out in this, I have two Tips, On page load a tip is Shown, When that tip is closed another one has to be shown up. please help me out. I am new to this Scripting...

I have tried the onHide method but hope I am making a mistake...

JS Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
  <script type="text/javascript" src="../TourJS/Qtip/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="../TourJS/Qtip/jquery.qtip-1.0.0-rc3.js"></script>
 
 
        <script type="text/javascript">
 $( document ).ready( function( ) {
 
   $('#SomeID1').qtip
   ({
               show: { 
                        when: { event: 'click' },
                        effect: { type: 'slide' },
                        ready: true 
                     },
               content: {
                              text: 'I really like owls!',
                              title: {text: 'About Me', button: 'X' }
                        },
 
               style: { 
               name: 'blue' ,// Inherit from preset style
               tip: 'topLeft' 
               }
 
   });
 
 
            $('#SomeID2').qtip
   ({
               show: { 
               solo:true,
               when: {event:'click'},
               effect: { type: 'slide' },
               ready: false },
               hide:false,
               content: {
                              text: 'owls!',
                              title: {text: 'second',
                                    button: 'X'
                                    }
                        },
 
               style: { 
               name: 'blue' ,// Inherit from preset style
               tip: 'topLeft' ,
               width: 200
               }
   });
 
 
 
 
            } );
        </script>
<style type="text/css">
<!--
body,td,th {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
}
-->
</style></head>
 
<body>
 
 
<div id="SomeID1" class="classRating" style="width:150px;">Auto Tip load on page load</div>
 
 
 
<div id="SomeID2" class="classRating" style="width:80px;margin-left:200px;">New TIp .....</div>
 
</body>
</html>

Thanks
Regards

***Craig***

Hey hari, try out this code and see if it works well for you:

JS Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body,td,th {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
}
</style>
</head>
<body>
 
<div id="SomeID1" class="classRating" style="width:150px;">Auto Tip load on page load</div>
 
 
 
<div id="SomeID2" class="classRating" style="width:80px;margin-left:200px;">New TIp .....</div>
 
<script type="text/javascript" src="../TourJS/Qtip/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../TourJS/Qtip/jquery.qtip-1.0.0-rc3.js"></script>
<script type="text/javascript"><!--
$(document).ready(function()
{
   $('#SomeID1').qtip(
   {
      content: {
            text: 'I really like owls!',
            title: {text: 'About Me', button: 'X' }
      },
      show: { 
         when: { event: 'click' },
         effect: { type: 'slide' },
         ready: true,
         solo: true
      },
      style: { 
         name: 'blue' ,// Inherit from preset style
         tip: 'topLeft' 
      },
      api: {
         onHide: function(){
            $('#SomeID2').qtip('show'); // Show the other tooltip after this ones closed
         }
      }
   });
 
   $('#SomeID2').qtip(
   {
      content: {
         text: 'owls!',
         title: {text: 'second',
               button: 'X'
               }
      },
      show: { 
         solo: true,
         when: {event:'click'},
         effect: { type: 'slide' }
      },
      hide:false,
      style: { 
         name: 'blue' ,// Inherit from preset style
         tip: 'topLeft' ,
         width: 200
      }
   });
});
--></script>
</body>
</html>

hari41980

Craig,

Thanks a lot. Now I got the calling way of API.

But Craig the Second Tip does not shows on close of the First. Only when we click on the second, the tip shows. Then the loop works out well.

Can we make the thing show on first itself by closing the first tool tip.

;-((

Thanks

***Craig***

Hmmm nari, try changing this:

JS Code

$('#SomeID2').qtip('show');

For this:

JS Code

$('#SomeID2').qtip('api').render().show();

Note: You'll need to be using the latest branch release for this to work.

Possibly Related Threads...
Thread:		Author	Replies:	Views:	Last Post
	Open a modal popup window from a click inside qtip	poojakudesia	1	1,134	10th August 19:32 Last Post: Craig
	Adjusting the tip based on screen adjustment	huzaifa.tapal	6	2,670	17th June 02:29 Last Post: alancia
	[Solved] I need the tooltip to stay open when i mouse over it	Arcadian	2	1,254	5th April 09:08 Last Post: Arcadian
	[Solved] open jqtip from javascript call	iamcanadian1973	2	1,258	28th July 21:18 Last Post: iamcanadian1973
	close modal dialog from inside the content	siriusblack	3	2,501	21st April 17:57 Last Post: Craig
	something like style { tip: "auto" }	nemoluca	3	1,148	15th April 16:27 Last Post: Craig
	programatically show tip in different element	jorfermo	8	2,430	31st March 12:20 Last Post: jorfermo
	How to implement tool tip	keval	4	3,272	26th February 06:43 Last Post: james121
	Offset Corner Tip Position?	matthewsimo	3	2,216	5th February 09:22 Last Post: artzone
	Avoid to hide while hover the tip	palaueb	4	1,993	9th December 15:01 Last Post: ralphholzmann