Menu
I need basic idea of creating a custom tooltip using pure Javascript code;
What I want :
For example :
<a href="#" onmousemover="tooltip('text')">Link Text</a>
And onmouseover I want to display a custom tooltip with fixed position based on <a>'s element position, to start from right:0 or from left:0 of the <a> element;
756
To make a simple tooltip, we'll first create the HTML element that triggers the tooltip when hovered over. We'll create this element as a div and assign it the class hover-text. Next, we'll create the element for the tooltip itself. This will be a span element with the class tooltip-text.
JS Tooltip (tooltip. js) The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element. For a tutorial about Tooltips, read our Bootstrap Tooltip Tutorial.
A tooltip is a small section of text that is designed to explain how one particular element of your product works. It normally appears when a user hovers over the element in question, or a little “i” icon that's next to the element.
Basic Tooltip HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
I have a great idea about this question.
HTML
<a href="https://www.google.com" tooltip="Go to Google">Google</a>
JavaScript
(function () {
var a = document.getElementsByTagName('*'),
tip, text,
base = document.createElement('tooltip'); //Defining all objects
for (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" element
document.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.
131
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>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip CSS Example</h3>
<ul class="list-inline">
<li><a class="test" href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a class="test" href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a class="test" href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a class="test" href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>
</ul>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
