From e0bad1dc10a2bdc84885663092009ba53eb11d31 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Thu, 28 Sep 2017 23:18:26 -0400
Subject: [PATCH] 3.5.529. Tooltip stuff.

---
 changelog.html               |  17 +-
 old_changes.html             |   5 +
 src/constants.js             |   2 +-
 src/ember/chatview.js        |   4 +-
 src/ember/conversations.js   |   2 +-
 src/ember/directory.js       |   6 +-
 src/ember/feed-card.js       |   3 -
 src/ember/following.js       |   4 +-
 src/ember/line.js            |   3 +-
 src/ember/moderation-card.js |  23 ++-
 src/ember/room.js            |   2 +-
 src/ember/sidebar.js         |   7 +-
 src/main.js                  |  10 +-
 src/settings.js              |   2 -
 src/tokenize.js              |  46 +++--
 src/ui/channel_stats.js      |  10 +-
 src/ui/dash_feed.js          |   4 +-
 src/ui/dash_stats.js         |   2 +-
 src/ui/following-count.js    |  17 +-
 src/ui/menu.js               |   6 +-
 src/ui/sub_count.js          |   2 +-
 src/ui/tooltips.js           | 369 ++++++++++++++++++++++++++++++++++-
 src/ui/viewer_count.js       |   3 +-
 src/utils.js                 |  39 +++-
 style.css                    |  58 +++++-
 25 files changed, 549 insertions(+), 97 deletions(-)

diff --git a/changelog.html b/changelog.html
index 7bb71f10..1ef3147b 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,15 @@
+<div class="list-header">3.5.529 <time datetime="2017-09-28">(2017-09-28)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Changed: Rewrite tooltip rendering to try making them better positioned.</li>
+	<li>Added: Clickable links in the Following tooltip, as a result of the rewrite.</li>
+</ul>
+
+<div class="list-header">3.5.528 <time datetime="2017-09-26">(2017-09-26)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Bug loading emote data from the server.</li>
+	<li>Fixed: Initialize the full Ember modifications when loading the settings pages and products page that has been brought into the Ember app.</li>
+</ul>
+
 <div class="list-header">3.5.527 <time datetime="2017-09-25">(2017-09-25)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Changed: More tweaks to tooltip rendering to support backend improvements.</li>
@@ -49,10 +61,5 @@
 	<li>Changed: Support multiple sub tiers with the Channel emoticons menu.</li>
 </ul>
 
-<div class="list-header">3.5.518 <time datetime="2017-09-02">(2017-09-02)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Bug with rich content attached to chat messages not getting removed when a message is timed out.</li>
-</ul>
-
 <div class="list-header" id="ffz-old-news-button"><a href="#">View Older</a></div>
 <div id="ffz-old-news"></div>
\ No newline at end of file
diff --git a/old_changes.html b/old_changes.html
index cbd544d0..b2f1f79f 100644
--- a/old_changes.html
+++ b/old_changes.html
@@ -1,3 +1,8 @@
+<div class="list-header">3.5.518 <time datetime="2017-09-02">(2017-09-02)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Bug with rich content attached to chat messages not getting removed when a message is timed out.</li>
+</ul>
+
 <div class="list-header">3.5.517 <time datetime="2017-09-02">(2017-09-02)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Changed: Dark theme CSS tweak for the directory.</li>
diff --git a/src/constants.js b/src/constants.js
index 10750a3f..5dabc5c5 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -47,7 +47,7 @@ module.exports = FrankerFaceZ.constants = {
 
 	CHAT_COLORS: ["#FF0000", "#0000FF", "#008000", "#B22222", "#FF7F50", "#9ACD32", "#FF4500", "#2E8B57", "#DAA520", "#D2691E", "#5F9EA0", "#1E90FF", "#FF69B4", "#8A2BE2", "#00FF7F"],
 
-	TOOLTIP_DISTANCE: 100,
+	TOOLTIP_DISTANCE: 25,
 
 	SEPARATORS: SEPARATORS,
 	SPLITTER: SPLITTER,
diff --git a/src/ember/chatview.js b/src/ember/chatview.js
index de477db6..68974e07 100644
--- a/src/ember/chatview.js
+++ b/src/ember/chatview.js
@@ -951,7 +951,7 @@ FFZ.prototype.modify_chat_room_manager = function(component) {
 				tbl.innerHTML = '<thead><tr><th colspan="2">Channels</th><th class="ffz-row-switch" title="Pinning a channel makes it so you always join that channel\'s chat, no matter where you are on Twitch.">Pin</th></tr></thead><tbody></tbody>';
 				room_list.insertBefore(tbl, room_list.firstChild);
 
-				jQuery('.ffz-row-switch', tbl).tipsy({gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'se')});
+				jQuery('.ffz-row-switch', tbl).zipsy({gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'se')});
 
 				chan_table = this._ffz_chan_table = tbl.querySelector('tbody');
 
@@ -1171,7 +1171,7 @@ FFZ.prototype.modify_chat_room_manager = function(component) {
 			link.title = "Chat Room Management";
 			link.innerHTML = '<figure class="icon">' + constants.ROOMS + '</figure><span class="notifications"></span>';
 
-			jQuery(link).tipsy({gravity: "n", offset: 10});
+			jQuery(link).zipsy({gravity: "n", offset: 10});
 
 			link.addEventListener('click', function() {
 				view.set('isShowingList', !view.get('isShowingList'));
diff --git a/src/ember/conversations.js b/src/ember/conversations.js
index 6171b2e2..6506a1d2 100644
--- a/src/ember/conversations.js
+++ b/src/ember/conversations.js
@@ -190,7 +190,7 @@ FFZ.prototype.modify_conversation_window = function(component) {
 				header_name.setAttribute('data-color', raw_color);
 			}
 
-			jQuery('.badge', el).tipsy({gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
+			jQuery('.badge', el).zipsy({gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'n')});
 		}
 	});
 }
diff --git a/src/ember/directory.js b/src/ember/directory.js
index 9041833c..cfe09703 100644
--- a/src/ember/directory.js
+++ b/src/ember/directory.js
@@ -476,7 +476,7 @@ FFZ.prototype.modify_game_follow_button = function(component) {
 			spoiler.addEventListener('click', click_button('spoiler_games', update_spoiler));
 			el.appendChild(spoiler);
 
-			jQuery('.tooltip', el).tipsy();
+			jQuery('.tooltip', el).zipsy();
 		}
 	})
 }
