Permalink
Browse files

added tooltip files

  • Loading branch information...
annavester committed Mar 2, 2013
1 parent 206cf96 commit 8dabc21ed0d92a5d1a95672f985ca1325f58946d
Showing with 143 additions and 1 deletion.
  1. +23 −1 index.html
  2. +2 −0 tooltip.css
  3. +118 −0 tooltip.js
View
@@ -8,6 +8,15 @@
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="javascripts/main.js"></script>
+ <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>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
@@ -49,6 +58,19 @@ <h3>JS Tooltip.</h3>
</footer>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
-
+ <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
@@ -0,0 +1,2 @@
+.tooltip-container{padding:10px;position:absolute;margin:0;}
+.tooltip{border-bottom:1px dashed #ccc;cursor:pointer;}
View
@@ -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
+ }
+};

0 comments on commit 8dabc21

Please sign in to comment.