diff --git a/css/hint.css b/css/hint.css
deleted file mode 100644
index 7290998..0000000
--- a/css/hint.css
+++ /dev/null
@@ -1,265 +0,0 @@
-/*! Hint.css - v1.2.1 - 2013-03-24
-* http://kushagragour.in/lab/hint/
-* Copyright (c) 2013 Kushagra Gour; Licensed MIT */
-
-/*-------------------------------------*\
- HINT.css - A CSS tooltip library
-\*-------------------------------------*/
-/**
- * HINT.css is a tooltip library made in pure CSS.
- *
- * Source: https://github.com/chinchang/hint.css
- * Demo: http://kushagragour.in/labs/hint/
- *
- * Release under The MIT License
- *
- */
-/**
- * source: hint-core.scss
- *
- * Defines the basic styling for the tooltip.
- * Each tooltip is made of 2 parts:
- * 1) body (:after)
- * 2) arrow (:before)
- *
- * Classes added:
- * 1) hint
- */
-.hint, [data-hint] {
- position: relative;
- display: inline-block;
- /**
- * tooltip arrow
- */
- /**
- * tooltip body
- */ }
- .hint:before, .hint:after, [data-hint]:before, [data-hint]:after {
- position: absolute;
- visibility: hidden;
- opacity: 0;
- z-index: 1000000;
- pointer-events: none;
- -webkit-transition: 0.3s ease;
- -moz-transition: 0.3s ease;
- transition: 0.3s ease; }
- .hint:hover:before, .hint:hover:after, [data-hint]:hover:before, [data-hint]:hover:after {
- visibility: visible;
- opacity: 1; }
- .hint:before, [data-hint]:before {
- content: '';
- position: absolute;
- background: transparent;
- border: 6px solid transparent;
- z-index: 1000001; }
- .hint:after, [data-hint]:after {
- content: attr(data-hint);
- background: #383838;
- color: white;
- text-shadow: 0 -1px 0px black;
- padding: 8px 10px;
- font-size: 12px;
- line-height: 12px;
- white-space: nowrap;
- box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
-
-/**
- * source: hint-position.scss
- *
- * Defines the positoning logic for the tooltips.
- *
- * Classes added:
- * 1) hint--top
- * 2) hint--bottom
- * 3) hint--left
- * 4) hint--right
- */
-/**
- * set default color for tooltip arrows
- */
-.hint--top:before {
- border-top-color: #383838; }
-
-.hint--bottom:before {
- border-bottom-color: #383838; }
-
-.hint--left:before {
- border-left-color: #383838; }
-
-.hint--right:before {
- border-right-color: #383838; }
-
-/**
- * top tooltip
- */
-.hint--top:before {
- margin-bottom: -12px; }
-.hint--top:after {
- margin-left: -18px; }
-.hint--top:before, .hint--top:after {
- bottom: 100%;
- left: 50%; }
-.hint--top:hover:before, .hint--top:hover:after {
- -webkit-transform: translateY(-8px);
- -moz-transform: translateY(-8px);
- transform: translateY(-8px); }
-
-/**
- * bottom tooltip
- */
-.hint--bottom:before {
- margin-top: -12px; }
-.hint--bottom:after {
- margin-left: -18px; }
-.hint--bottom:before, .hint--bottom:after {
- top: 100%;
- left: 50%; }
-.hint--bottom:hover:before, .hint--bottom:hover:after {
- -webkit-transform: translateY(8px);
- -moz-transform: translateY(8px);
- transform: translateY(8px); }
-
-/**
- * right tooltip
- */
-.hint--right:before {
- margin-left: -12px;
- margin-bottom: -6px; }
-.hint--right:after {
- margin-bottom: -14px; }
-.hint--right:before, .hint--right:after {
- left: 100%;
- bottom: 50%; }
-.hint--right:hover:before, .hint--right:hover:after {
- -webkit-transform: translateX(8px);
- -moz-transform: translateX(8px);
- transform: translateX(8px); }
-
-/**
- * left tooltip
- */
-.hint--left:before {
- margin-right: -12px;
- margin-bottom: -6px; }
-.hint--left:after {
- margin-bottom: -14px; }
-.hint--left:before, .hint--left:after {
- right: 100%;
- bottom: 50%; }
-.hint--left:hover:before, .hint--left:hover:after {
- -webkit-transform: translateX(-8px);
- -moz-transform: translateX(-8px);
- transform: translateX(-8px); }
-
-/**
- * source: hint-color-types.scss
- *
- * Contains tooltips of various types based on color differences.
- *
- * Classes added:
- * 1) hint--error
- * 2) hint--warning
- * 3) hint--info
- * 4) hint--success
- *
- */
-/**
- * Error
- */
-.hint--error:after {
- background-color: #b34e4d;
- text-shadow: 0 -1px 0px #5a2626; }
-.hint--error.hint--top:before {
- border-top-color: #b34e4d; }
-.hint--error.hint--bottom:before {
- border-bottom-color: #b34e4d; }
-.hint--error.hint--left:before {
- border-left-color: #b34e4d; }
-.hint--error.hint--right:before {
- border-right-color: #b34e4d; }
-
-/**
- * Warning
- */
-.hint--warning:after {
- background-color: #c09854;
- text-shadow: 0 -1px 0px #6d5228; }
-.hint--warning.hint--top:before {
- border-top-color: #c09854; }
-.hint--warning.hint--bottom:before {
- border-bottom-color: #c09854; }
-.hint--warning.hint--left:before {
- border-left-color: #c09854; }
-.hint--warning.hint--right:before {
- border-right-color: #c09854; }
-
-/**
- * Info
- */
-.hint--info:after {
- background-color: #3986ac;
- text-shadow: 0 -1px 0px #193c4c; }
-.hint--info.hint--top:before {
- border-top-color: #3986ac; }
-.hint--info.hint--bottom:before {
- border-bottom-color: #3986ac; }
-.hint--info.hint--left:before {
- border-left-color: #3986ac; }
-.hint--info.hint--right:before {
- border-right-color: #3986ac; }
-
-/**
- * Success
- */
-.hint--success:after {
- background-color: #458746;
- text-shadow: 0 -1px 0px #1a331a; }
-.hint--success.hint--top:before {
- border-top-color: #458746; }
-.hint--success.hint--bottom:before {
- border-bottom-color: #458746; }
-.hint--success.hint--left:before {
- border-left-color: #458746; }
-.hint--success.hint--right:before {
- border-right-color: #458746; }
-
-/**
- * source: hint-always.scss
- *
- * Defines a persisted tooltip which shows always.
- *
- * Classes added:
- * 1) hint--always
- *
- */
-.hint--always:after, .hint--always:before {
- opacity: 1;
- visibility: visible; }
-.hint--always.hint--top:after, .hint--always.hint--top:before {
- -webkit-transform: translateY(-8px);
- -moz-transform: translateY(-8px);
- transform: translateY(-8px); }
-.hint--always.hint--bottom:after, .hint--always.hint--bottom:before {
- -webkit-transform: translateY(8px);
- -moz-transform: translateY(8px);
- transform: translateY(8px); }
-.hint--always.hint--left:after, .hint--always.hint--left:before {
- -webkit-transform: translateX(-8px);
- -moz-transform: translateX(-8px);
- transform: translateX(-8px); }
-.hint--always.hint--right:after, .hint--always.hint--right:before {
- -webkit-transform: translateX(8px);
- -moz-transform: translateX(8px);
- transform: translateX(8px); }
-
-/**
- * source: hint-rounded.scss
- *
- * Defines rounded corner tooltips.
- *
- * Classes added:
- * 1) hint--rounded
- *
- */
-.hint--rounded:after {
- border-radius: 4px; }
diff --git a/css/laps.css b/css/laps.css
index 647567c..efb0758 100644
--- a/css/laps.css
+++ b/css/laps.css
@@ -32,7 +32,7 @@
font-size: 12px;
color: #fff;
text-align: center;
- background-color: #428bca;
+ background-color: #5bc0de;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: width 0.6s ease;
@@ -52,11 +52,109 @@
#wpadminbar .laps-timeline .event-query {
background-color: #5bc0de;
}
-#wpadminbar [data-hint]:after {
- font-size: 13px;
- background-color: #464646;
- text-shadow: none;
+#wpadminbar .tooltip {
+ position: absolute;
+ z-index: 100000;
+ display: block;
+ visibility: visible;
+ font-size: 12px;
+ line-height: 1.4;
+ opacity: 0;
+ filter: alpha(opacity=0);
}
-#wpadminbar .hint--bottom:before {
+#wpadminbar .tooltip.in {
+ opacity: 0.9;
+ filter: alpha(opacity=90);
+}
+#wpadminbar .tooltip.top {
+ margin-top: -3px;
+ padding: 5px 0;
+}
+#wpadminbar .tooltip.right {
+ margin-left: 3px;
+ padding: 0 5px;
+}
+#wpadminbar .tooltip.bottom {
+ margin-top: 3px;
+ padding: 5px 0;
+}
+#wpadminbar .tooltip.left {
+ margin-left: -3px;
+ padding: 0 5px;
+}
+#wpadminbar .tooltip-inner {
+ max-width: 300px;
+ padding: 3px 8px;
+ color: #cccccc;
+ text-align: center;
+ text-decoration: none;
+ background-color: #464646;
+ border-radius: 4px;
+}
+#wpadminbar .tooltip-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+}
+#wpadminbar .tooltip.top .tooltip-arrow {
+ bottom: 0;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px 5px 0;
+ border-top-color: #464646;
+}
+#wpadminbar .tooltip.top-left .tooltip-arrow {
+ bottom: 0;
+ left: 5px;
+ border-width: 5px 5px 0;
+ border-top-color: #464646;
+}
+#wpadminbar .tooltip.top-right .tooltip-arrow {
+ bottom: 0;
+ right: 5px;
+ border-width: 5px 5px 0;
+ border-top-color: #464646;
+}
+#wpadminbar .tooltip.right .tooltip-arrow {
+ top: 50%;
+ left: 0;
+ margin-top: -5px;
+ border-width: 5px 5px 5px 0;
+ border-right-color: #464646;
+}
+#wpadminbar .tooltip.left .tooltip-arrow {
+ top: 50%;
+ right: 0;
+ margin-top: -5px;
+ border-width: 5px 0 5px 5px;
+ border-left-color: #464646;
+}
+#wpadminbar .tooltip.bottom .tooltip-arrow {
+ top: 0;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 0 5px 5px;
border-bottom-color: #464646;
}
+#wpadminbar .tooltip.bottom-left .tooltip-arrow {
+ top: 0;
+ left: 5px;
+ border-width: 0 5px 5px;
+ border-bottom-color: #464646;
+}
+#wpadminbar .tooltip.bottom-right .tooltip-arrow {
+ top: 0;
+ right: 5px;
+ border-width: 0 5px 5px;
+ border-bottom-color: #464646;
+}
+#wpadminbar .tooltip.in {
+ opacity: 1;
+ filter: alpha(opacity=100);
+}
+#wpadminbar .tooltip-inner {
+ line-height: 20px;
+ text-align: left;
+}
diff --git a/css/laps.less b/css/laps.less
index 91cb038..3efdc20 100644
--- a/css/laps.less
+++ b/css/laps.less
@@ -1,8 +1,10 @@
+@import "variables.less";
@import "mixins.less";
#wpadminbar {
#wp-admin-bar-laps {
+
.ab-sub-wrapper {
min-width: 90%;
width: 90%;
@@ -32,7 +34,7 @@
overflow: hidden;
height: 20px;
margin: 6px 0;
- background-color: #f5f5f5;
+ background-color: @timeline-bg;
border-radius: 4px;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
}
@@ -41,40 +43,41 @@
float: left;
width: 0%;
height: 20px;
- font-size: 12px;
+ font-size: @font-size-small;
color: #fff;
text-align: center;
- background-color: #428bca;
+ background-color: @event-info-color;
.box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15));
.transition(width .6s ease);
position: absolute; // disable stacking at start
- border-left: 1px solid #f5f5f5;
+ border-left: 1px solid @timeline-bg;
}
.laps-timeline .event-theme {
- background-color: #5cb85c;
+ background-color: @event-theme-color;
}
.laps-timeline .event-plugin {
- background-color: #428bca;
+ background-color: @event-plugin-color;
}
.laps-timeline .event-core {
- background-color: #f0ad4e;
+ background-color: @event-core-color;
}
.laps-timeline .event-query {
- background-color: #5bc0de;
+ background-color: @event-info-color;
}
- [data-hint]:after {
- font-size: 13px;
- background-color: #464646;
- text-shadow: none;
+ @import "tooltip.less";
+
+ .tooltip.in {
+ .opacity(1);
}
- .hint--bottom:before {
- border-bottom-color: #464646;
+ .tooltip-inner {
+ line-height: 20px;
+ text-align: left;
}
}
diff --git a/css/mixins.less b/css/mixins.less
index 0c58afe..8b7191e 100644
--- a/css/mixins.less
+++ b/css/mixins.less
@@ -6,4 +6,11 @@
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
+}
+
+.opacity(@opacity) {
+ opacity: @opacity;
+ // IE8 filter
+ @opacity-ie: (@opacity * 100);
+ filter: ~"alpha(opacity=@{opacity-ie})";
}
\ No newline at end of file
diff --git a/css/tooltip.less b/css/tooltip.less
new file mode 100644
index 0000000..1814b01
--- /dev/null
+++ b/css/tooltip.less
@@ -0,0 +1,94 @@
+//
+// Tooltips
+// --------------------------------------------------
+
+// Base class
+.tooltip {
+ position: absolute;
+ z-index: @zindex-tooltip;
+ display: block;
+ visibility: visible;
+ font-size: @font-size-small;
+ line-height: 1.4;
+ .opacity(0);
+
+ &.in { .opacity(.9); }
+ &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
+ &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
+ &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
+ &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+ max-width: @tooltip-max-width;
+ padding: 3px 8px;
+ color: @tooltip-color;
+ text-align: center;
+ text-decoration: none;
+ background-color: @tooltip-bg;
+ border-radius: @border-radius-base;
+}
+
+// Arrows
+.tooltip-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+}
+.tooltip {
+ &.top .tooltip-arrow {
+ bottom: 0;
+ left: 50%;
+ margin-left: -@tooltip-arrow-width;
+ border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+ border-top-color: @tooltip-arrow-color;
+ }
+ &.top-left .tooltip-arrow {
+ bottom: 0;
+ left: @tooltip-arrow-width;
+ border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+ border-top-color: @tooltip-arrow-color;
+ }
+ &.top-right .tooltip-arrow {
+ bottom: 0;
+ right: @tooltip-arrow-width;
+ border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+ border-top-color: @tooltip-arrow-color;
+ }
+ &.right .tooltip-arrow {
+ top: 50%;
+ left: 0;
+ margin-top: -@tooltip-arrow-width;
+ border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+ border-right-color: @tooltip-arrow-color;
+ }
+ &.left .tooltip-arrow {
+ top: 50%;
+ right: 0;
+ margin-top: -@tooltip-arrow-width;
+ border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+ border-left-color: @tooltip-arrow-color;
+ }
+ &.bottom .tooltip-arrow {
+ top: 0;
+ left: 50%;
+ margin-left: -@tooltip-arrow-width;
+ border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+ border-bottom-color: @tooltip-arrow-color;
+ }
+ &.bottom-left .tooltip-arrow {
+ top: 0;
+ left: @tooltip-arrow-width;
+ border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+ border-bottom-color: @tooltip-arrow-color;
+ }
+ &.bottom-right .tooltip-arrow {
+ top: 0;
+ right: @tooltip-arrow-width;
+ border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+ border-bottom-color: @tooltip-arrow-color;
+ }
+}
diff --git a/css/variables.less b/css/variables.less
new file mode 100644
index 0000000..e4f7629
--- /dev/null
+++ b/css/variables.less
@@ -0,0 +1,18 @@
+@font-size-small: 12px;
+
+// colors
+@timeline-bg: #f5f5f5;
+@event-theme-color: #5cb85c;
+@event-plugin-color: #428bca;
+@event-core-color: #f0ad4e;
+@event-info-color: #5bc0de;
+@event-warning-color: #d9534f;
+
+// because admin bar is 99999
+@zindex-tooltip: 100000;
+@tooltip-max-width: 300px;
+@tooltip-color: #ccc;
+@tooltip-bg: #464646;
+@tooltip-arrow-width: 5px;
+@tooltip-arrow-color: @tooltip-bg;
+@border-radius-base: 4px;
\ No newline at end of file
diff --git a/js/tooltip.js b/js/tooltip.js
new file mode 100644
index 0000000..3749141
--- /dev/null
+++ b/js/tooltip.js
@@ -0,0 +1,387 @@
+/* ========================================================================
+ * Bootstrap: tooltip.js v3.0.2
+ * http://getbootstrap.com/javascript/#tooltip
+ * Inspired by the original jQuery.tipsy by Jason Frame
+ * ========================================================================
+ * Copyright 2013 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================================== */
+
+// modified to use lapstooltip as name
+
++function ($) { "use strict";
+
+ // TOOLTIP PUBLIC CLASS DEFINITION
+ // ===============================
+
+ var Tooltip = function (element, options) {
+ this.type =
+ this.options =
+ this.enabled =
+ this.timeout =
+ this.hoverState =
+ this.$element = null
+
+ this.init('lapstooltip', element, options)
+ }
+
+ Tooltip.DEFAULTS = {
+ animation: true
+ , placement: 'top'
+ , selector: false
+ , template: ''
+ , trigger: 'hover focus'
+ , title: ''
+ , delay: 0
+ , html: false
+ , container: false
+ }
+
+ Tooltip.prototype.init = function (type, element, options) {
+ this.enabled = true
+ this.type = type
+ this.$element = $(element)
+ this.options = this.getOptions(options)
+
+ var triggers = this.options.trigger.split(' ')
+
+ for (var i = triggers.length; i--;) {
+ var trigger = triggers[i]
+
+ if (trigger == 'click') {
+ this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
+ } else if (trigger != 'manual') {
+ var eventIn = trigger == 'hover' ? 'mouseenter' : 'focus'
+ var eventOut = trigger == 'hover' ? 'mouseleave' : 'blur'
+
+ this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
+ this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
+ }
+ }
+
+ this.options.selector ?
+ (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
+ this.fixTitle()
+ }
+
+ Tooltip.prototype.getDefaults = function () {
+ return Tooltip.DEFAULTS
+ }
+
+ Tooltip.prototype.getOptions = function (options) {
+ options = $.extend({}, this.getDefaults(), this.$element.data(), options)
+
+ if (options.delay && typeof options.delay == 'number') {
+ options.delay = {
+ show: options.delay
+ , hide: options.delay
+ }
+ }
+
+ return options
+ }
+
+ Tooltip.prototype.getDelegateOptions = function () {
+ var options = {}
+ var defaults = this.getDefaults()
+
+ this._options && $.each(this._options, function (key, value) {
+ if (defaults[key] != value) options[key] = value
+ })
+
+ return options
+ }
+
+ Tooltip.prototype.enter = function (obj) {
+ var self = obj instanceof this.constructor ?
+ obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
+
+ clearTimeout(self.timeout)
+
+ self.hoverState = 'in'
+
+ if (!self.options.delay || !self.options.delay.show) return self.show()
+
+ self.timeout = setTimeout(function () {
+ if (self.hoverState == 'in') self.show()
+ }, self.options.delay.show)
+ }
+
+ Tooltip.prototype.leave = function (obj) {
+ var self = obj instanceof this.constructor ?
+ obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
+
+ clearTimeout(self.timeout)
+
+ self.hoverState = 'out'
+
+ if (!self.options.delay || !self.options.delay.hide) return self.hide()
+
+ self.timeout = setTimeout(function () {
+ if (self.hoverState == 'out') self.hide()
+ }, self.options.delay.hide)
+ }
+
+ Tooltip.prototype.show = function () {
+ var e = $.Event('show.bs.'+ this.type)
+
+ if (this.hasContent() && this.enabled) {
+ this.$element.trigger(e)
+
+ if (e.isDefaultPrevented()) return
+
+ var $tip = this.tip()
+
+ this.setContent()
+
+ if (this.options.animation) $tip.addClass('fade')
+
+ var placement = typeof this.options.placement == 'function' ?
+ this.options.placement.call(this, $tip[0], this.$element[0]) :
+ this.options.placement
+
+ var autoToken = /\s?auto?\s?/i
+ var autoPlace = autoToken.test(placement)
+ if (autoPlace) placement = placement.replace(autoToken, '') || 'top'
+
+ $tip
+ .detach()
+ .css({ top: 0, left: 0, display: 'block' })
+ .addClass(placement)
+
+ this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
+
+ var pos = this.getPosition()
+ var actualWidth = $tip[0].offsetWidth
+ var actualHeight = $tip[0].offsetHeight
+
+ if (autoPlace) {
+ var $parent = this.$element.parent()
+
+ var orgPlacement = placement
+ var docScroll = document.documentElement.scrollTop || document.body.scrollTop
+ var parentWidth = this.options.container == 'body' ? window.innerWidth : $parent.outerWidth()
+ var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight()
+ var parentLeft = this.options.container == 'body' ? 0 : $parent.offset().left
+
+ placement = placement == 'bottom' && pos.top + pos.height + actualHeight - docScroll > parentHeight ? 'top' :
+ placement == 'top' && pos.top - docScroll - actualHeight < 0 ? 'bottom' :
+ placement == 'right' && pos.right + actualWidth > parentWidth ? 'left' :
+ placement == 'left' && pos.left - actualWidth < parentLeft ? 'right' :
+ placement
+
+ $tip
+ .removeClass(orgPlacement)
+ .addClass(placement)
+ }
+
+ var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
+
+ this.applyPlacement(calculatedOffset, placement)
+ this.$element.trigger('shown.bs.' + this.type)
+ }
+ }
+
+ Tooltip.prototype.applyPlacement = function(offset, placement) {
+ var replace
+ var $tip = this.tip()
+ var width = $tip[0].offsetWidth
+ var height = $tip[0].offsetHeight
+
+ // manually read margins because getBoundingClientRect includes difference
+ var marginTop = parseInt($tip.css('margin-top'), 10)
+ var marginLeft = parseInt($tip.css('margin-left'), 10)
+
+ // we must check for NaN for ie 8/9
+ if (isNaN(marginTop)) marginTop = 0
+ if (isNaN(marginLeft)) marginLeft = 0
+
+ offset.top = offset.top + marginTop
+ offset.left = offset.left + marginLeft
+
+ $tip
+ .offset(offset)
+ .addClass('in')
+
+ // check to see if placing tip in new offset caused the tip to resize itself
+ var actualWidth = $tip[0].offsetWidth
+ var actualHeight = $tip[0].offsetHeight
+
+ if (placement == 'top' && actualHeight != height) {
+ replace = true
+ offset.top = offset.top + height - actualHeight
+ }
+
+ if (/bottom|top/.test(placement)) {
+ var delta = 0
+
+ if (offset.left < 0) {
+ delta = offset.left * -2
+ offset.left = 0
+
+ $tip.offset(offset)
+
+ actualWidth = $tip[0].offsetWidth
+ actualHeight = $tip[0].offsetHeight
+ }
+
+ this.replaceArrow(delta - width + actualWidth, actualWidth, 'left')
+ } else {
+ this.replaceArrow(actualHeight - height, actualHeight, 'top')
+ }
+
+ if (replace) $tip.offset(offset)
+ }
+
+ Tooltip.prototype.replaceArrow = function(delta, dimension, position) {
+ this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + "%") : '')
+ }
+
+ Tooltip.prototype.setContent = function () {
+ var $tip = this.tip()
+ var title = this.getTitle()
+
+ $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title)
+ $tip.removeClass('fade in top bottom left right')
+ }
+
+ Tooltip.prototype.hide = function () {
+ var that = this
+ var $tip = this.tip()
+ var e = $.Event('hide.bs.' + this.type)
+
+ function complete() {
+ if (that.hoverState != 'in') $tip.detach()
+ }
+
+ this.$element.trigger(e)
+
+ if (e.isDefaultPrevented()) return
+
+ $tip.removeClass('in')
+
+ $.support.transition && this.$tip.hasClass('fade') ?
+ $tip
+ .one($.support.transition.end, complete)
+ .emulateTransitionEnd(150) :
+ complete()
+
+ this.$element.trigger('hidden.bs.' + this.type)
+
+ return this
+ }
+
+ Tooltip.prototype.fixTitle = function () {
+ var $e = this.$element
+ if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
+ $e.attr('data-original-title', $e.attr('title') || '').attr('title', '')
+ }
+ }
+
+ Tooltip.prototype.hasContent = function () {
+ return this.getTitle()
+ }
+
+ Tooltip.prototype.getPosition = function () {
+ var el = this.$element[0]
+ return $.extend({}, (typeof el.getBoundingClientRect == 'function') ? el.getBoundingClientRect() : {
+ width: el.offsetWidth
+ , height: el.offsetHeight
+ }, this.$element.offset())
+ }
+
+ Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
+ return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } :
+ placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
+ placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
+ /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
+ }
+
+ Tooltip.prototype.getTitle = function () {
+ var title
+ var $e = this.$element
+ var o = this.options
+
+ title = $e.attr('data-original-title')
+ || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
+
+ return title
+ }
+
+ Tooltip.prototype.tip = function () {
+ return this.$tip = this.$tip || $(this.options.template)
+ }
+
+ Tooltip.prototype.arrow = function () {
+ return this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow')
+ }
+
+ Tooltip.prototype.validate = function () {
+ if (!this.$element[0].parentNode) {
+ this.hide()
+ this.$element = null
+ this.options = null
+ }
+ }
+
+ Tooltip.prototype.enable = function () {
+ this.enabled = true
+ }
+
+ Tooltip.prototype.disable = function () {
+ this.enabled = false
+ }
+
+ Tooltip.prototype.toggleEnabled = function () {
+ this.enabled = !this.enabled
+ }
+
+ Tooltip.prototype.toggle = function (e) {
+ var self = e ? $(e.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) : this
+ self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
+ }
+
+ Tooltip.prototype.destroy = function () {
+ this.hide().$element.off('.' + this.type).removeData('bs.' + this.type)
+ }
+
+
+ // TOOLTIP PLUGIN DEFINITION
+ // =========================
+
+ var old = $.fn.lapstooltip
+
+ $.fn.lapstooltip = function (option) {
+ return this.each(function () {
+ var $this = $(this)
+ var data = $this.data('bs.lapstooltip')
+ var options = typeof option == 'object' && option
+
+ if (!data) $this.data('bs.lapstooltip', (data = new Tooltip(this, options)))
+ if (typeof option == 'string') data[option]()
+ })
+ }
+
+ $.fn.lapstooltip.Constructor = Tooltip
+
+
+ // TOOLTIP NO CONFLICT
+ // ===================
+
+ $.fn.lapstooltip.noConflict = function () {
+ $.fn.lapstooltip = old
+ return this
+ }
+
+}(jQuery);
diff --git a/src/class-laps.php b/src/class-laps.php
index 87eeae2..28429dc 100644
--- a/src/class-laps.php
+++ b/src/class-laps.php
@@ -139,15 +139,35 @@ class Laps {
add_action( 'wp_enqueue_scripts', array( __CLASS__, 'enqueue_scripts' ) );
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_scripts' ) );
add_action( 'admin_bar_menu', array( __CLASS__, 'admin_bar_menu' ), 100 );
+ add_action( 'wp_print_footer_scripts', array( __CLASS__, 'print_footer_scripts' ), 11 );
+ add_action( 'admin_print_footer_scripts', array( __CLASS__, 'print_footer_scripts' ), 11 );
}
static function enqueue_scripts() {
- wp_register_style( 'laps-hint', plugins_url( 'css/hint.css', __DIR__ ), array(), '1.2.1' );
- wp_register_style( 'laps', plugins_url( 'css/laps.css', __DIR__ ), array( 'laps-hint' ) );
+ wp_register_script( 'laps-tooltip', plugins_url( 'js/tooltip.js', __DIR__ ), array( 'jquery' ), '3.0.2', true );
+ wp_register_style( 'laps', plugins_url( 'css/laps.css', __DIR__ ) );
- if ( is_admin_bar_showing() )
+ if ( is_admin_bar_showing() ) {
wp_enqueue_style( 'laps' );
+ }
+ }
+
+ static function print_footer_scripts( ) {
+
+ if ( ! is_admin_bar_showing() )
+ return;
+
+ wp_print_scripts( 'laps-tooltip' );
+ ?>queries, $query_data );
- $html = $mustache->render( 'laps', array( 'events' => $event_data, 'queries' => $query_data ) );
+ $html = $mustache->render(
+ 'laps',
+ array(
+ 'events' => $event_data,
+ 'queries' => $query_data,
+ 'savequeries' => defined( 'SAVEQUERIES' ) && SAVEQUERIES,
+ )
+ );
$wp_admin_bar->add_node( array(
'id' => 'laps',
diff --git a/views/laps.mustache b/views/laps.mustache
index 14a2174..e333b14 100644
--- a/views/laps.mustache
+++ b/views/laps.mustache
@@ -1,10 +1,13 @@
{{#events}}
-
+
{{/events}}
{{#queries}}
-
+
{{/queries}}
-