@@ -581,7 +581,7 @@ FFZ.prototype.modify_directory_live = function(component, mode) {
 					t_el.appendChild(t_span);
 					t_el.setAttribute('original-title', 'Stream Uptime <nobr>(since ' + up_since.toLocaleString() + ')</nobr>');
 
-					jQuery(t_el).tipsy({html: true, gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 's')});
+					jQuery(t_el).zipsy({html: true, gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 's')});
 					cont.appendChild(t_el);
 				}
 
@@ -780,7 +780,7 @@ FFZ.prototype.modify_directory_host = function(component) {
 				if ( hosts && hosts.length > 1 ) {
 					title.textContent = utils.number_commas(hosts.length) + ' hosting ' + utils.sanitize(target.display_name);
 					title.title = _.sortBy(hosts, "name").mapBy("display_name").join(", ");
-					jQuery(title).tipsy({gravity: 's'});
+					jQuery(title).zipsy({gravity: 's'});
 				}
 			}
 
diff --git a/src/ember/feed-card.js b/src/ember/feed-card.js
index 0c32e4cd..1d93b6ad 100644
--- a/src/ember/feed-card.js
+++ b/src/ember/feed-card.js
@@ -86,9 +86,6 @@ FFZ.prototype.modify_feed_card = function(component) {
 				output = f.render_tokens(tokens, true, false);
 
 			pbody.innerHTML = '<p>' + output + '</p>';
-
-			//jQuery('.ffz-tooltip', pbody).tipsy({html: true, title: f.render_tooltip(), gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
-			//jQuery('.html-tooltip', pbody).tipsy({html: true, gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
 		}
 	});
 }
diff --git a/src/ember/following.js b/src/ember/following.js
index 5e63c342..1d45d7c4 100644
--- a/src/ember/following.js
+++ b/src/ember/following.js
@@ -121,7 +121,7 @@ FFZ.prototype.modify_twitch_profile_card = function(component) {
 			var el = this.get('element');
 
 			el.classList.add('ffz-processed');
-			jQuery('.aspect', el).tipsy();
+			jQuery('.aspect', el).zipsy();
 
 			if ( ! f.settings.enhance_profile_following )
 				return;
@@ -239,7 +239,7 @@ FFZ.prototype.modify_twitch_profile_card = function(component) {
 
 			el.classList.add('ffz-processed');
 
-			jQuery('.aspect', el).tipsy();
+			jQuery('.aspect', el).zipsy();
 
 			if ( ! data )
 				return false;
diff --git a/src/ember/line.js b/src/ember/line.js
index e23f11aa..9bc252d1 100644
--- a/src/ember/line.js
+++ b/src/ember/line.js
@@ -868,7 +868,8 @@ FFZ.prototype.setup_line = function() {
 
 	// Tipsy Handler
 	jQuery(document.body).on("mouseleave", ".tipsy", function() {
-		this.parentElement.removeChild(this);
+		if ( ! this.classList.contains('zipsy') )
+			this.parentElement.removeChild(this);
 	});
 
 	// Aliases
diff --git a/src/ember/moderation-card.js b/src/ember/moderation-card.js
index 3596464a..ecd9257f 100644
--- a/src/ember/moderation-card.js
+++ b/src/ember/moderation-card.js
@@ -1015,7 +1015,7 @@ FFZ.prototype.modify_moderation_card = function(component) {
 							name.innerHTML = results[0];
 							name.title = results[1] || '';
 							if ( results[1] )
-								jQuery(name).tipsy({html: true, gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
+								jQuery(name).zipsy({html: true, gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'n')});
 						}
 					});
 			});
