diff --git a/sandbox/annotate.html b/sandbox/annotate.html index 62eb7ee58e..2b0fff0e07 100644 --- a/sandbox/annotate.html +++ b/sandbox/annotate.html @@ -4,14 +4,14 @@ .annotated{ position:relative; } -.annotated img{ /* Set this to stop white-space appearing under the image. */ +.annotated img{ display:block; } -.annotated b{ /* Hide the figcaption’s title. */ +.annotated b{ position:absolute; left:-99999px; } -.annotated ul{ /* Set up the canvas for the annotations to sit on. */ +.annotated ul{ list-style:none; position:absolute; top:0; @@ -19,26 +19,15 @@ bottom:0; left:0; } + .annotated li{ display:block; - padding:0 5px; - - width:auto; - line-height: 12px; position:absolute; +} - font: 10px 'Open Sans'; - - - - white-space:nowrap; /* Stop the annotations breaking onto several lines. */ - cursor:default; - background:#fff; - background:rgba(255,255,255,0.75); - - -webkit-box-shadow:0 0 5px rgba(0,0,0,0.25); - -moz-box-shadow:0 0 5px rgba(0,0,0,0.25); - box-shadow:0 0 5px rgba(0,0,0,0.25); +.tooltip a{ + text-decoration: none; + color: #008800; } @@ -61,10 +50,10 @@
Line/Key Selection: Cisco SPA504G
diff --git a/sandbox/tooltips.css b/sandbox/tooltips.css index f5c0f11cb3..3bb5cd77b9 100644 --- a/sandbox/tooltips.css +++ b/sandbox/tooltips.css @@ -1,60 +1,105 @@ -.tooltip, .arrow:after { - background: black; - border: 2px solid white; +.tooltip, +.arrow-top:after, .arrow-bottom:after, .arrow-left:after, .arrow-right:after { + background: white; + border: 1px solid #008800; } .tooltip { - pointer-events: none; - opacity: 0; display: inline-block; position: absolute; - padding: 10px 20px; - color: white; - border-radius: 20px; - margin-top: 20px; + padding: 2px 10px; + color: #008800; + border-radius: 1px; text-align: center; - font: bold 14px "Helvetica Neue", Sans-Serif; - font-stretch: condensed; - text-decoration: none; - text-transform: uppercase; - box-shadow: 0 0 7px black; -} -.arrow { - width: 70px; - height: 16px; + line-height:14px; + font: 12px "Open Sans", Sans-Serif; + box-shadow: 0 0 3px black; +} + +.arrow-top { + width: 50px; + height: 10px; overflow: hidden; position: absolute; left: 50%; - margin-left: -35px; - bottom: -16px; + margin-left: -25px; + bottom: -10px; +} +.arrow-top:after { + content: ""; + position: absolute; + left: 12px; + top: -25px; + width: 25px; + height: 25px; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); +} + +.arrow-bottom { + width: 50px; + height: 10px; + overflow: hidden; + position: absolute; + left: 50%; + margin-left: -25px; + top: -10px; +} +.arrow-bottom:after { + content: ""; + position: absolute; + left: 12px; + bottom: -25px; + width: 25px; + height: 25px; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); +} + +.arrow-left { + width: 10px; + height: 50px; + overflow: hidden; + position: absolute; + top: 50%; + margin-top: -25px; + right: -10px; +} +.arrow-left:after { + content: ""; + position: absolute; + left: -25px; + top: 11px; + width: 25px; + height: 25px; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); +} + +.arrow-right { + width: 10px; + height: 50px; + overflow: hidden; + position: absolute; + top: 50%; + margin-top: -25px; + left: -10px; } -.arrow:after { +.arrow-right:after { content: ""; position: absolute; - left: 20px; - top: -20px; + right: -25px; + top: 11px; width: 25px; height: 25px; - -webkit-box-shadow: 6px 5px 9px -9px black, - 5px 6px 9px -9px black; - -moz-box-shadow: 6px 5px 9px -9px black, - 5px 6px 9px -9px black; - box-shadow: 6px 5px 9px -9px black, - 5px 6px 9px -9px black; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } -.tooltip.active { - opacity: 1; - margin-top: 5px; - -webkit-transition: all 0.2s ease; - -moz-transition: all 0.2s ease; - -ms-transition: all 0.2s ease; - -o-transition: all 0.2s ease; -} -.tooltip.out { - opacity: 0; - margin-top: -20px; -} \ No newline at end of file diff --git a/sandbox/tooltips.js b/sandbox/tooltips.js index 07934fc100..bbebd5dc7f 100644 --- a/sandbox/tooltips.js +++ b/sandbox/tooltips.js @@ -1,65 +1,50 @@ -// IIFE to ensure safe use of $ (function( $ ) { - // Create plugin $.fn.tooltips = function(el) { var $tooltip, $body = $('body'), $el; - // Ensure chaining works return this.each(function(i, el) { $el = $(el).attr("data-tooltip", i); + var pos = $el.attr("data-pos"); + if(pos == undefined) pos = "top"; + console.log("pos at " + i + " is ", pos); - // Make DIV and append to page - //var $tooltip = $('
' + $el.attr('title') + '
').appendTo("body"); - var $tooltip = $('
' + $el.text() + '
').appendTo("body"); + var $tooltip = $('
' + $el.html() + '
').appendTo("body"); + $el.html(''); - // Position right away, so first appearance is smooth var linkPosition = $el.position(); - + console.log(linkPosition); + console.log("w="+$tooltip.outerWidth()+",h="+$tooltip.outerHeight()); + var top, left; + switch(pos) { + case "top": + top = linkPosition.top + 10 - $tooltip.outerHeight(); + left = linkPosition.left + 48 - $tooltip.outerWidth()/2; + break; + case "bottom": + top = linkPosition.top + 3 + $tooltip.outerHeight(); + left = linkPosition.left + 48 - $tooltip.outerWidth()/2; + break; + case "left": + top = linkPosition.top + 17 - ($tooltip.outerHeight()/2); + left = linkPosition.left + 41 - $tooltip.outerWidth(); + break; + case "right": + top = linkPosition.top + 17 - ($tooltip.outerHeight()/2); + left = linkPosition.left + 55; + break; + } $tooltip.css({ - top: linkPosition.top - $tooltip.outerHeight() - 13, - left: linkPosition.left - ($tooltip.width()/2) + top: top, + left: left }); - // Mouseenter - .hover(function() { - - $el = $(this); - - $tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']'); - - // Reposition tooltip, in case of page movement e.g. screen resize - var linkPosition = $el.position(); - - $tooltip.css({ - top: linkPosition.top - $tooltip.outerHeight() - 13, - left: linkPosition.left - ($tooltip.width()/2) - }); - - // Adding class handles animation through CSS - $tooltip.addClass("active"); - - // Mouseleave - }, function() { - - $el = $(this); - - // Temporary class for same-direction fadeout - $tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']').addClass("out"); - - // Remove all classes - setTimeout(function() { - $tooltip.removeClass("active").removeClass("out"); - }, 300); - - }); - - }); + }); - } + } })(jQuery);