craigsworks.com - Support Forum - All Forums

using $(this).show('slide') breaks window state

Fri, 03 Feb 2012 21:47:48 +0000

http://jsfiddle.net/fDavN/2548/

when using show('slide') clicking each button causes the window to reanimate. also, closing the window and clicking the buttons again causes the window to not show at all.

if you swap these lines in the qtip initialization to use fadeIn() instead (so it's not using a jquery ui feature)
$(this).fadeIn();
//$(this).show('slide');

everything works as intended, any ideas why using the jqueryUI slide animation would break things?
please note i'm using a solo instance with multiple targets using the same window.

Multiple issues with qtip2 and image maps

Fri, 03 Feb 2012 19:47:00 +0000

Hi, got a test case set up at jsfiddle for you to investigate. The project I'm working on is similar to how it is set up there (although bigger) and currently the end-user experience is being hampered by some rather annoying little bugs. If there are perhaps other work arounds you could suggest then I would be grateful!

http://jsfiddle.net/Tj6qC/

[Solved] Center Title Text

Fri, 03 Feb 2012 15:48:12 +0000

Is there a way to center the title text? It currently left aligns the text.

Thanks,

Marty

[Solved] working with hide.target

Fri, 03 Feb 2012 11:28:01 +0000

Hi,

I'm trying to implement a settings menu, where a settings icon is clicked and options are shown.
What I want is, to hide qtip under three scenarios:

1. when anything outside qtip is clicked
2. when any link inside qtip is clicked
3. when the settings icon is clicked again

First 2 cases are working but 3rd one is not.
Please the test on jsFiddle : http://jsfiddle.net/ikhan/WWYEL/1/

Please help me with this.

Thanks

Display images within an area map

Thu, 02 Feb 2012 21:12:54 +0000

I created an area map with multiple elements which need to display images when hovered over. Where do I place the images and where do I call this inside the qtip function?

Scrolling down a page offsets the qtip

Thu, 02 Feb 2012 20:35:55 +0000

I am using qtip on a image map like this:

jQuery('area').each(function()
{
jQuery(this).qtip(
{
content: {
text: 'Punta Penca lots are among the most beautiful parcels of land in the world.',
title: jQuery(this).attr('alt'), // Use the ALT attribute of the area map
},
style: {
name: 'cream', // Give it the preset cream style
border: {
width: 0,
radius: 4
}
tip: true // Apply a tip at the default toosltip corner
},
hide: { fixed: true, delay: 300 }
});
});

For some reason, when I scroll down the page all the quips are displayed very far away from the target. Any suggestions as to how I can fix this?

jslint warnings

Thu, 02 Feb 2012 17:01:06 +0000

Noticing some jslint warnings being thrown after I'd installed FireQuery so I could start seeing realtime warnings in Firebug.

At least one looked like a pretty easy adjustment -- there's a call to stop using int (0/1) rather than boolean:

JS Code

// Clear animation queue if same target
if(sameTarget) { tooltip.stop(0, 1); }

Warnings go away when changing to:

JS Code

if(sameTarget) { tooltip.stop(FALSE, TRUE); }

Correction -- that should be jquery lint, not jslint that FireQuery is using: http://james.padolsey.com/javascript/jquery-lint/

[Solved] Unique Qtip Based on innerHTML

Thu, 02 Feb 2012 07:24:56 +0000

Not sure if this is possible, but I was wondering if it was possible to apply duplicate qtips based on the innerHTML of elements.

Currently, what I'm doing is setting a class on all elements that I want a qtip to be added to. I use jquery to select all elements by that class, then use the ajax plugin to take the element's innerHTML (a username) and pass it to the server. The server sends back information that I populate in the div. Simple as that.

I'm realizing that there could be many elements that end up having the same innerHTML (same username) because I'm displaying a lot of information and it's very likely usernames will be on the page multiple times, so I don't need to use AJAX to get the information for every one - I was just hoping to copy the contents from the first one and apply it to the current one. Does that make sense?

I'm sure I could figure it out if I sat down and looked through what I could do, find out exactly what qtip stores about the element or what I could store, and bring it all together. Or, it may avoidable with just jQuery, not dealing with qtips. But I was just wondering if anything came to mind, to avoid this

Thanks!

[Solved] problem with jquery function called inside a qtip content

Wed, 01 Feb 2012 15:05:17 +0000

Hi,
There is something I can't understand in qtip.
I have a content that has a link inside. This link should launch a jquery function... Outside qtip this is working, inside not. I mean, neither an "alert" is shown...

Can you please help me?

This is the html:

HTML Code

Sample linkTidyUp

 

   test me

 
my other content
 
here it works

and the js:

JAVASCRIPT Code

// Create the tooltips only when document ready
$(document).ready(function() {
    // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
    $('a').qtip({
        content: {
            text: $("#content").html(),
            // Make sure we declare some basic loading content
        },
        position: {
            adjust: {
                screen: true
            } // Adjust to keep in the viewport
        },
        show: {
            delay: 200
        },
        // Give it a reasonable delay so they don't view it accidentally
        hide: {
            fixed: true,
            delay: 100
        },
        // Allow the user the mouseover the tooltip without it hiding
        style: {
            classes: 'ui-tooltip-light ui-tooltip-shadow'
        }
    });
 
 
 
    //event for click inside tooltip
    $('.link').click(function() {
        alert("aaa");
        // your other click code here
    });
 
 
 
});

Marcello

Problem with One tooltip, multiple targets

Wed, 01 Feb 2012 14:45:21 +0000

I Craig,

I have a problem with demo "One tooltip, multiple targets":
http://jsfiddle.net/JulienH/PBdCN/

When you hover "toto" div, tooltip is OK, but if then you hover "tata" div, I don't have tooltip. (tested whit FF and Chrome)

Thanks

[Solved] target: mouse does not render at mouse click position

Tue, 31 Jan 2012 15:39:28 +0000

Hi all,

We noticed that when using target: mouse, tooltips are not being rendered at the position where the mouse was clicked, but rather somewhere the mouse is located (if moved) after the click event has occurred.

That is...if you click to open a tooltip and then move your mouse quickly, the tooltip renders somewhere along the path of your mouse position, not at the position where the click happened.

I've created a reproducer here: http://jsfiddle.net/SgZRC/

Is there any way to make the tooltip render EXACTLY where the mouse was clicked?

Any help would be greatly appreciated! Thank you!

- Matt

Hiding tooltip problem

Tue, 31 Jan 2012 11:57:42 +0000

i am currently opening a tooltip on mouseover of a link. I want to hide it when user focus is out of tooltip.i am using unfocus on hide but it works only when user click outside of div.

Arrows of my tips are not showing correctly

Tue, 31 Jan 2012 11:20:38 +0000

Hi,
I'm using qtip2 with jquery 1.7, and i'm facing the problem described in the subject (arrows in my tips are not showing correctly).
Here is my code :

JS Code

jQuery("#".concat(iconeId)).qtip({
    id: "id",
    content: {
        title: {
            text: 'Erreurs'
        },
        text: myContent
    },
    show: 'mouseover',
    hide: false,
    position: {
        my: 'left center',
        // Position my top left...
        at: 'right center',
        // at the bottom right of...
        target: jQuery("#".concat(iconeId)) // my target
    },
    style: {
        classes: myStyleName,
        padding: 0,
        margin: 0,
        width: 300,
        tip: {
            corner: true
        }
    }
});

and i'm obtaining my component but with a blank space between the arrow and the frame containing the text (see the attachement).

How can i resolve this issue, thanks in advance for your help.

qtip_arrow.png (Size: 1.65 KB / Downloads: 3)

[Solved] qTip2 within qTip2 modal causing overlay to hide

Tue, 31 Jan 2012 05:08:15 +0000

Hi

I have a qTip2 modal window which loads some HTML via an AJAX call. The HTML that is pulled in adds a qTip to a link. This all works fine until you rollover the link in the loaded AJAX, the qTip works fine but when you roll out from the qTip, the modal overlay simply disappears. The modal window itself stays intact. I'm hoping I'm missing something really simple. Code is below:

Main modal code

JS Code

$(document).ready(function() {
$('#win_budgetplanner').qtip({
    content: {
        text: 'dsdsds',
        ajax: {
            url	: "test/new.html"
        },
        title: {
            text: 'test',
            button: true
        }
    },
    position: {
        my: 'center', // ...at the center of the viewport
        at: 'center',
        target: $(window)
    },
    show: {
        event: 'click', // Show it on click...
        modal: true // ...and make it modal
    },
     hide: 'unfocus'    
});
 
});

Link to call main qTip modal

JS Code

<a id="win_budgetplanner" href="##">Budget Plannera>

AJAX content (new.html)

JS Code

<div style='width:300px;height:300px;background-color:#FF0000'>
	<a href='j;' id='test'>test mea>
div>
 
$('#test').qtip({
	content: {
	   text: 'example text', 
	   title: {
		  text: 'Help',
		  button: false
	   }
	},
	position: {
		container: $('#test'),
		at: 'bottom center'
	}, 
 
	style: {
	   classes: 'ui-tooltip-shadow ui-tooltip-tipsy'
	}
});

Any help would be fantastic. Thanks in advance.

Shaun

[Solved] Dynamically show tooltip

Mon, 30 Jan 2012 15:11:17 +0000

Hi.
First, I want to say thank you for tooltіp. Very impressive and useful. Thank you!

And here is my question.
The page has 5 tooltips.

JS Code

$('.cloud').each(function() {
    var content = $($(this).children('.bubble'));
      $(this).qtip({
      content: content,
      show: { ready: true },
      hide: { fixed: true},
      position: { 
        adjust: { x: 5 },
        my: 'top center',
        at: 'bottom center'
      },
      style: {
        tip: { width: 15, height: 8 },
        width: '120'
      }
    });
  });

I need to show them dynamically. One after one.
When you hover over tooltip - stop animation. After losing focus - resume animation.
Maybe you have a good solution. I tried to find it. but nothing like this didn't find.
If you have a time - please help me...

Thnks

[Solved] Need some help:codes in Jquery

Sun, 29 Jan 2012 12:14:55 +0000

$(document).ready(function()
{
var tabs = $('#demo-tabs');
tabs.tabs()
$('[id^="tabs"] a', tabs).each(function() {
$(this).qtip({
content: 'Hey!',
position: {
container: $(this).parents('[id^="tabs"]')
},
style: {
classes: 'ui-tooltip-shadow',
widget: true
}
})
})
});

1.what's the meaning of "tabs.tabs()"?
2.what's the meaning of "$('[id^="tabs"] a', tabs)"?
3.what's the meaning of "[id^="tabs"] a"?

Memory Leak

Sat, 28 Jan 2012 14:32:51 +0000

QTip2 is showing memory leak when i am calling showQTip method. Please advice on this.
Code is here. I am using later version of Qtip2 and jquery. iejsleaksdetactor, drip , sieve tool are telling leak in qtip and jquery.

http://jsfiddle.net/fDavN/2481/

[Solved] qTip is static when page is updated dynamically

Fri, 27 Jan 2012 00:47:21 +0000

I have qTip integrated with the Validation plugin on a very intricate and complex form. My form has many conditional questions which open up various hidden div's revealing other questions. In other words, the content on the page shifts up & down as other content is revealed and hidden. This part works fine.

However, when a form validation error is displayed with a qTip, the qTip will not follow the element as the page is dynamically altered. In other words, as I reveal or hide content in sliding div's, the qTips don't move to follow.

Scrolling the page causes the qTips to re-render and snap to their correct positions but I am wondering if there's a way to force the qTips to follow the elements automatically as dynamic content is hidden and revealed.

I'm seeing this in Webkit and have not yet tested other browsers.

Please see my jsFiddle below and follow these instructions to reproduce the issue.

1) Immediately click on the Submit button to invoke all the qTip error messages.

2) Then click the first radio button to see a DIV slide open.

3) Notice how the rendered qTips will not move down along with the page content.

http://jsfiddle.net/fDavN/2474/

Thank-you!

[Solved] Hover Over AJAX Tooltip

Thu, 26 Jan 2012 17:25:16 +0000

i'm new to qtip2 and have been experimenting with it over the last few hours. specifically i have been looking at the ajax demo. on the ajax demo the tooltip appear when you click on the link. i'd like the tooltip to appear when you hover over the link.

i have looked at the jquery code but its not obvious to me how you would go about achieving this. could someone please point me in the right direction?

many thanks to anyone who can make a contribution to this thread.

[Solved] Image Map & Ajax ?

Thu, 26 Jan 2012 10:46:38 +0000

Hi, been search for a while now and nothing suits my needs. Before I spend time learning qTip2 is it possible to have a image map and ajax combined, I mean I have points on the map and when hover or click a tool tip appears that uses ajax to load a page. I have found others but I don't want the tooltip to close when hover away, I want it like your ajax demo.
Thanks.