Please Log-in or Register to get full access to the forums.


Post Reply 
 
Thread Rating:
  • 1 Votes - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Solved] Viewport not working with absolute positioning.
28th February, 19:27
Post: #1
[Solved] Viewport not working with absolute positioning.
JS Code
initializeToolTip: function () {
        $(".offer-item").each(function () {
            $(this).hover().qtip({
                content: {
                    text: 'loading...',
                    title: {
                        button: true
                    },
                    ajax: {
                        url: '/Fakepath/ToolTips/ToolTipHover',
                        type: 'GET'
                    }
                },
 
                style: {
                    classes: { tooltip: 'auction-item-tooltip' }
                },
 
                show: {
                    solo: true
                },
 
                position: {                
                    viewport: $(window),
                    target: $(this),
                    my: 'top right',
                    at: 'top right',
                    adjust: {
                        method: 'flip flip',
                        x: 280,
                        y: -20
                    }
                },
 
                hide: 'unfocus'
 
            });
        });
 
    },
 
    initializeCloseToolTip: function () {
        $('a.close-tooltip').live("click", function (e) {
            e.preventDefault();
            $(this).parents('.qtip').qtip('hide');
        });
    }


Trying to get the last element to flip sides when outside of the window to no avail. Been looking at position.container and viewport to no avail. Anybody know if I'm doing something wrong? I have 5 <article>'s with tool tips next to each other, then on the last one I want the positioning to switch to 'top left' and opposite positioning.

Any help is much appreciated. Thanks for your time! Awesome plugin btw!

Here's some SS's of whats going on.

Regular: http://i.imgur.com/bI3oR.jpg

Cut-off http://i.imgur.com/wWhyq.jpg

Thanks again!
Visit this user's website Find all posts by this user
Quote this message in a reply
28th February, 22:46
Post: #2
RE: Viewport not working with absolute positioning.
Well first make sure you're using qTip2, since that's the forum you've posted in and the syntax you're using Wink If you ARE using qTip2, then the above should work as expected.
Visit this user's website Find all posts by this user
Quote this message in a reply
28th February, 22:49
Post: #3
RE: Viewport not working with absolute positioning.
I assure you I'm using QTip2 ;}

/*
* qTip2 - Pretty powerful tooltips
* http://craigsworks.com/projects/qtip2/

In jquery.qtip.min.js

It's still not working. does the viewport option work with using the absolute positioning option?

I have this cross posted on stackoverflow http://stackoverflow.com/questions/94892...ositioning

Thanks for the quick response Craig, lovely plugin.
Visit this user's website Find all posts by this user
Quote this message in a reply
28th February, 22:56
Post: #4
RE: Viewport not working with absolute positioning.
Oh sorry, I totally missed the absolute positioning part. Can you setup a test case on jsfiddle http://jsfiddle.net/fdavn
Visit this user's website Find all posts by this user
Quote this message in a reply
28th February, 23:19 (This post was last modified: 28th February 23:20 by thoughtpalette.)
Post: #5
RE: Viewport not working with absolute positioning.
(28th February 22:56)Craig Wrote:  Oh sorry, I totally missed the absolute positioning part. Can you setup a test case on jsfiddle http://jsfiddle.net/fdavn

Removed the ajax call and inner content (using Razor models) for clarity.

http://jsfiddle.net/fDavN/2761/

If you re-size the [Results] window to where all the divs line up, you can see on hover of the last one, that it doesn't re-position. :{

Let me know if there's anything else I can do to make this easier for you.

Thanks again Craig!
Visit this user's website Find all posts by this user
Quote this message in a reply
29th February, 01:06
Post: #6
RE: Viewport not working with absolute positioning.
Well the viewport positioning is working, it just seems like it isn't thanks to the adjust.x/y settings you've set! Remove those and you can see it working Smile
Visit this user's website Find all posts by this user
Quote this message in a reply
29th February, 15:23
Post: #7
RE: Viewport not working with absolute positioning.
(29th February 01:06)Craig Wrote:  Well the viewport positioning is working, it just seems like it isn't thanks to the adjust.x/y settings you've set! Remove those and you can see it working Smile

I need it at that position per the design comps :{

It's alright, apparently my lead wrote some scripts when he used your plugin on another site where it calculates the window size and flips it based on left or right. We'll probably end up using that.

Good to know viewport and absolute position don't work in tandem though!

Thanks again Craig!
Visit this user's website Find all posts by this user
Quote this message in a reply
29th February, 17:56
Post: #8
RE: Viewport not working with absolute positioning.
That's not absolute positioning though... you're just adjusting the positioning calculated by qTip? If you basically want it at the top right of the div you can achieve as you've done using the position parameters
Visit this user's website Find all posts by this user
Quote this message in a reply
29th February, 17:59
Post: #9
RE: [Solved] Viewport not working with absolute positioning.
What are the x/y coordinates for if not setting an offset/hard position? The element in theory is "absolutely" positioned based on the coordinates provided through the plugin options.
Visit this user's website Find all posts by this user
Quote this message in a reply
29th February, 18:17
Post: #10
RE: [Solved] Viewport not working with absolute positioning.
They are to "adjust" the currently calculated position, hence why it's inside the position.adjust object Wink If you want to position it absolutely i.e. set it's left/top position manually, use the syntax below, as detailed in the documentation: http://craigsworks.com/projects/qtip2/do...on/#target
JS Code
position: {
	target: [100, 100] // [ left, top ]
}
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Button events on qtip not working pratik.sathaye 1 174 25th February 18:39
Last Post: Craig
  [Solved] ASP.Net button inside qtip2 not working japogs007ph 4 291 19th February 01:57
Last Post: japogs007ph
  Keep the tooltip in the viewport, but not if the user scrolls shahaf 0 242 31st January 08:08
Last Post: shahaf
  [Solved] One qTip2 code for multiple elements not working. xMoltenX 4 396 2nd January 09:08
Last Post: Craig
  [Solved] jQuery .each() not working, any other ways? xMoltenX 2 343 2nd January 09:07
Last Post: Craig
  [Solved] qtip stopped working even on jsfiddle bekkka 2 270 17th December 20:54
Last Post: bekkka
  [Solved] Qtip2 tooltip viewport postion not working as expected sarathsprakash 1 308 12th December 10:25
Last Post: Craig
  [Solved] Bug with AJAX and Plugin Viewport vanitom 1 1,320 7th December 13:48
Last Post: Craig
  [Solved] Dynamic loading of content using ajax not working Shweta Arora 1 581 29th October 10:42
Last Post: Craig
  [Solved] Resize qTip to fit viewport WeaponX86 7 553 8th October 20:53
Last Post: WeaponX86



User(s) browsing this thread: 1 Guest(s)