Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Made the place to insert the element configurable #47

Open
wants to merge 2 commits into from

2 participants

Pelle Wessman Andreas Hucks
Pelle Wessman

Added two new options for defining where to the tipsy tooltip should be added in the dom tree.

One option, insertTo, defines which element it should be inserted in relation to and the other new option, insertMethod, defines how to add the tooltip.

Code has been added to adjust the position of the tooltip according to the position of the tooltip elements offsetParent - this makes sure that it's always positioned in the right place no matter where in the dom tree it is inserted.

An advantage of adding the tooltip deeper into the dom tree is that it may move together with that content if eg. the position of a common container was to be changed - which eg. happens on a centered site whenever the browser is resized.

Andreas Hucks

This improvement is also important when attaching tooltips inside panels only visible on mouse over. Although IMHO a solution using a callback would be better, since it will allow for containers relative to the element triggering the tooltip. An implementation is #79.

Cheers

voxpelli added some commits
Pelle Wessman voxpelli Made the place to insert the element configurable
Added two new options for defining where to the tipsy tooltip should be added in the dom tree.

One option, insertTo, defines which element it should be inserted in relation to and the other new option, insertMethod, defines how to add the tooltip.

Code has been added to adjust the position of the tooltip according to the position of the tooltip elements offsetParent - this makes sure that it's always positioned in the right place no matter where in the dom tree it is inserted.

An advantage of adding the tooltip deeper into the dom tree is that it may move together with that content if eg. the position of a common container was to be changed - which eg. happens on a centered site whenever the browser is resized.
a4be7b6
Pelle Wessman voxpelli Added possibility to define tipsy placement through a function.
As requested in jaz303#79
5e1ed67
Pelle Wessman

Updated to support the use case mentioned above and also updated to use jQuery's own offset() method to position the tooltip instead of calculating the position ourselves and then use jQuery's css() method to position it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 8, 2011
  1. Pelle Wessman

    Made the place to insert the element configurable

    voxpelli authored
    Added two new options for defining where to the tipsy tooltip should be added in the dom tree.
    
    One option, insertTo, defines which element it should be inserted in relation to and the other new option, insertMethod, defines how to add the tooltip.
    
    Code has been added to adjust the position of the tooltip according to the position of the tooltip elements offsetParent - this makes sure that it's always positioned in the right place no matter where in the dom tree it is inserted.
    
    An advantage of adding the tooltip deeper into the dom tree is that it may move together with that content if eg. the position of a common container was to be changed - which eg. happens on a centered site whenever the browser is resized.
  2. Pelle Wessman
This page is out of date. Refresh to see the latest.
Showing with 10 additions and 3 deletions.
  1. +10 −3 src/javascripts/jquery.tipsy.js
13 src/javascripts/jquery.tipsy.js 100644 → 100755
View
@@ -24,7 +24,12 @@
$tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
$tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
- $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);
+
+ var insertTo = this.options.insertTo;
+ if (typeof insertTo == 'function') {
+ insertTo = insertTo.call(this.$element[0]);
+ };
+ $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'})[this.options.insertMethod](insertTo);
var pos = $.extend({}, this.$element.offset(), {
width: this.$element[0].offsetWidth,
@@ -59,7 +64,7 @@
}
}
- $tip.css(tp).addClass('tipsy-' + gravity);
+ $tip.offset(tp).addClass('tipsy-' + gravity);
$tip.find('.tipsy-arrow')[0].className = 'tipsy-arrow tipsy-arrow-' + gravity.charAt(0);
if (this.options.className) {
$tip.addClass(maybeCall(this.options.className, this.$element[0]));
@@ -188,7 +193,9 @@
offset: 0,
opacity: 0.8,
title: 'title',
- trigger: 'hover'
+ trigger: 'hover',
+ insertTo: 'body',
+ insertMethod: 'prependTo'
};
// Overwrite this method to provide options on a per-element basis.
Something went wrong with that request. Please try again.