Skip to content

Commit

Permalink
fixed #491 and #520
Browse files Browse the repository at this point in the history
  • Loading branch information
@louisameline
louisameline committed May 22, 2016
1 parent 9e6c091 commit 9ce76e9
Show file tree
Hide file tree
Showing 11 changed files with 408 additions and 297 deletions.
5 changes: 3 additions & 2 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<script type="text/javascript" src="./svg.min.js"></script>
<script type="text/javascript" src="./svg.screenbox.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="../dist/js/tooltipster.bundle.min.js"></script>
<script type="text/javascript" src="../dist/js/tooltipster.bundle.js"></script>

<script type="text/javascript">

Expand Down Expand Up @@ -182,7 +182,6 @@
</script>
</head>
<body>

<section class="container tooltip hover" title="Block element">
<a href="http://google.com" class="tooltip hover" title="Inline element">Google</a>
</section>
Expand All @@ -199,6 +198,8 @@
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio placeat sunt quasi laudantium. <strong class="tooltip hover inline" title="First">Voluptatum consectetur voluptatem rem, sapiente, neque vero esse dicta veritatis accusamus!</strong> Obcaecati at in ad sit odio aliquid expedita quibusdam asperiores ducimus eos, tenetur quasi dolores quae iste quaerat, maxime consectetur!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio placeat sunt quasi laudantium. <strong class="tooltip hover inline" title="First">Voluptatum consectetur tempor voluptatem rem, sapiente, neque vero esse dicta veritatis accusamus reprehenderit eos deserunt eleifend!</strong> Obcaecati at in ad sit odio aliquid expedita quibusdam asperiores ducimus eos, tenetur quasi dolores quae iste quaerat, maxime consectetur!</p>
<p><strong class="tooltip hover inline" title="First">Quasi consequuntur aut, mollitia, tempore exercitationem rerum neque ad, expedita deserunt dolores alias<br />quae assumenda id facere cum laudantium tenetur corrupti ipsam deleniti quas eveniet ratione sit nulla officia recusandae.</strong></p>
<!-- this paragraph is a demonstration of issue #491 and our included fix for it -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio placeat sunt quasi laudantium. <strong class="tooltip hover inline target" title="First"><i>Voluptatum</i> <i>consectetur</i> <i>tempor</i> <i>voluptatem</i> rem, sapiente, neque vero esse dicta veritatis accusamus reprehenderit eos deserunt eleifend!</strong> Obcaecati at in ad sit odio aliquid expedita quibusdam asperiores ducimus eos, tenetur quasi dolores quae iste quaerat, maxime consectetur!</p>
</section>

<section id="scrollable" class="container">
Expand Down
101 changes: 48 additions & 53 deletions demo/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,49 @@
/* Main */

body {
background-color: #dcdcdc;
color: #0b0b0b;
font-size: 16px;
line-height: 22px;
}

.container, #container {
width: 978px;
margin: 10px auto;
padding: 60px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
background: #fff;
text-align: left;
display: block;
overflow: hidden;
}

.inline:hover {
background: khaki;
}

.item {
width: 200px;
float: left;
padding: 10px;
margin: 10px;
background: #000;
color: #fff;
}

#genderChart1 {
height: 300px;
width: 300px;
margin: 0 auto;
}

#inline_container p {
margin: auto;
width: 300px;
}

#scrollable {
height: 300px;
overflow: scroll;
}

#scrollable2 {
border: 1px solid gray;
height: 250px;
overflow: scroll;
/* Main */

body {
background-color: #dcdcdc;
font-size: 16px;
line-height: 22px;
}

.container, #container {
width: 978px;
margin: 10px auto;
padding: 60px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
background: #fff;
text-align: left;
display: block;
overflow: hidden;
}

.item {
width: 200px;
float: left;
padding: 10px;
margin: 10px;
background: #000;
color: #fff;
}

#genderChart1 {
height: 300px;
width: 300px;
margin: 0 auto;
}

#inline_container p {
margin: auto;
width: 300px;
}

#scrollable {
height: 300px;
overflow: scroll;
}

#scrollable2 {
border: 1px solid gray;
height: 250px;
overflow: scroll;
}
70 changes: 54 additions & 16 deletions dist/js/tooltipster.bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
// collects plugins in their bare object form
plugins = {},
// don't set manually, it will be updated by Grunt after the manifest
semVer = '4.0.0rc43';
semVer = '4.0.0rc44';


