Load Tooltip into Fixed Position or Fixed Div?

[wakasm]

Is it possible to have a tooltip load in a fixed position or container such as a div?

Currently I have it set to load directly above the link, but I would prefer a fixed position on the page rather than by using absolute positioning or relative positioning.

Thanks!

Bonus Question*

Is there a way to have the tool-tip pull content from a div on the page? For instance.

JS Code

<a href="#" class="MyToolTip1">Hover over me</a>
 
<div class="MyToolTip1" style="display:none;">
Content to be loaded into ToolTip
</div>
 
<a href="#" class="MyToolTip2">Hover over me</a>
 
<div class="MyToolTip2" style="display:none;">
Content to be loaded into ToolTip2
</div>

[Craig]

You can set the positoning type and container using the content suboptions like so:

JS Code

$('.selector').qtip({ 
   position: {
      type: 'static' // Canbe relative/absolute/fixed,
      container: $('.containerselector')
   }
});

Checkout the documentation on this for more information: http://craigsworks.com/projects/qtip/doc...ition-type

[wakasm]

Quote:Checkout the documentation on this for more information: http://craigsworks.com/projects/qtip/doc...ition-type

That's where I went first - but for some reason every time in firefox it crashes for me. It did work in IE7 though.

Back to the original question, I'm still not sure what I'm doing incorrect. I'm assuming unless I am misinterpreting that the container function tells the tool-tip where to load?

JS Code

<a href="#" class="MyToolTip1">Hover over me</a> // Tooltip to hover
 
<div class="MyContentForToolTip1" style="display:none;"> // Div with content somewhere on the page
Content to be loaded into ToolTip
</div>
 
<div class="TargetDivForToolTip"> // Div on the page where I want content loaded into or near
 
</div>
 
 
 <script type="text/javascript">
$('a.MyToolTip1').qtip({
   content: 'This is the content I want in the tooltip if can't be loaded from MyContentForToolTip1 ',
   show: 'mouseover',
   hide: 'mouseout',
   position: {
                     type: 'static',
                     container: $('div.TargetDivForToolTip')
                   },
 });
</script>

[Craig]

It crashes in firefox!? Any word on where about the crash is occuring? A line number perhaps? Here's the code 'should' work:

JS Code

$('a.MyToolTip1').qtip({
   content: $('.MyContentForToolTip1'),
   position: {
      type: 'static',
      container: $('.TargetDivForToolTip')
   },
});

[wakasm]

Every time I try to debug it with firebug or the default debug option, it also crashes.

All the examples on the page work except this one. (for me anyway).

container $(document.body) Determines the HTML element which the tooltip is appended to e.g. its container.

When I click on the green Example button in firefox, I just get a script error then a crash. I've tried over 10 times with the same results. I will try on my home computer to see if it's just my computer or not.

I will let you know about the solution to my problem though.

[wakasm]

Progress! I had to change

JS Code

container: $('.TargetDivForToolTip')

to

JS Code

container: $('div.TargetDivForToolTip')

Which now works in Firefox and Safari Just fine... but not IE7

However, the pulling content from

JS Code

content: $('.MyContentForToolTip1'),
 
and/or
 
 content: $('div.MyContentForToolTip1'),

Isn't working still for me at all. I'm getting closer though. I did try changing it to this.

(BTW. I appreciate the rapid response in help. I made a donation to help the cause.)

[Craig]

First of all thanks for making a donation! Hosting renewel is up soon so it will definitely help out a lot!

On the content bug, this is actually a big pain the neck that's caused a lot of duplicate bug reports. At the moment specifying an element as the content breaks the library. What you ahve to do instead is specify it using the .html() method like so:

JS Code

content: $('div.MyContentForToolTip1').html()

That should fix your issues!

[wakasm]

Alrighty. Much closer. Hoping to be done before I reach the dreaded 10 post count!

1) Loading the Tooltip from a container doesn't work in IE7 for me (I guess that's a bug?). Works in FF3 and Safari though.

2) If I wanted to create a link to close a tooltip using the above example (pulling content from a DIV), would this be the correct method using the API?

JS Code

<a href="#" o<strong></strong>nclick="$('a.MyToolTip1').qtip('hide');">Close2</a>
 
MyToolTip1 - being the opened tooltip
MyContentForToolTip1 - being the div where content is pulling from
TargetDivForToolTip - being the location where the tooltip appears

[Craig]

Could you post the pages HTML you're using? I'd like to create a testcase for this locally so I can test it thoroughly and figure out why IE7 is being a little bi*** (as per usual) about something trivial!

Regarding you're second post that's precisely how you should it!

[wakasm]

