Tooltip Position Issues #798

Open
aashish108 opened this Issue Jul 15, 2016 · 0 comments

Projects

None yet

1 participant

@aashish108
aashish108 commented Jul 15, 2016 edited

Hi!

After an AJAX request is successful (takes several seconds as its on a test env), the new content replaces the 'loading...' content but the tooltip remains in the same position.

See screenshot: http://assets.matchesfashion.com.s3.amazonaws.com/Aashish-dev/images/Screen%20Shot%202016-07-15%20at%2011.57.22%20(3).png

I am hovering over ALTUZARRA and the tooltips position is initially correct with the loading text but after the AJAX call populates the bubble then it all goes wrong. Hovering out and back corrects the alignment issue.

I've tried the api.reposition() after the new data is in the bubble but it does absolutely nothing in this case! I have been fiddling around with a lot of settings for a few days but nothing seems to work properly.

Another issue is that part of the tooltip disappears near the bottom: http://assets.matchesfashion.com.s3.amazonaws.com/Aashish-dev/images/Screen%20Shot%202016-07-15%20at%2012.04.11%20(3).png

The flipinvert doesn't help in this case and I have fiddled with the viewport settings to no avail.

This is my code btw:

$(".designeraz__list__item").qtip({ // Grab some elements to apply the tooltip to
content: {
text: function(event, api) {
var $this = this;
$.ajax({
text: 'default content',
cache: true,
url: '/api/designers/rolloverPreview?designerCategory=' + $this.attr('id'),
type: 'GET', // POST or GET
dataType: 'json', // Tell it we're retrieving JSON
data: {
id: $this.attr('id') // Pass through the ID of the current element matched by '.selector'
}
})
.done(function(data) {
var source = $("#designer-rollover-template").html();
var template = Handlebars.compile(source);
Handlebars.registerHelper('trimString', function(passedString) {
// var theString = passedString.substring(0,160);
var trimmed_string = passedString.replace(/^(.{150}[^\s])./, "$1");
return new Handlebars.SafeString(trimmed_string + '...');
});
var context = data;
var html = template(context);
$('.designer-rollover-container').html(html);
// Now we set the content manually (required!)
api.set('content.text', $('.designer-rollover-container .d-popup-container') );
api.reposition();
})
.fail(function(xhr, status, error) {
api.set('content.text', status + ': ' + error);
});
return '
Loading...

';
}
},
position: {
my: 'left center', // Position my top left...
at: 'right center', // at the bottom right of...
viewport: $(window),
adjust: {
method: 'flipinvert',
mouse: false,
}
},
style: {
classes: 'qtip-plain',
tip: {
border: 1,
width: 19,
height: 13,
}
},
show: {
delay: 1500,
solo: true
},
events: {
show: function(event, api) {
// Only show the tooltip if we are on desktop or large-desktop viewports
if ((MF.breakpoint.getActive() !== 'desktop') && (MF.breakpoint.getActive() !== 'desktop-large')) {
// IE might throw an error calling preventDefault(), so use a try/catch block.
try {
event.preventDefault();
} catch (e) {}
} else {

                                }
                            }
                        }
                    });

Apologies - copy pasting this code doesn't work so good!

This is the qTip build & version details:

/*

  • qTip2 - Pretty powerful tooltips - v3.0.3
  • http://qtip2.com
    *
  • Copyright (c) 2016
  • Released under the MIT licenses
  • http://jquery.org/license
    *
  • Date: Thu May 12 2016 02:04 EDT-0400
  • Plugins: tips viewport imagemap svg modal
  • Styles: core css3
    _/
    /_global window: false, jQuery: false, console: false, define: false */

Would appreciate some help :)

Many thanks

@aashish108 aashish108 changed the title from The Tips position to The Tooltips Position Jul 15, 2016
@aashish108 aashish108 changed the title from The Tooltips Position to Tooltip Position Issues Jul 15, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment