Skip to content Skip to sidebar Skip to footer
Home / Javascript / Tooltip

Basic Idea Of A Custom Tooltip, Using Pure Javascript

Post a Comment
I need basic idea of creating a custom tooltip using pure Javascript code; What I want : For example : Link Text And onm

Solution 1:

I have a great idea about this question.

HTML

<ahref="https://www.google.com"tooltip="Go to Google">Google</a>

JavaScript

(function () {

var a = document.getElementsByTagName('*'),
    tip, text,
    base = document.createElement('tooltip'); //Defining all objectsfor (var x=0;x < a.length;x++) { //I'm using "for" loop to get all "a" elements with attribute "tooltip".
     a[x].onmouseover = function () {
         text = this.getAttribute('tooltip');
         tip = document.createTextNode(text);
         if (text != null) {// Checking if tooltip is empty or not.
               base.innerHTML = '';
               base.appendChild(tip);
               if (document.getElementsByTagName('tooltip')[0]){// Checking for any "tooltip" elementdocument.getElementsByTagName('tooltip')[0].remove();// Removing old tooltip
               }
               base.style.top = (event.pageY + 20) + 'px';
               base.style.left = (event.pageX + 20) + 'px';
               document.body.appendChild(base);
         }

     };
     a[x].onmouseout = function () {
         document.getElementsByTagName('tooltip')[0].remove();// Remove last tooltip
     };
}

})();

By including this script into your page, you just have to use tooltip="Text" in any HTML Element

CSS

tooltip {
    position: fixed;
    background: #fff;
    color: #333;
    border: 2px solid #333;
    font-size: 15px;
}

You can edit CSS as your wish!

Here's my JSFiddle

Hope this will help you.

Solution 2:

As this question comes up when a user searches for custom tooltip, I would like to add the bootstrap's JS tooltip, although you have mentioned pure javascript. So in a sense this answer is only to give the future readers another nice option to work with.

Take a look here for how to use bootstrap tooltip plugin. And here to learn about the options and methods available at your disposal when using Bootstrap's JS Tooltip.

Still I am giving the tryit from their site here:

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
/* Tooltip */.test+.tooltip>.tooltip-inner {
  background-color: #73AD21;
  color: #FFFFFF;
  border: 1px solid green;
  padding: 15px;
  font-size: 20px;
}


/* Tooltip on top */.test+.tooltip.top>.tooltip-arrow {
  border-top: 5px solid green;
}


/* Tooltip on bottom */.test+.tooltip.bottom>.tooltip-arrow {
  border-bottom: 5px solid blue;
}


/* Tooltip on left */.test+.tooltip.left>.tooltip-arrow {
  border-left: 5px solid red;
}


/* Tooltip on right */.test+.tooltip.right>.tooltip-arrow {
  border-right: 5px solid black;
}
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><divclass="container"><h3>Tooltip CSS Example</h3><ulclass="list-inline"><li><aclass="test"href="#"data-toggle="tooltip"data-placement="top"title="Hooray!">Top</a></li><li><aclass="test"href="#"data-toggle="tooltip"data-placement="bottom"title="Hooray!">Bottom</a></li><li><aclass="test"href="#"data-toggle="tooltip"data-placement="left"title="Hooray!">Left</a></li><li><aclass="test"href="#"data-toggle="tooltip"data-placement="right"title="Hooray!">Right</a></li></ul></div></body></html>

Solution 3:

You need a function something like this:

functiontooltip(text, element) {

    var offsetDistance = 20;

    tt = document.getElementById('ttdiv');
    elem = document.getElementById(element.id);
    tt.style.top = elem.offsetTop + offsetDistance + 'px';
    tt.style.left = elem.offsetLeft + offsetDistance + 'px';
    tt.style.display = 'block';
    tt.innerHTML = text;
}

Where ttdiv is the id of the tooltip div, that is initially set to display:none. You'll need an accompanying hide() function to hide the tooltip when onmouseout is triggered.

Here's a working JSFiddle.

Post a Comment for "Basic Idea Of A Custom Tooltip, Using Pure Javascript"