From d20d42d1849db0893b63bf8f65f71f33634954a4 Mon Sep 17 00:00:00 2001
From: Nils Enevoldsen <NilsEnevoldsen@users.noreply.github.com>
Date: Tue, 24 Apr 2018 20:16:09 -0400
Subject: [PATCH] Postpone Tippy until document-ready event

Maybe fixes #27
---
 modules/ext.scryfallLinks.tooltip.js | 83 ++++++++++++++--------------
 1 file changed, 43 insertions(+), 40 deletions(-)

diff --git a/modules/ext.scryfallLinks.tooltip.js b/modules/ext.scryfallLinks.tooltip.js
index 5eb62da..0ab22c2 100644
--- a/modules/ext.scryfallLinks.tooltip.js
+++ b/modules/ext.scryfallLinks.tooltip.js
@@ -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
+				}
 			}
 		}
-	}
-} );
+	} );
+}() );