craig Wrote:Could you post the pages HTML you're using? I'd like to create a testcase for this locally so I can test it thoroughly and figure out why IE7 is being a little bi*** (as per usual) about something trivial!

Regarding you're second post that's precisely how you should it!

I would absolutely love to except right now the portion where this is all set up is on another companies development server (which needs a user/pass) to access or even view. I would have to get permission. However, if you want to recreate a scenerio where it doesn't load in IE, you can just use this code. I included all the js that's being used for troubleshooting. I uploaded that exact file and it failed to work in IE7. Hope that helps!! (I promise to give you an url once I get permission to)

JS Code

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.3.3.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.qtip-1.0.0-beta4.min.js"></script>
 
 
<html>
<head>
 
</head>
<body>
 
<a href="#" class="MyToolTip1">HERE NOW</a>
 
<div class="MyContentForToolTip1" style="display:none;">
 
 
 
<a href="#" style="float: right;" o<strong></strong>nclick="$('a.MyToolTip1').qtip('hide');">Close</a>
Content to be loaded into ToolTip. 
</div>
 
<div class="TargetDivForToolTip" style="width:500px;height:200px;">
 
</div>
 
 
 <script type="text/javascript">
$('a.MyToolTip1').qtip({
   content: $('div.MyContentForToolTip1').html(),
   hide: {
       when: {event: 'mousedown' },
         },
   show: { when: { event: 'click' } },
   position: {
      type: 'static',
      container: $('div.TargetDivForToolTip')
   },
});
</script>
</body>
</html>

By the way, I figured out why my API call wasn't working. Apparently I was randomly generating products for the tooltips to appear using the ISBN... not realizing that I wasn't checking for duplicate products. So Anytime there was the same book twice on the page... it would fail. It's working now (but not in IE).

[wakasm]

Ok. I'm 99.5% where I need to be.

Two things.

1) Any luck on fixing the above in IE for the next update? (I suppose I'll find out tomorrow?)

2) Here is some code. I have everything the way I want when writing the code for each item. I'm instead now trying to adapt what I did for a function that handles everything. So far, it all works except for the piece that pulls the content from a div. From my old code, this is the piece that handled that.

JS Code

content: $('div.tt123456789').html(),

I am now trying to adapt my code to using the Element attributes Tooltips so I can delare just one function on the page. The below code is what I'm using... and basically I'm stuck on the syntax on how to get the content to work on this line content: content. It's basically supposed to pull from a div that looks like this...

JS Code

<div id="content">
<a href="#" tooltip="123456789">Click Here</a>
<a href="#" tooltip="987654321">Click Here</a>
</div>
 
<div class="tt123456789">Content to load</div>
<div class="tt987654321">Content to load</div>

JS Code

<script type="text/javascript">
 
$(document).ready(function()
{
 
   $('#content a[tooltip]').each(function()
   {
 
      var content = '$("div.tt';  // THIS IS WHERE I AM MESSING UP
      content += $(this).attr('tooltip');
      content += '").html()';
 
 
      $(this).qtip({
         content: content, // THIS IS WHERE I'M MESSING UP
   hide: {
       when: {event: 'mousedown' },
         },
   show: { when: { event: 'click' } },
   position: {
      type: 'static',
      container: $('div.target1')
   },
   style: {
      'background-image': 'url("images/1x1t.png")',
      'background-color': 'transparent',
      width: 530,
      height: 224
   }
      });
   });
});
</script>

BTW, Hope you had a happy easter!

[wakasm]

Bleh. Finally figured it out. Sorry for the double, triple post, but maybe this will help others out!

JS Code

<script type="text/javascript">
 
$(document).ready(function()
{
 
   $('#content a[tooltip]').each(function()
   {
      var ID = $(this).attr('tooltip');
 
      $(this).qtip({
         content: $('div.'+ID+'').html(),
   hide: {
       when: {event: 'mousedown' },
         },
   show: { when: { event: 'click' } },
   position: {
      type: 'static',
      container: $('div.target1')
   },
   style: {
      'background-image': 'url("images/1x1t.png")',
      'background-color': 'transparent',
      width: 530,
      height: 224
   }
      });
   });
});
</script>

[Craig]

Glad to hear you got it sorted! Sorry I wasn't of much use in this instance, I couldn't even get mine to reproduce the bug that was occuring! Useless IE...

[wakasm]

craig Wrote:Glad to hear you got it sorted! Sorry I wasn't of much use in this instance, I couldn't even get mine to reproduce the bug that was occuring! Useless IE...

No worries. It's much better when I figure something out anyway, it means I learned something. I just hate when I struggle for 2 hours, then post for help, then find the solution 20 minutes later. The above script sped my page loads up extremely.

