diff --git a/activate.js b/activate.js index 941a0a3..7468b27 100644 --- a/activate.js +++ b/activate.js @@ -46,6 +46,10 @@ helpIcon.css("left", offset.left + "px"); } + if (offset.top < helpIcon.height()){ + helpIcon.addClass("top"); + } + helpIcon.mouseover({selector: helpMap[i].selector, link: helpLink, offsetLeft: offset.left, offsetTop: offset.top}, function(event){ @@ -55,7 +59,7 @@ highlight.css("left", event.data.offsetLeft + "px"); - answer.css("top", event.data.offsetTop+$(event.data.selector).height() + "px"); + answer.css("top", event.data.offsetTop+$(event.data.selector).height() + ((offset.top < helpIcon.height()) ? helpIcon.height() : 0) + "px"); if( ((answer.width() + event.data.offsetLeft )) > page.width() ){ answer.css("left", (event.data.offsetLeft-answer.width()) + "px"); @@ -71,13 +75,7 @@ ); helpIcon.mouseout({selector: helpMap[i].selector}, function(event){ - // $(event.data.selector).css("box-shadow", "none"); - highlight.toggle(); - - // $(event.data.selector).toggleClass("highlight"); - - // page.css("-webkit-filter", ""); answer.hide(); answer.html(""); } diff --git a/assets/github.css b/assets/github.css index 191d4de..1cfbc56 100644 --- a/assets/github.css +++ b/assets/github.css @@ -45,7 +45,7 @@ margin-top: -16px; background: rgba(147,45,112,.6); color: #fff; - transition: all 200ms; + transition: background 200ms, box-shadow 200ms, border-radius 200ms, height 200ms, width 200ms, margin 200ms; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; @@ -62,6 +62,14 @@ box-shadow: 0 0 0 2px #fff, 2px 3px 5px rgba(0,0,0,1); } +.question.top{ + border-top-left-radius: 50%; + border-top-right-radius: 0%; + border-bottom-left-radius: 50%; + border-bottom-right-radius: 50%; + margin-top: 16px; +} + a.question { color: #fff; text-decoration: none;