summaryrefslogtreecommitdiff
path: root/assets/js/core/tooltip.js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/js/core/tooltip.js')
-rw-r--r--assets/js/core/tooltip.js85
1 files changed, 85 insertions, 0 deletions
diff --git a/assets/js/core/tooltip.js b/assets/js/core/tooltip.js
new file mode 100644
index 00000000..acb42bbd
--- /dev/null
+++ b/assets/js/core/tooltip.js
@@ -0,0 +1,85 @@
+KB.tooltip = function () {
+ function onMouseOver(event) {
+ if (! exists()) {
+ create(event.target);
+ }
+ }
+
+ function onMouseLeaveContainer() {
+ setTimeout(destroy, 500);
+ }
+
+ function create(element) {
+ var contentElement = element.querySelector("script");
+ if (contentElement) {
+ render(element, contentElement.innerHTML);
+ return;
+ }
+
+ var link = element.dataset.href;
+ if (link) {
+ fetch(link, function (html) {
+ if (html) {
+ render(element, html);
+ }
+ });
+ }
+ }
+
+ function fetch(url, callback) {
+ var request = new XMLHttpRequest();
+ request.open("GET", url, true);
+ request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+ request.onreadystatechange = function () {
+ if (request.readyState === XMLHttpRequest.DONE) {
+ if (request.status === 200) {
+ callback(request.responseText);
+ }
+ }
+ };
+ request.send(null);
+ }
+
+ function render(element, html) {
+ var containerElement = document.createElement("div");
+ containerElement.id = "tooltip-container";
+ containerElement.innerHTML = html;
+ containerElement.addEventListener("mouseleave", onMouseLeaveContainer, false);
+
+ var elementRect = element.getBoundingClientRect();
+ var top = elementRect.top + window.scrollY + elementRect.height;
+ containerElement.style.top = top + "px";
+
+ if (elementRect.left > (window.innerWidth - 600)) {
+ var right = window.innerWidth - elementRect.right - window.scrollX;
+ containerElement.style.right = right + "px";
+ } else {
+ var left = elementRect.left + window.scrollX;
+ containerElement.style.left = left + "px";
+ }
+
+ document.body.appendChild(containerElement);
+
+ document.body.onclick = function(event) {
+ if (! containerElement.contains(event.target)) {
+ destroy();
+ }
+ };
+ }
+
+ function destroy() {
+ var element = document.getElementById("tooltip-container");
+ if (element) {
+ element.parentNode.removeChild(element);
+ }
+ }
+
+ function exists() {
+ return !!document.getElementById("tooltip-container");
+ }
+
+ var elements = document.querySelectorAll(".tooltip");
+ for (var i = 0; i < elements.length; i++) {
+ elements[i].addEventListener("mouseenter", onMouseOver, false);
+ }
+};