Skip to content

Commit

Permalink
Postpone Tippy until document-ready event
Browse files Browse the repository at this point in the history
Maybe fixes #27
  • Loading branch information
NilsEnevoldsen committed Apr 25, 2018
1 parent 07e83ba commit d20d42d
Showing 1 changed file with 43 additions and 40 deletions.
83 changes: 43 additions & 40 deletions modules/ext.scryfallLinks.tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,48 @@
document.body.append( el );
}() );

/* global tippy */
const tip = tippy( '.ext-scryfall-link', {
arrow: false,
animateFill: false,
html: '#js--card-popup',
placement: 'bottom',
interactive: 'true',
delay: [ 500, 0 ],
animation: 'scale',
duration: 200,
performance: true,
theme: 'scryfall',
onShow() {
// `this` inside callbacks refers to the popper element
const target = this._reference,
title = target.text,
cardNameQuery = '&exact=' + target.dataset.cardName,
cardSet = target.dataset.cardSet,
cardSetQuery = cardSet ? '&set=' + cardSet : '',
formatQuery = '&format=image',
versionQuery = '&version=normal',
imageSrc = 'https://api.scryfall.com/cards/named?' + cardNameQuery + cardSetQuery + formatQuery + versionQuery,
imageElement = '<img class="ext-scryfall-cardimage" width="244" alt="' + title + '" src="' + imageSrc + '">',
anchorElement = '<a href="' + target.href + '">' + imageElement + '</a>';

this.querySelector( '.tippy-content' ).innerHTML = anchorElement;
},
onHidden() {
this.querySelector( '.tippy-content' ).innerHTML = '';
},
// prevent tooltip from displaying over button
popperOptions: {
modifiers: {
preventOverflow: {
enabled: false
},
hide: {
enabled: false
$( function () {
/* global tippy */
const tip = tippy( '.ext-scryfall-link', {
arrow: false,
animateFill: false,
followCursor: true,
html: '#js--card-popup',
placement: 'bottom',
interactive: true,
touchHold: true,
delay: [ 50, 0 ],
animation: 'fade',
duration: 0,
performance: true,
theme: 'scryfall',
onShow() {
// `this` inside callbacks refers to the popper element
const target = this._reference,
title = target.text,
cardNameQuery = '&exact=' + target.dataset.cardName,
cardSet = target.dataset.cardSet,
cardSetQuery = cardSet ? '&set=' + cardSet : '',
formatQuery = '&format=image',
versionQuery = '&version=normal',
imageSrc = 'https://api.scryfall.com/cards/named?' + cardNameQuery + cardSetQuery + formatQuery + versionQuery,
imageElement = '<img class="ext-scryfall-cardimage" width="244" alt="' + title + '" src="' + imageSrc + '">',
anchorElement = '<a href="' + target.href + '">' + imageElement + '</a>';
this.querySelector( '.tippy-content' ).innerHTML = anchorElement;
},
onHidden() {
this.querySelector( '.tippy-content' ).innerHTML = '';
},
// prevent tooltip from displaying over button
popperOptions: {
modifiers: {
preventOverflow: {
enabled: false
},
hide: {
enabled: false
}
}
}
}
} );
} );
}() );

1 comment on commit d20d42d

@NilsEnevoldsen
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, I also committed some #25 stuff here.

Please sign in to comment.