@@ -1105,9 +1105,9 @@ FFZ.prototype.modify_moderation_card = function(component) {
 						add_btn_make = function(label, cmd) {
 							var btn = utils.createElement('button', 'button ffz-no-bg', utils.sanitize(label));
 
-							jQuery(btn).tipsy({
+							jQuery(btn).zipsy({
 								html: true,
-								gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n'),
+								gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'n'),
 								title: function() {
 									var user = t.get('cardInfo.user'),
 										chat_controller = utils.ember_lookup('controller:chat'),
@@ -1169,7 +1169,7 @@ FFZ.prototype.modify_moderation_card = function(component) {
 						else if ( f.settings.mod_card_hotkeys && timeout === 1 )
 							btn.title = "(P)urge - " + btn.title;
 
-						jQuery(btn).tipsy({gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
+						jQuery(btn).zipsy({gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'n')});
 
 						btn.addEventListener('click', btn_click.bind(this, timeout));
 						return btn;
@@ -1220,7 +1220,7 @@ FFZ.prototype.modify_moderation_card = function(component) {
 					unban_btn.innerHTML = '<figure class="icon">' + CHECK + '</figure>';
 					unban_btn.title = (f.settings.mod_card_hotkeys ? "(U)" : "U") + "nban User";
 
-					jQuery(unban_btn).tipsy({gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
+					jQuery(unban_btn).zipsy({gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'n')});
 					unban_btn.addEventListener("click", btn_click.bind(this, -1));
 
 					jQuery(ban_btn).after(unban_btn);
@@ -1229,7 +1229,8 @@ FFZ.prototype.modify_moderation_card = function(component) {
 
 
 			// Tooltips for ban and ignore.
-			jQuery("button.ignore, button.ban").tipsy({gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
+			jQuery("button.ignore, button.ban").zipsy({
+				gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'n')});
 
 
 			// More Fixing Other Buttons
@@ -1245,7 +1246,8 @@ FFZ.prototype.modify_moderation_card = function(component) {
 			// Follow Button
 			var follow_button = el.querySelector(".follow-button");
 			if ( follow_button )
-				jQuery(follow_button).tipsy({title: function() { return follow_button.classList.contains('is-following') ? "Unfollow" : "Follow"}});
+				jQuery(follow_button).zipsy({
+					title: function() { return follow_button.classList.contains('is-following') ? "Unfollow" : "Follow"}});
 
 
 			// Whisper and Message Buttons
@@ -1257,7 +1259,8 @@ FFZ.prototype.modify_moderation_card = function(component) {
 				msg_btn.classList.add('message');
 
 				msg_btn.title = "Whisper User";
-				jQuery(msg_btn).tipsy({gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
+				jQuery(msg_btn).zipsy({
+					gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'n')});
 
 
 				var real_msg = utils.createElement('button', 'message-button button float-left button--icon-only message html-tooltip');
@@ -1365,7 +1368,9 @@ FFZ.prototype.modify_moderation_card = function(component) {
 					name.innerHTML = results[0];
 					name.title = results[1] || '';
 					if ( results[1] )
-						jQuery(name).tipsy({html: true, gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
+						jQuery(name).zipsy({
+							html: true,
+							gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'n')});
 				}
 			}
 
diff --git a/src/ember/room.js b/src/ember/room.js
index 67e0e895..1972538b 100644
--- a/src/ember/room.js
+++ b/src/ember/room.js
@@ -956,7 +956,7 @@ FFZ.prototype.modify_room_component = function(component) {
 				if ( ! badge ) {
 					badge = utils.createElement('span', 'ffz room-state stat float-right', (label || info[0]).charAt(0).toUpperCase() + '<span>' + (label || info[0]).substr(1).toUpperCase() + '</span>');
 					badge.id = id;
-					jQuery(badge).tipsy({html: true, gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'se')});
+					jQuery(badge).zipsy({html: true, gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'se')});
 					container.appendChild(badge);
 				}
 
diff --git a/src/ember/sidebar.js b/src/ember/sidebar.js
index 31e04423..d1758ff4 100644
--- a/src/ember/sidebar.js
+++ b/src/ember/sidebar.js
@@ -495,13 +495,14 @@ FFZ.prototype.modify_navigation = function(component, is_top_nav) {
 		_initTooltips: function() {
 			this._tipsySelector = this.$("#js-warp a, #small_search button, #small_more button");
 			this._tipsySelector.off("mouseenter").off("mouseleave").teardownTipsy();
-			this._tipsySelector.tipsy({gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'w')});
+			this._tipsySelector.zipsy({
+				gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'w')});
 
-			this.$('a[data-href="following"]').tipsy({
+			this.$('a[data-href="following"]').zipsy({
 				html: true,
 				className: function() { return f.settings.following_count ? 'ffz-wide-tip' : '' },
 				title: function() { return f._build_following_tooltip(this) },
-				gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE * 2, 'w')
+				gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE * 2, 'w')
 			});
 		},
 
diff --git a/src/main.js b/src/main.js
index 94228021..e96a2e1a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -61,7 +61,7 @@ FFZ.channel_metadata = {};
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 527,
+	major: 3, minor: 5, revision: 529,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}
@@ -322,7 +322,7 @@ FFZ.prototype.initialize = function(increment, delay) {
 	// Twitch ember application is ready.
 
 	// Pages we don't want to interact with at all.
-	if ( ['passport.twitch.tv', 'im.twitch.tv', 'api.twitch.tv', 'chatdepot.twitch.tv', 'spade.twitch.tv'].indexOf(location.hostname) !== -1 || /^\/products\//.test(location.pathname) || /^\/pr\//.test(location.pathname) || /^\/user\/two_factor/.test(location.pathname) ) {
+	if ( ['passport.twitch.tv', 'im.twitch.tv', 'api.twitch.tv', 'chatdepot.twitch.tv', 'spade.twitch.tv'].indexOf(location.hostname) !== -1 || /^\/pr\//.test(location.pathname) || /^\/user\/two_factor/.test(location.pathname) ) {
 		this.log("Found banned sub-domain. Not initializing.");
 		window.FrankerFaceZ = null;
 		return;
@@ -337,12 +337,12 @@ FFZ.prototype.initialize = function(increment, delay) {
 		return this.init_clips(delay);
 
 	// Check for special non-ember pages.
-	if ( /^\/(?:team\/|user\/|p\/|settings|m\/|messages?\/)/.test(location.pathname) )
+	if ( /^\/(?:team\/|user\/|p\/|m\/|settings\/(?:prime|turbo|channel|security|connections)|messages?\/)/.test(location.pathname) )
 		return this.init_normal(delay);
 
 	// Check for the dashboard.
-	if ( window.PP && /\/[^\/]+\/dashboard/.test(location.pathname) && !/bookmarks$/.test(location.pathname) )
-		return this.init_dashboard(delay);
+	/*if ( window.PP && /\/[^\/]+\/dashboard/.test(location.pathname) && !/bookmarks$/.test(location.pathname) )
+		return this.init_dashboard(delay);*/
 
 	var loaded = FFZ.utils.ember_resolve('model:room');
 	if ( !loaded ) {
diff --git a/src/settings.js b/src/settings.js
index 936834cd..b875af3e 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -544,8 +544,6 @@ var is_android = navigator.userAgent.indexOf('Android') !== -1,
 					el.appendChild(label);
 					el.appendChild(help);
 					menu.appendChild(el);
-					//jQuery('.html-tooltip', el).tipsy({html: true, gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
-					//jQuery('.ffz-tooltip', el).tipsy({live: true, html: true, title: this.render_tooltip(), gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
 				}
 
 				container.appendChild(menu);
diff --git a/src/tokenize.js b/src/tokenize.js
index 9fe252fc..ad2baff0 100644
--- a/src/tokenize.js
+++ b/src/tokenize.js
@@ -10,7 +10,7 @@ var FFZ = window.FrankerFaceZ,
 
 	HOP = Object.prototype.hasOwnProperty,
 
-	TOOLTIP_VERSION = 2,
+	TOOLTIP_VERSION = 3,
 	FAV_MARKER = '<span class="ffz-favorite"></span>',
 
 	EXPLANATION_WARN = '<hr>This link has been sent to you via a whisper rather than standard chat, and has not been checked or approved of by any moderators or staff members. Please treat this link with caution and do not visit it if you do not trust the sender.',
@@ -21,7 +21,7 @@ var FFZ = window.FrankerFaceZ,
 
 	LINK = /(?:https?:\/\/)?(?:[-a-zA-Z0-9@:%_\+~#=]+\.)+[a-z]{2,6}\b(?:[-a-zA-Z0-9@:%_\+.~#?&\/\/=()]*)/g,
 
-	TIME_REPLACER = /<time\s+datetime=(["'])([^>]+?)\1[^>]*>(.*?)<\/time>/i,
+	TIME_REPLACER = /<time\s+(?:class=(["'])([^>]+?)\1\s+)?datetime=(["'])([^>]+?)\3[^>]*>(.*?)<\/time>/i,
 	CLIP_URL = /^(?:https?:\/\/)?clips\.twitch\.tv\/(\w+?\/?\w*?)(?:\/edit)?(?:[\?#]|$)/,
 	VIDEO_URL = /^(?:https?:\/\/)?(?:www\.)?twitch\.tv\/(?:\w+\/v|videos)\/(\w+)$/,
 	FFZ_EMOTE_URL = /^(?:https?:\/\/)?(?:www\.)?frankerfacez\.com\/emoticon\/(\d+)(?:-\w*)?$/,
@@ -349,7 +349,7 @@ FFZ.prototype.get_twitch_set_for = function(emote_id, callback) {
 
 	this._twitch_emote_to_set[emote_id] = null;
 	var f = this,
-		use_ss = this._ws_open,
+		//use_ss = true, //this._ws_open,
 		timer = null,
 		cb = function(success, data) {
 			if ( timer ) {
@@ -373,18 +373,18 @@ FFZ.prototype.get_twitch_set_for = function(emote_id, callback) {
 				callback(set_id);
 		};
 
-	if ( use_ss ) {
-		this.ws_send("get_emote", emote_id, cb);
-		timer = setTimeout(cb.bind(this, false, null), 1000);
-	} else
-		fetch(constants.API_SERVER = "ed/emote/" + emote_id)
+	/*if ( use_ss ) {*/
+		this.ws_send("get_emote", emote_id, cb, true);
+		timer = setTimeout(cb.bind(this, false, null), 5000);
+	/*} else
+		fetch(constants.API_SERVER + "ed/emote/" + emote_id)
 			.then(function(resp) {
 				if ( ! resp.ok )
 					return cb(false, null);
 				resp.json().then(function(data) {
 					cb(true, data);
 				})
-			});
+			});*/
 
 	return null;
 }
@@ -403,7 +403,7 @@ FFZ.prototype.get_twitch_set = function(set_id, callback) {
 	this._twitch_set_to_channel[set_id] = null;
 
 	var f = this,
-		use_ss = this._ws_open,
+		//use_ss = this._ws_open,
 		timer = null,
 		cb = function(success, data) {
 			if ( timer ) {
@@ -421,10 +421,10 @@ FFZ.prototype.get_twitch_set = function(set_id, callback) {
 				callback(data || null);
 		};
 
-	if ( use_ss ) {
-		this.ws_send("get_emote_set", set_id, cb);
-		timer = setTimeout(cb.bind(this, false, null), 1000);
-	} else
+	/*if ( use_ss ) {*/
+		this.ws_send("get_emote_set", set_id, cb, true);
+		timer = setTimeout(cb.bind(this, false, null), 5000);
+	/*} else
 		fetch(constants.API_SERVER + "ed/set/" + set_id)
 			.then(function(resp) {
 				if ( ! resp.ok )
@@ -432,7 +432,7 @@ FFZ.prototype.get_twitch_set = function(set_id, callback) {
 				resp.json().then(function(data) {
 					cb(true, data);
 				})
-			});
+			});*/
 
 	return null;
 }
@@ -466,6 +466,8 @@ FFZ.prototype.get_link_info = function(url, no_promises) {
 
 		li = this.settings.link_info;
 
+	console.log('get_link_info', url, info);
+
 	if ( ! li || (expires && Date.now() > expires) )
 		info = this._link_data[url] = null;
 
@@ -522,17 +524,19 @@ FFZ.prototype.render_link_tooltip = function(data, el) {
 	var content = data.content || data.html || '';
 
 	if ( content )
-		content = content.replace(TIME_REPLACER, function(match, junk, timestamp, old) {
+		content = content.replace(TIME_REPLACER, function(match, junk_one, cls, junk_two, timestamp, old) {
 			var now = Date.now(),
 				posted_at = utils.parse_date(timestamp),
 				time_ago = posted_at && (now - posted_at) / 1000;
 
-			if ( time_ago < 86400 )
-				old = utils.full_human_time(time_ago);
-			else if ( posted_at )
-				old = posted_at.toLocaleString();
+			if ( cls !== 'keep' ) {
+				if ( cls === 'human' || (cls !== 'ts' && time_ago < 86400) )
+					old = utils.full_human_time(time_ago);
+				else if ( posted_at )
+					old = posted_at.toLocaleString();
+			}
 
-			return '<time timestamp="' + utils.sanitize(timestamp) + '">' + utils.sanitize(old) + '</time>';
+			return '<time class="' + utils.quote_attr(cls||'') + '" timestamp="' + utils.quote_attr(timestamp) + '">' + utils.sanitize(old) + '</time>';
 		});
 
 
diff --git a/src/ui/channel_stats.js b/src/ui/channel_stats.js
index 9f0e943e..31b146b5 100644
--- a/src/ui/channel_stats.js
+++ b/src/ui/channel_stats.js
@@ -302,13 +302,13 @@ FFZ.prototype.render_metadata = function(key, basic_info, metabar, timers, refre
 			if ( dynamic_tooltip ) {
 				je = jQuery(btn);
 				je.hover(
-						function() { je.data("hover", true).tipsy("show") },
-						function() { je.data("hover", false).tipsy("hide") })
+						function() { je.data("hover", true).zipsy("show") },
+						function() { je.data("hover", false).zipsy("hide") })
 					.data("hover", false)
-					.tipsy({
+					.zipsy({
 						trigger: "manual",
 						html: true,
-						gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n'),
+						gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'n'),
 						title: function() {
 							// We can't wait for a promise to resolve now, so hope this hasn't changed.
 							var dat = info.setup ? info.setup.apply(f, basic_info) : basic_info;
@@ -397,7 +397,7 @@ FFZ.prototype.render_metadata = function(key, basic_info, metabar, timers, refre
 
 		stat.innerHTML = label;
 		if ( dynamic_tooltip && je.data('hover') )
-			je.tipsy('hide').tipsy('show');
+			je.zipsy('hide').zipsy('show');
 
 		if ( info.hasOwnProperty('disabled') )
 			el.classList.toggle('disabled', typeof info.disabled === 'function' ? info.disabled.apply(f, data) : info.disabled);
diff --git a/src/ui/dash_feed.js b/src/ui/dash_feed.js
index dc2d68ff..7cbcdd25 100644
--- a/src/ui/dash_feed.js
+++ b/src/ui/dash_feed.js
@@ -102,12 +102,12 @@ FFZ.prototype.build_dash_feed = function() {
 				align_btn.insertBefore(chk_share, align_btn.firstChild);
 			}
 		});
-		jQuery(tnc).tipsy();
+		jQuery(tnc).zipsy();
 		align_btn.appendChild(tnc);
 	}
 
 	char_count.title = 'Roughly the first 115 characters of a post will appear in a Tweet.';
-	jQuery(char_count).tipsy();
+	jQuery(char_count).zipsy();
 
 	align_btn.appendChild(btn_submit);
 	align_btn.appendChild(char_count);
diff --git a/src/ui/dash_stats.js b/src/ui/dash_stats.js
index ee333847..d9809fc1 100644
--- a/src/ui/dash_stats.js
+++ b/src/ui/dash_stats.js
@@ -63,7 +63,7 @@ FFZ.msg_commands.chatter_count = function(data) {
 		stat.appendChild(el);
 
 		cont.appendChild(stat);
-		jQuery(stat).tipsy({gravity: 's'});
+		jQuery(stat).zipsy({gravity: 's'});
 	}
 
 	el.textContent = utils.number_commas(data.chatters);
diff --git a/src/ui/following-count.js b/src/ui/following-count.js
index 1cee2850..ed34d295 100644
--- a/src/ui/following-count.js
+++ b/src/ui/following-count.js
@@ -218,12 +218,13 @@ FFZ.prototype._build_following_tooltip = function(el) {
 			var up_since = this.settings.stream_uptime && stream.created_at && utils.parse_date(stream.created_at),
 				now = Date.now() - (this._ws_server_offset || 0),
 				uptime = up_since && (Math.floor((now - up_since.getTime()) / 60000) * 60) || 0,
+				channel_name = stream.channel.name,
 				tags = stream.channel.game === 'Creative' && this.tokenize_ctags(stream.channel.status, true);
 
 			tooltip += (c === 1 ? '<hr>' : '') +
 				(uptime > 0 ? '<span class="stat">' + constants.CLOCK + ' ' + utils.duration_string(uptime) + '</span>' : '') +
 				'<span class="stat">' + constants.LIVE + ' ' + utils.number_commas(stream.viewers) + '</span>' +
-				'<b>' + utils.sanitize(stream.channel.display_name || stream.channel.name) + '</b><br>' +
+				'<a href="https://www.twitch.tv/' + utils.quote_san(channel_name) + '" onclick="return FrankerFaceZ.utils.transition_user(&quot;' + utils.quote_san(channel_name) + '&quot;)"><b>' + utils.sanitize(stream.channel.display_name || stream.channel.name) + '</b></a><br>' +
 				'<span class="playing">' +
 				(stream.stream_type === 'watch_party' ? '<span class="pill is-watch-party">Vodcast</span> ' : '') +
 				(stream.channel.game === 'Creative' ? 'Being Creative' : (stream.channel.game ? 'Playing ' + utils.sanitize(stream.channel.game) : 'Not Playing')) + (tags ? ' | ' + _.pluck(tags, "text").join(" ") : '') + '</span>';
@@ -269,7 +270,7 @@ FFZ.prototype._build_following_tooltip = function(el) {
 	}*/
 
 	// Reposition the tooltip.
-	setTimeout(function() {
+	/*setTimeout(function() {
 		var tip = document.querySelector('.tipsy');
 		if ( ! tip )
 			return;
@@ -283,7 +284,7 @@ FFZ.prototype._build_following_tooltip = function(el) {
 			tip.style.left = (left - bb.left) + 5 + 'px';
 		else if ( right > document.body.clientWidth - 5 )
 			tip.style.left = (left - (5 + right - document.body.clientWidth)) + 'px';
-	});
+	});*/
 
 	return tooltip;
 }
@@ -293,9 +294,15 @@ FFZ.prototype._install_following_tooltips = function() {
 	var f = this,
 		data = {
 			html: true,
+			delayOut: 100,
 			className: function() { return WIDE_TIP(f, this); },
 			title: function() { return f._build_following_tooltip(this); },
-			gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE * 2, 'w')
+			gravity: function(box) {
+				return (box ?
+					utils.newtip_placement :
+					utils.tooltip_placement)(constants.TOOLTIP_DISTANCE, 'w').call(this, box);
+				//utils.tooltip_placement(constants.TOOLTIP_DISTANCE * 2, 'w')
+			}
 		};
 
 	for(var i=0; i < FOLLOWING_CONTAINERS.length; i++) {
@@ -305,7 +312,7 @@ FFZ.prototype._install_following_tooltips = function() {
 			if ( td && td.options ) {
 				td.options = _.extend(td.options, data);
 			} else
-				following.tipsy(data);
+				following.zipsy(data);
 		}
 	}
 }
diff --git a/src/ui/menu.js b/src/ui/menu.js
index b71bd7d2..4eab55ab 100644
--- a/src/ui/menu.js
+++ b/src/ui/menu.js
@@ -175,10 +175,6 @@ FFZ.prototype.build_ui_popup = function(view) {
 	inner.className = 'emoticon-selector-box dropmenu';
 	container.appendChild(inner);
 
-	// Stuff
-	//jQuery(inner).find('.html-tooltip').tipsy({live: true, html: true, gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 's')});
-	//jQuery(inner).find('.ffz-tooltip').tipsy({live: true, html: true, title: this.render_tooltip(), gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
-
 	// Menu Container
 	var sub_container = document.createElement('div');
 	sub_container.className = 'ffz-ui-menu-page';
@@ -263,7 +259,7 @@ FFZ.prototype.build_ui_popup = function(view) {
 		link.title = page.name;
 		link.innerHTML = page.icon;
 
-		jQuery(link).tipsy({gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
+		jQuery(link).zipsy({gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'n')});
 
 		link.addEventListener("click", this._ui_change_page.bind(this, view, inner, menu, sub_container, key));
 
diff --git a/src/ui/sub_count.js b/src/ui/sub_count.js
index 9a4ff3ca..7902d4ea 100644
--- a/src/ui/sub_count.js
+++ b/src/ui/sub_count.js
@@ -76,7 +76,7 @@ FFZ.prototype._update_subscribers = function() {
 				});
 
 			cont.appendChild(stat);
-			jQuery(stat).tipsy({gravity: 's'});
+			jQuery(stat).zipsy({gravity: 's'});
 		}
 
 		el.textContent = utils.number_commas(sub_count);
diff --git a/src/ui/tooltips.js b/src/ui/tooltips.js
index 0ad6b095..ce6965ac 100644
--- a/src/ui/tooltips.js
+++ b/src/ui/tooltips.js
@@ -9,14 +9,21 @@ var FFZ = window.FrankerFaceZ,
 
 FFZ.prototype.fix_tooltips = function() {
 	// Add handlers to FFZ's tooltip classes.
-	jQuery(".html-tooltip").tipsy({live: true, html: true, gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
-	jQuery(".ffz-tooltip").tipsy({
+	jQuery(".html-tooltip").zipsy({
+		live: true,
+		html: true,
+		gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'n')
+		//gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')
+	});
+
+	jQuery(".ffz-tooltip").zipsy({
 		live: true,
 		html: true,
 		className: this.render_tooltip_class(),
 		title: this.render_tooltip(),
-		gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
-
+		gravity: utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'n')
+		//gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')
+	});
 
 	// First, override the tooltip mixin.
 	var TipsyTooltip = utils.ember_resolve('component:tipsy-tooltip');
@@ -26,9 +33,9 @@ FFZ.prototype.fix_tooltips = function() {
 			didInsertElement: function() {
 				var gravity = this.get("gravity");
 				if ( ! gravity || typeof gravity === "string" )
-					gravity = utils.tooltip_placement(constants.TOOLTIP_DISTANCE, gravity || 's');
+					gravity = utils.newtip_placement(constants.TOOLTIP_DISTANCE, gravity || 's');
 
-				this.$().tipsy({
+				this.$().zipsy({
 					gravity: gravity
 				});
 			}
@@ -44,6 +51,7 @@ FFZ.prototype.fix_tooltips = function() {
 			})
 		};
 
+
 	// Iterate all existing tipsy stuff~!
 	this.log('Fixing already existing tooltips.');
 	if ( ! window.jQuery || ! jQuery.cache )
@@ -55,4 +63,351 @@ FFZ.prototype.fix_tooltips = function() {
 			obj.data.tipsy.options.gravity = utils.tooltip_placement(constants.TOOLTIP_DISTANCE, obj.data.tipsy.options.gravity || 's');
 		}
 	}
-}
\ No newline at end of file
+}
+
+
+// ---------------------
+// Zipsy!
+// ---------------------
+
+var zipsyIdcounter = 0;
+
+function maybeCall(thing, ctx) {
+	return typeof thing === 'function' ? thing.apply(ctx, Array.prototype.slice.call(arguments, 2)) : thing;
+}
+
+function Zipsy(element, options) {
+	this.$element = jQuery(element);
+	this.options = options;
+	this.enabled = true;
+	this.fixTitle();
+}
+
+Zipsy.prototype = {
+	show: function() {
+		var j_el = this.$element,
+			el = j_el[0];
+
+		if ( ! this.enabled || ! document.contains(el) || ! j_el.is(':visible') )
+			return;
+
+		var title = this.getTitle(),
+			$tip = this.tip();
+
+		if ( ! title )
+			return;
+
+		$tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
+		$tip[0].className = 'zipsy tipsy';
+		if ( this.options.className )
+			$tip.addClass(maybeCall(this.options.className, el));
+
+		$tip.detach().css({
+			top: 0, left: 0,
+			width: '', height: '',
+			visibility: 'hidden',
+			display: 'block'
+		}).prependTo(this.options.prependTo).data('tipsy-pointee', el);
+
+		var pos;
+
+		if ( j_el.parents('svg').length > 0 )
+			pos = jQuery.extend({}, j_el.offset(), el.getBBox());
+
+		else if ( this.options.prependTo !== document.body )
+			pos = jQuery.extend(j_el.position(), {
+				width: j_el.width(),
+				height: j_el.height()
+			});
+
+		else
+			pos = jQuery.extend({}, j_el.offset(), {
+				width: el.offsetWidth || 0,
+				height: el.offsetHeight || 0
+			});
+
+		var bbox = $tip[0].getBoundingClientRect(),
+			actual_width = Math.ceil(bbox.width),
+			actual_height = Math.ceil(bbox.height),
+			gravity = maybeCall(this.options.gravity, el, bbox),
+			g1 = gravity.charAt(0),
+			g2 = gravity.length > 1 ? gravity.charAt(1) : 'c',
+			offset = maybeCall(this.options.offset, el),
+			tp = {};
+
+		if ( g1 === 'n' )
+			tp.top = pos.top + pos.height + offset;
+
+		else if ( g1 === 's' )
+			tp.top = pos.top - actual_height - offset;
+
+		else if ( g1 === 'e' )
+			tp.left = pos.left - actual_width - offset;
+
+		else if ( g1 === 'w' )
+			tp.left = pos.left + pos.width + offset;
+
+		if ( g1 === 'n' || g1 === 's' ) {
+			if ( g2 === 'c' )
+				tp.left = pos.left + pos.width / 2 - actual_width / 2;
+
+			else if ( g2 === 'e' )
+				tp.left = pos.left + pos.width - actual_width + 5;
+
+			else if ( g2 === 'w' )
+				tp.left = pos.left - 5;
+
+		} else if ( g1 === 'e' || g1 === 'w' ) {
+			if ( g2 === 'c' )
+				tp.top = pos.top + pos.height / 2 - actual_height / 2;
+
+			else if ( g2 === 'n' )
+				tp.top = pos.top - 5;
+
+			else if ( g2 === 's' )
+				tp.top = pos.top + pos.height - actual_height + 5;
+		}
+
+		$tip.css(tp).addClass('tipsy-' + gravity);
+		$tip.find('.tipsy-arrow')[0].className = 'tipsy-arrow tipsy-arrow-' + gravity.charAt(0);
+		$tip.css({width: actual_width + 'px'});
+
+		var opacity = maybeCall(this.options.opacity, el);
+
+		if ( this.options.fade )
+			$tip.stop().css({
+				opacity: 0,
+				display: 'block',
+				visibility: 'hidden'
+			}).animate({
+				opacity: opacity
+			}, this.options.fadeInTime);
+
+		else
+			$tip.css({
+				visibility: 'visible',
+				opacity: opacity
+			});
+
+		if ( this.options.aria ) {
+			var tip_id = zipsyIdcounter++;
+			$tip.attr('id', tip_id);
+			j_el.attr('aria-describedby', tip_id);
+		}
+	},
+
+	hide: function() {
+		if ( this.options.fade )
+			this.tip().stop().fadeOut(this.options.fadeOutTime, function() { jQuery(this).detach() });
+		else
+			this.tip().detach();
+
+		if ( this.options.aria )
+			this.$element.removeAttr('aria-describedby');
+	},
+
+	fixTitle: function() {
+		var e = this.$element;
+		if ( e.attr('title') || typeof e.attr('original-title') !== 'string' )
+			e.attr('original-title', e.attr('title') || '').removeAttr('title');
+	},
+
+	getTitle: function() {
+		var e = this.$element,
+			title = this.options.title;
+
+		if ( title === 'title' ) {
+			this.fixTitle();
+			title = e.attr('original-title');
+		} else if ( typeof title === 'string' )
+			title = e.attr(title);
+		else if ( typeof title === 'function' )
+			title = title.call(e[0]);
+		else
+			title = '';
+
+		return (''+title).trim() || this.options.fallback;
+	},
+
+	tip: function() {
+		var t = this;
+		if ( ! this._tip )
+			this._tip = jQuery('<div class="zipsy tipsy" role="tooltip"><div class="tipsy-arrow"></div><div class="tipsy-inner"></div></div>');
+
+		this._tip
+			.off('mouseenter mouseleave')
+			.on('mouseenter', function() {
+				t.hoverState = 'in';
+
+			}).on('mouseleave', function() {
+				t.hoverState = 'out';
+				if ( t.options.delayOut === 0 )
+					t.hide();
+				else
+					setTimeout(function() {
+						if ( t.hoverState === 'out' || ! t.$element || ! t.$element.is(':visible') )
+							t.hide();
+					}, t.options.delayOut);
+			})
+
+		return this._tip;
+	},
+
+	validate: function() {
+		if ( ! this.$element[0].parentNode ) {
+			this.hide();
+			this.$element = null;
+			this.options = null;
+			this.enabled = false;
+		}
+	},
+
+	enable: function() {
+		this.enabled = true;
+	},
+
+	disable: function() {
+		this.enabled = false;
+	},
+
+	toggleEnabled: function() {
+		this.enabled = !this.enabled;
+	}
+}
+
+jQuery.fn.zipsy = function(options) {
+	jQuery.fn.zipsy.enable();
+
+	if ( options === true )
+		return this.data('tipsy');
+
+	else if ( typeof options === 'string' ) {
+		var tipsy = this.data('tipsy');
+		if ( tipsy )
+			tipsy[options]();
+
+		return this;
+	}
+
+	options = jQuery.extend({}, jQuery.fn.zipsy.defaults, options);
+
+	function get(el) {
+		var zipsy = jQuery.data(el, 'tipsy');
+		if ( ! zipsy ) {
+			zipsy = new Zipsy(el, jQuery.fn.zipsy.elementOptions(el, options));
+			jQuery.data(el, 'tipsy', zipsy);
+		}
+
+		return zipsy;
+	}
+
+	function enter() {
+		if ( ! jQuery.fn.zipsy.enabled )
+			return;
+
+		var zipsy = get(this);
+		zipsy.hoverState = 'in';
+		if ( options.delayIn === 0 )
+			zipsy.show();
+		else
+			setTimeout(function() {
+				if ( zipsy.hoverState === 'in' )
+					zipsy.show();
+			}, options.delayIn);
+	}
+
+	function leave() {
+		var zipsy = get(this);
+		zipsy.hoverState = 'out';
+		if ( options.delayOut === 0 )
+			zipsy.hide();
+		else
+			setTimeout(function() {
+				if ( zipsy.hoverState === 'out' || ! zipsy.$element || ! zipsy.$element.is(':visible') )
+					zipsy.hide();
+			}, options.delayOut);
+	}
+
+	if ( ! options.live )
+		this.each(function() { get(this) });
+
+	if ( options.trigger !== 'manual' ) {
+		var event_in = options.trigger === 'hover' ? 'mouseenter mouseover' : 'focus',
+			event_out = options.trigger === 'hover' ? 'mouseleave mouseout' : 'blur';
+
+		if ( options.live && options.live !== true ) {
+			jQuery(this).on(event_in, options.live, enter);
+			jQuery(this).on(event_out, options.live, leave);
+		} else if ( options.live ) {
+			jQuery(document.body).on(event_in, this.selector, enter);
+			jQuery(document.body).on(event_out, this.selector, leave);
+
+		} else {
+			var binder = options.live ? 'live' : 'bind';
+			this[binder](event_in, enter)[binder](event_out, leave);
+		}
+	}
+
+	return this;
+}
+
+jQuery.fn.zipsy.defaults = {
+	aria: false,
+	className: null,
+	delayIn: 0,
+	delayOut: 0,
+	fade: false,
+	fadeInTime: 400,
+	fadeOutTime: 400,
+	fallback: '',
+	gravity: 'n',
+	html: false,
+	live: false,
+	offset: 0,
+	opacity: 0.8,
+	title: 'title',
+	trigger: 'hover',
+	theme: '',
+	prependTo: document.body
+};
+
+jQuery.fn.zipsy.revalidate = function() {
+	jQuery('.tipsy').each(function() {
+		var t = jQuery.data(this, "tipsy-pointee");
+		(!t || !t[0] || !document.contains(t[0])) && jQuery(this).remove();
+	});
+}
+
+jQuery.fn.zipsy.clear = function() {
+	jQuery('.tipsy').remove();
+}
+
+jQuery.fn.zipsy.enable = function() {
+	jQuery.fn.zipsy.enabled = true;
+}
+
+jQuery.fn.zipsy.disable = function() {
+	jQuery.fn.zipsy.enabled = false;
+}
+
+jQuery.fn.zipsy.elementOptions = function(el, options) {
+	return options;
+}
+
+jQuery.fn.zipsy.autoNS = function() {
+	return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
+}
+
+jQuery.fn.zipsy.autoWE = function() {
+	return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
+}
+
+jQuery.fn.zipsy.autoNWNE = function() {
+	return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'ne' : 'nw';
+}
+
+jQuery.fn.zipsy.autoSWSE = function() {
+	return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'se' : 'sw';
+}
+
+jQuery.fn.zipsy.autoBounds = utils.newtip_placement;
\ No newline at end of file
diff --git a/src/ui/viewer_count.js b/src/ui/viewer_count.js
index 300871c3..78154a24 100644
--- a/src/ui/viewer_count.js
+++ b/src/ui/viewer_count.js
@@ -66,6 +66,7 @@ FFZ.ws_commands.viewers = function(data) {
 		view_count.innerHTML = content;
 
 		parent.appendChild(view_count);
-		jQuery(view_count).tipsy({gravity: this.is_dashboard ? "s" : utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
+		jQuery(view_count).zipsy({
+			gravity: this.is_dashboard ? "s" : utils.newtip_placement(constants.TOOLTIP_DISTANCE, 'n')});
 	}
 }
\ No newline at end of file
diff --git a/src/utils.js b/src/utils.js
index e22db5d1..429fc04c 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -585,6 +585,7 @@ module.exports = FFZ.utils = {
 	transition_user: function(username) {
 		var Channel = ember_resolve('model:deprecated-channel');
 		ember_transition('channel.index', Channel.find({id: username}).load());
+		return false;
 	},
 
 	transition_link: function(callback) {
@@ -881,7 +882,7 @@ module.exports = FFZ.utils = {
 
 
 	tooltip_placement: function(margin, prefer) {
-		return function() {
+		return function(box) {
 			var pref = prefer;
 			if ( typeof pref === "function" )
 				pref = pref.call(this);
@@ -913,6 +914,42 @@ module.exports = FFZ.utils = {
 		}
 	},
 
+	newtip_placement: function(margin, prefer) {
+		return function(box) {
+			var pref = prefer;
+			if ( typeof pref === 'function' )
+				pref = pref.call(this);
+
+			var dir = {},
+
+				win = jQuery(window),
+				t = jQuery(this),
+
+				offset = t.offset(),
+
+				width = box.width,
+				height = box.height,
+
+				d_st = document.body.scrollTop,
+				d_sl = document.body.scrollLeft;
+
+			if ( pref.length > 1 ) {
+				dir.ns = pref[0];
+				dir.ew = pref[1];
+			} else if ( pref[0] === 'e' || pref[0] === 'w' )
+				dir.ew = pref[0];
+			else
+				dir.ns = pref[0];
+
+			if ( offset.top < d_st + margin ) dir.ns = 'n';
+			if ( offset.left < d_sl + margin ) dir.ew = 'w';
+			if ( win.width() + d_sl - (offset.left + width) < margin ) dir.ew = 'e';
+			if ( win.height() + d_st - (offset.top + height) < margin ) dir.ns = 's';
+
+			return (dir.ns ? dir.ns : '') + (dir.ew ? dir.ew : '');
+		}
+	},
+
 	uncompressBadges: uncompressBadges,
 	uncompressEmotes: uncompressEmotes,
 
diff --git a/style.css b/style.css
index ab8ae672..65df0160 100644
--- a/style.css
+++ b/style.css
@@ -1731,6 +1731,8 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator {
 	margin-left: 5px;
 }
 
+.ffz-wide-tip a b { color: #fff }
+
 .ffz-wide-tip b { margin-right: 20px; }
 
 .ffz-wide-tip span.stat svg {
@@ -1786,14 +1788,20 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator {
 .ffz-rich-tip .avatar {
 	float: left;
 	margin-right: 8px;
-	height: 48px;
-	width: 48px;
+	max-height: 48px;
+	max-width: 100px;
 }
 
 .ffz-rich-tip .tweet-heading .avatar {
 	border-radius: 50%;
 }
 
+.ffz-rich-tip .heading .title {
+	font-weight: bold;
+	display: block;
+	text-align: justify;
+}
+
 .ffz-rich-tip .display-name {
 	padding-top: 3px;
 	font-size: 14px;
@@ -1811,7 +1819,7 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator {
 	font-size: 12px;
 }
 
-.ffz-rich-tip .twitch-heading .badge.verified {
+.ffz-rich-tip .twitch-heading .tip-badge.verified {
 	height: 12px;
 	width: 12px;
 	margin: 2px 0 -1px 5px;
@@ -1820,13 +1828,13 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator {
 	display: inline-block;
 }
 
-.ffz-rich-tip .twitch-heading .big-name .badge.verified {
+.ffz-rich-tip .twitch-heading .big-name .tip-badge.verified {
 	height: 18px;
 	width: 18px;
 	margin: 1px 0 0 10px;
 }
 
-.ffz-rich-tip .tweet-heading .badge {
+.ffz-rich-tip .tweet-heading .tip-badge {
 	height: 12px;
 	width: 12px;
 	margin: 2px 0 -1px 5px;
@@ -1834,15 +1842,15 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator {
 	display: inline-block;
 }
 
-.ffz-rich-tip .badge.verified {
+.ffz-rich-tip .tip-badge.verified {
 	background-position: 0 -15px;
 }
 
-.ffz-rich-tip .badge.translator {
+.ffz-rich-tip .tip-badge.translator {
 	background-position: -12px -15px;
 }
 
-.ffz-rich-tip .badge.protected {
+.ffz-rich-tip .tip-badge.protected {
 	background-position: -24px -15px;
 	width: 14px;
 }
@@ -1867,11 +1875,13 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator {
 	font-size: 10px;
 }
 
+.ffz-rich-tip .subtitle,
 .ffz-rich-tip .quoted .body,
 .ffz-rich-tip .stats,
 .ffz-rich-tip .username { opacity: 0.6 }
 
 .ffz-rich-tip .stats { display: flex }
+.ffz-rich-tip .stats .wide-stat,
 .ffz-rich-tip time { flex-grow: 1 }
 
 .ffz-rich-tip .tweet-stats .stat:before {
@@ -1894,13 +1904,41 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator {
 
 .ffz-rich-tip .media { position: relative; text-align: center }
 
-.ffz-rich-tip .media:not([data-count="1"]) {
+.ffz-rich-tip .media[data-count]:not([data-count="1"]) {
 	display: flex;
 	margin: 8px -5px -5px 0;
 	flex-flow: column wrap;
 	height: 329px;
 }
 
+.ffz-rich-tip .media .duration {
+	position: absolute;
+	bottom: 0; right: 0;
+	margin: 4px;
+	background: #000;
+	opacity: .8;
+	padding: 2px 4px;
+	border-radius: 2px;
+	z-index: 10;
+	font-weight: 500;
+}
+
+.ffz-rich-tip .sixteen-nine {
+	width: 100%;
+	overflow: hidden;
+	margin: 0;
+	padding-top: 56.25%;
+	position: relative;
+}
+
+.ffz-rich-tip .sixteen-nine img {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 100%;
+	transform: translate(-50%, -50%);
+}
+
 .ffz-rich-tip .media video {
 	width: 100%;
 	max-height: 324px;
@@ -1911,7 +1949,7 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator {
 .ffz-rich-tip .media[data-count="2"] { height: 164.5px }
 .ffz-rich-tip .media img { max-height: 324px }
 
-.ffz-rich-tip .quoted .media:not([data-count="1"]) { height: 150px }
+.ffz-rich-tip .quoted .media[data-count]:not([data-count="1"]) { height: 150px }
 .ffz-rich-tip .quoted .media[data-count="2"] { height: 150px }
 .ffz-rich-tip .quoted .media video,
 .ffz-rich-tip .quoted .media img { max-height: 150px }