// global methods
Expand Down Expand Up @@ -284,6 +284,8 @@
this.geometry;
// proxy the variable for display plugins who may use it
this.IE = IE;
// to fix a touch issue
this.ignoreNextClick = false;
this.mouseIsOverOrigin = false;
// a unique namespace per instance
this.namespace = 'tooltipster-'+ Math.round(Math.random()*100000);
Expand All @@ -294,7 +296,7 @@
this.$originParents;
// to remove themes if needed
this.previousThemes = [];
// the state can be either : appearing, stable, disappearing, closed
// the state can be either: appearing, stable, disappearing, closed
this.state = 'closed';
// timeout references
this.timeouts = {
Expand Down Expand Up @@ -325,7 +327,7 @@
// some options may need to be reformatted
self._optionsFormat();

// note : the content is null (empty) by default and can stay that
// note: the content is null (empty) by default and can stay that
// way if the plugin remains initialized but not fed any content. The
// tooltip will just not appear.

Expand All @@ -347,7 +349,7 @@

// If content is provided in the options, it has precedence over the
// title attribute.
// Note : an empty string is considered content, only 'null' represents
// Note: an empty string is considered content, only 'null' represents
// the absence of content.
// Also, an existing title="" attribute will result in an empty string
// content
Expand Down Expand Up @@ -634,7 +636,7 @@
// clone if asked. Cloning the object makes sure that each instance has its
// own version of the content (in case a same object were provided for several
// instances)
// reminder : typeof null === object
// reminder: typeof null === object
if (content instanceof $ && this.options.contentCloning) {
content = content.clone(true);
}
Expand Down Expand Up @@ -1018,8 +1020,11 @@

var self = this;

// if the destruction process has not begun
if (!self.destroying) {
// if the destruction process has not begun and if this was not
// triggered by an unwanted emulated click event
if ( !self.destroying
&& (!event || !self.ignoreNextClick)
) {

// check that the origin is still in the DOM
if (bodyContains(self.$origin)) {
Expand Down Expand Up @@ -1233,7 +1238,7 @@
// if the user touches the body, close
if (deviceHasTouchCapability) {

// timeout 0 : to prevent immediate closing if the method was called
// timeout 0: to prevent immediate closing if the method was called
// on a click event and if options.delay == 0 (because of bubbling)
setTimeout(function() {

Expand Down Expand Up @@ -1298,14 +1303,37 @@
// to close the tooltip
if (self.options.triggerClose.click) {

// explanations : same as above
// explanations: same as above
setTimeout(function() {

if (self.state != 'closed') {

$('body').on('click.'+ self.namespace +'-triggerClose touchstart.'+ self.namespace +'-triggerClose', function(event) {
if (!self.options.interactive || !$.contains(self.$tooltip[0], event.target)) {

self._close(event);

// the touchstart event is about to be emulated into a click event. But now the
// tooltip is closed, if this emulated click happens on the origin, it will open
// the tooltip again right away (at least in Safari, not sure why the other
// browsers decide not to reopen it). We could call event.preventDefault() to
// prevent the emulation but it could also prevent browser normal behaviors like
// scrolling or zooming, so we'll let the click be triggered and just ignore it
// in ::_openNow()
if ( event.type == 'touchstart'
&& ( self.$origin[0] === event.target
|| $.contains(self.$origin[0], event.target)
)
) {

self.ignoreNextClick = true;

// the emulated click is triggered a crazy long time after the touch event,
// at least on an iPhone4
setTimeout(function() {
self.ignoreNextClick = false;
}, 500);
}
}
});
}
Expand Down Expand Up @@ -1410,9 +1438,9 @@
// in case we're resetting the triggers
self.$origin.off('.'+ self.namespace +'-triggerOpen');

// for 'click' and 'hover' open triggers : bind on events to open the tooltip.
// for 'click' and 'hover' open triggers: bind on events to open the tooltip.
// Closing is now handled in _openNow() because of its bindings.
// Notes about touch events :
// Notes about touch events:
// - mouseenter, mouseleave and clicks happen even on pure touch devices
// because they are emulated. deviceIsPureTouch() is a simple attempt
// to detect them.
Expand Down Expand Up @@ -1443,8 +1471,8 @@

if (self.options.triggerOpen.click) {

// note : for touch devices, we do not bind on touchstart, we only rely
// on the emulated clicks (triggered by taps)
// note: for touch devices, we do not bind on touchstart, we only rely
// on the emulated clicks (emulated after touchstart)
self.$origin.on('click.'+ self.namespace +'-triggerOpen', function(event) {
if (!deviceIsPureTouch() || self.options.touchDevices) {
self._openNow(event);
Expand Down Expand Up @@ -2172,7 +2200,7 @@

// for using in closures
var args = Array.prototype.slice.apply(arguments),
// common mistake : an HTML element can't be in several tooltips at the same time
// common mistake: an HTML element can't be in several tooltips at the same time
contentCloningWarning = 'You are using a single HTML element as content for several tooltips. You probably want to set the contentCloning option to TRUE.';

// this happens with $(sel).tooltipster(...) when $(sel) does not match anything
Expand Down Expand Up @@ -2347,7 +2375,7 @@

/**
* Move the tooltip into an invisible div that does not allow overflow to make
* size tests. Note : the tooltip may or may not be attached to the DOM at the
* size tests. Note: the tooltip may or may not be attached to the DOM at the
* moment this method is called, it does not matter.
*/
_init: function() {
Expand All @@ -2370,7 +2398,7 @@
*/
_forceRedraw: function() {

// note : this would work but for Webkit only
// note: this would work but for Webkit only
//this.$tooltip.close();
//this.$tooltip[0].offsetHeight;
//this.$tooltip.open();
Expand Down Expand Up @@ -3321,6 +3349,16 @@
var target,
rects = this.instance.$origin[0].getClientRects();

// these lines fix a Chrome bug (issue #491)
if (rects.length > 1) {
var opacity = this.instance.$origin.css('opacity');
if(opacity == 1) {
this.instance.$origin.css('opacity', 0.99);
rects = this.instance.$origin[0].getClientRects();
this.instance.$origin.css('opacity', 1);
}
}

// by default, the target will be the middle of the origin
if (rects.length < 2) {

Expand Down
4 changes: 2 additions & 2 deletions dist/js/tooltipster.bundle.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 9ce76e9

Please sign in to comment.