Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
...
  • 2 commits
  • 3 files changed
  • 0 commit comments
  • 1 contributor
Showing with 144 additions and 6 deletions.
  1. +24 −6 index.html
  2. +2 −0 tooltip.css
  3. +118 −0 tooltip.js
View
30 index.html
@@ -3,16 +3,22 @@
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
+ <link rel="stylesheet" href="tooltip.css" media="screen" />
+ <style>
+ body{font:14px/1.2em 'Helvetica','Calibri','Arial',sans-serif;position:relative;padding:0;margin:0;}
+ body > div {width:500px;margin: 20px auto;}
+ .hide{display:none;}
+ h1{font-size:1.2em;line-height:1.6em;margin:0;}
+ h2{font-size:1.1em;line-height:1.4em;margin:0;}
+ p{margin:10px 0 0 0;}
+ </style>
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen" />
<link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen" />
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print" />
- <!--[if lt IE 9]>
- <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
-
<title>JsTooltip by annavester</title>
</head>
@@ -78,7 +84,19 @@
</aside>
</div>
</div>
-
-
+ <script src="tooltip.js"></script>
+ <script>
+ window.onload = function() {
+
+ var tt = new Tooltip();
+ tt.init({
+ "opacity":".95",
+ "bgColor":"#333",
+ "txtColor": "#fff",
+ "height": "auto",
+ "customCSS": "border-radius:5px;"
+ });
+ }
+ </script>
</body>
</html>
View
2 tooltip.css
@@ -0,0 +1,2 @@
+.tooltip-container{padding:10px;position:absolute;margin:0;}
+.tooltip{border-bottom:1px dashed #ccc;cursor:pointer;}
View
118 tooltip.js
@@ -0,0 +1,118 @@
+'use strict';
+
+var Tooltip = function (){
+ var bodyNode = document.getElementsByTagName("body")[0],
+ that = this,
+ elements = this.elements,
+ config = null;
+
+ this.defaults = {
+ opacity: '1',
+ width: '300px',
+ height: '200px',
+ bgColor: '#fff',
+ txtColor: '#000',
+ customCSS: '',
+ containerClassName: 'tooltip-container'
+ };
+
+ this.init = function(options) {
+ var i = 0, cur;
+ config = merge(options);
+ elements = polyGetByClassName('tooltip');
+
+ for ( ; i < elements.length; ++i) {
+ cur = elements[i];
+ cur.addEventListener('mouseover', showTooltip);
+ cur.addEventListener('mouseout', hideTooltip);
+ }
+ };
+
+ function merge(options) {
+ var source = that.defaults;
+
+ if (!isUndefined(options)) {
+ for (var prop in source) {
+ if (!isUndefined(options[prop])) source[prop] = options[prop];
+ }
+ }
+ return source;
+ }
+
+ function showTooltip(event) {
+ var triggerElement = event.target,
+ tooltipType = triggerElement.getAttribute('data-tt-type'),
+ tooltipContainer = document.createElement('div'),
+ tooltipPosX = event.pageX,
+ tooltipPosY = event.pageY,
+ tooltipContent;
+
+ tooltipContainer.className = config.containerClassName;
+ tooltipContainer.style.cssText = 'opacity:'+config.opacity+';background-color:'+config.bgColor+';width:'+config.width+';height:'+config.height+';color:'+config.txtColor+';left:'+tooltipPosX+'px;top:'+tooltipPosY+'px;'+config.customCSS+'';
+
+ if (tooltipType === "element") {
+ /*
+ If tooltip type is set to element, tooltip's content can have html elements and is expected
+ to be placed right after the parent element of the tooltip instance.
+ */
+ tooltipContent = triggerElement.parentNode.nextElementSibling.innerHTML;
+ tooltipContainer.innerHTML = tooltipContent;
+ } else {
+ /*
+ If tooltip type is set to attr or anything else, tooltip's content is retrieved from title
+ attribute of the tooltip instance.
+ */
+ tooltipContent = triggerElement.getAttribute('title');
+ tooltipContainer.innerHTML = tooltipContent;
+ }
+
+ bodyNode.appendChild(tooltipContainer);
+ }
+
+ function hideTooltip() {
+ var elementsToRemove = polyGetByClassName('tooltip-container'),
+ i = 0;
+
+ for ( ; i < elementsToRemove.length; ++i) {
+ bodyNode.removeChild(elementsToRemove[i]);
+ }
+ }
+
+ /*
+ Helper functions
+ */
+ function polyGetByClassName(classname) {
+ if (typeof document.getElementsByClassName === 'function') {
+ return document.getElementsByClassName(classname);
+ } else {
+ return getElementsByClassName(classname);
+ }
+ }
+
+ function getElementsByClassName(className){
+ var allNodes = bodyNode.getElementsByTagName('*'),
+ nodesLen = allNodes.length,
+ classes = null,
+ nodes = [],
+ i = 0,
+ cur;
+
+ for ( ; i < nodesLen; i++) {
+ cur = allNodes[i];
+ if (isUndefined(cur)) break;
+ classes = cur.getAttribute('class');
+ if (classes !== null && classes.indexOf(className) !== -1) {
+ nodes.push(cur);
+ }
+ }
+ return nodes;
+ }
+
+ function isUndefined(element) {
+ return !!((typeof element === 'undefined'));
+ }
+
+ return {
+ init: this.init
+ }
+};

No commit comments for this range

Something went wrong with that request. Please try again.