however - the IE bug is still there and holding out for RC1 to check and see if it fixes it.

Both the code I posted way back and this most recent bit do not work in IE7. It's the portion that pulls from the div. It just loads nothing. If I get some time today I'll load it onto a public server and see if it works for IE for you. I've checked it on 3 computers so far and it wouldn't work on all 3 in IE but works perfect in FF3 and Safari.

[wakasm]

Sorry for the delay in posting the problem, was waiting for the rc candidate to see if this was fixed.

Here is an example of my problem

http://www.peoplescollegeprep.com/test/

Works fine in FF and Safari. Doesn't work in IE7.

With the new RC1 it doesn't work in any.

Thanks!

[Craig]

I've registered the bug on launchpad and targeting it for the rc2 release. Working on a fix for it at the moment but if you do find a fix, post it here!

[wakasm]

Just wanted to update you that RC2 seems to fix it in firefox and safari.

However, still not working in IE7.

RC2 version - http://www.peoplescollegeprep.com/test/

And sorry, I haven't found any solutions yet :|

[Craig]

Hey wakasm,

Thanks for the update, and glad to know it's working as it should now. In regards to the IE bug, you've got a trailing comma in there that's causing it. Try removing the comma after the position {}, part.

[wakasm]

craig Wrote:Hey wakasm,

Thanks for the update, and glad to know it's working as it should now. In regards to the IE bug, you've got a trailing comma in there that's causing it. Try removing the comma after the position {}, part.

Both of these don't work in IE for me but perfectly in FF and Safari.

JS Code

<script type="text/javascript">
$('a.MyToolTip1').qtip({
   content: $('div.MyContentForToolTip1').html(),
   hide: {
       when: {event: 'mousedown' },
         },
   show: { when: { event: 'click' } },
   position: {
      type: 'static',
      container: $('div.TargetDivForToolTip')
   }
});
</script>

and

JS Code

<script type="text/javascript">
$('a.MyToolTip1').qtip({
   content: $('div.MyContentForToolTip1').html(),
   hide: {
       when: {event: 'mousedown' },
         },
   show: { when: { event: 'click' } },
   position: {
      type: 'static',
      container: $('div.TargetDivForToolTip')
   },
});
</script>

[Craig]

You've still got a trailing comma in there after the event part. You can also shorten down you're code somewhat:

JS Code

$('a.MyToolTip1').qtip({
   content: $('div.MyContentForToolTip1').html(),
   position: {
      type: 'static',
      container: $('div.TargetDivForToolTip')
   },
   show: 'click',
   hide: 'mousedown'
});

It's also now possible to use a DOM reference as your content as yo uwanted originally e.g.

JS Code

content: $('div.MyContentForToolTip1'),

[wakasm]

I just wanted to throw up a late post (Wow, it's July already?)

The site I implemented qtip on is located http://www.peoplescollegeprep.com/. I will probably post other sites that I use it on - but I was rather happy with how far the functionality took me.

I use it as a lightbox in the sign-up
I use it as a tool-tip in the news section
I use it for very very precise functionality (via Ajax) in the bookshelf section in the homepage.

Very useful indeed! I hope whatever donations I put your way helped! Others should give too, it's well worth it!

I did have one more question...

At some point I was trying to use a php include('insert file') for a quick work around for something on a side project in combination with qtip and found that anything in the include would not utilize qtip while everything else on the page did. Is this a bug or a limitation of jquery itself?

Thanks!

[Craig]

wakasm,

Thanks for posting details about a site you used qTip on, always great to see examples of what you can achieve with qTip on an end product. It's really nice to hear you found it so useful, and the donations as always were very welcome, thank you.

Regarding the include, it shouldn't really effect the pages JS at all since its parsed as the client retrieves the page. Are you sure there was no error in your code?

[wakasm]

Fairly sure there was no error in the code.

Basically what I did to test it was.... (for visualization)

<static html> <-- Tool Tips Worked
<php include> <-- Tool Tips Did Not Work
<static html> <-- Tool Tips Worked

I then went to view source - copied all the content from the <php include> file and pasted it as static html like so.

<static html> <-- Tool Tips Worked
<pasted static html> <-- Tool Tips Worked
<static html> <-- Tool Tips Worked

This was on a wordpress page - which might also have something to do with it. It was a quick fix anyway - I got it working via other means and by actually building a wordpress module for it - but for some reason I just couldn't get it to work via <php include>. Maybe I'll recreate it on a non-wordpress site for testing.

[Craig]

That sounds very odd indeed, as PHP should in no way effect the performance or parsing of JavaScript... most definitely sounds like a limitation of the way WordPress handles includes.