Replace spotlight box help with a hover bubble.

r2/r2/public/static/css/reddit.css

@@ -888,14 +888,6 @@ a.author { margin-right: 0.5em; }
     text-decoration: underline;
 }
 
-.help a.open, .help a.close {
-    margin: 0px 5px 5px 0;
-    position: absolute;
-    right: 0px;
-    bottom: 0px;
-}
-
-
 .help.help-cover {
     position: relative;
     background-color: #F8F8F8;
@@ -908,6 +900,47 @@ a.author { margin-right: 0.5em; }
 .help p, .help form { margin: 5px; font-size:110%; }
 .help form { display: inline; }
 
+.help-hoverable {
+    cursor: help;
+}
+
+.help-bubble {
+    display: none;
+    position: absolute;
+    width: 35em;
+    background: white;
+    color: #333;
+    border: 1px solid gray;
+    padding: 3px;
+    box-shadow: 0 2px 10px rgba(0,0,0,.25);
+}
+
+.help-bubble p, .help-bubble form {
+    margin: .5em;
+}
+
+.help-bubble:before, .help-bubble:after {
+    position: absolute;
+    right: 8px;
+    display: block;
+    content: '';
+    border: 9px solid transparent;
+}
+
+.help-bubble:before {
+    top: -19px;
+    border-bottom-color: gray;
+}
+
+.help-bubble:after {
+    top: -18px;
+    border-bottom-color: white;
+}
+
+.help-bubble a:hover {
+    text-decoration: underline
+}
+
 .infotext { 
     border: 1px solid #369;
     background-color: #EFF7FF;
@@ -975,6 +1008,14 @@ a.author { margin-right: 0.5em; }
     top: 1px;
 }
 
+.organic-listing .help {
+    color: #336699;
+    margin: 0px 5px 5px 0;
+    position: absolute;
+    right: -1px;
+    bottom: 0px;
+}
+
 .link.promotedlink {
     /*background-color: lightgreen; */
     border: 1px solid gray;

r2/r2/public/static/js/base.js

@@ -12,4 +12,5 @@ r.setup = function(config) {
 $(function() {
     r.login.ui.init()
     r.analytics.init()
+    r.ui.HelpBubble.init()
 })

r2/r2/public/static/js/reddit.js

@@ -290,6 +290,8 @@ function get_organic(elem, next) {
         if (next_thing.length == 0)
             next_thing = thing.siblings(".thing:not(.stub)").filter(":last");
     }    
+
+    organic_help(listing, next_thing)
     thing.fadeOut('fast', function() {
             if(next_thing.length)
                 next_thing.fadeIn('fast', function() {
@@ -319,6 +321,25 @@ function get_organic(elem, next) {
                     });
 };
 
+function organic_help(listing, thing) {
+    listing = listing || $('.organic-listing')
+    thing = thing || listing.find('.thing:visible')
+
+    var help = $('#spotlight-help')
+    if (!help.length) {
+        return
+    }
+
+    help.data('HelpBubble').hide(function() {
+        help.find('.help-section').hide()
+        if (thing.hasClass('promoted')) {
+            help.find('.help-promoted').show()
+        } else {
+            help.find('.help-organic').show()
+        }
+    })
+}
+
 /* links */
 
 function linkstatus(form) {
@@ -1250,6 +1271,8 @@ $(function() {
         $("#shortlink-text").click(function() {
             $(this).select();
         });
+
+        organic_help()
     });
 
 function show_friend(account_fullname) {

r2/r2/public/static/js/ui.js

@@ -144,3 +144,61 @@ r.ui.Form.prototype = $.extend(new r.ui.Base(), {
         this.showStatus(r.strings.an_error_occurred + ' (' + xhr.status + ')', true)
     }
 })
+
+r.ui.HelpBubble = function(el) {
+    r.ui.Base.call(this, el)
+    this.$el.hover($.proxy(this, 'queueShow'), $.proxy(this, 'queueHide'))
+    this.$parent = this.$el.parent()
+    this.$parent.hover($.proxy(this, 'queueShow'), $.proxy(this, 'queueHide'))
+    this.$parent.click($.proxy(this, 'queueShow'))
+}
+r.ui.HelpBubble.init = function() {
+    $('.help-bubble').each(function(idx, el) {
+        $(el).data('HelpBubble', new r.ui.HelpBubble(el))
+    })
+}
+r.ui.HelpBubble.prototype = $.extend(new r.ui.Base(), {
+    showDelay: 150,
+    hideDelay: 750,
+
+    show: function() {
+        this.cancelTimeout()
+
+        $('body').append(this.$el)
+
+        var parentPos = this.$parent.offset()
+        this.$el
+            .show()
+            .offset({
+                left: parentPos.left + this.$parent.outerWidth(true) - this.$el.outerWidth(true),
+                top: parentPos.top + this.$parent.outerHeight(true) + 5
+            })
+    },
+
+    hide: function(callback) {
+        this.$el.fadeOut(150, $.proxy(function() {
+            this.$el.hide()
+            this.$parent.append(this.$el)
+            if (callback) {
+                callback()
+            }
+        }, this))
+    },
+
+    cancelTimeout: function() {
+        if (this.timeout) {
+            clearTimeout(this.timeout)
+            this.timeout = null
+        }
+    },
+
+    queueShow: function() {
+        this.cancelTimeout()
+        this.timeout = setTimeout($.proxy(this, 'show'), this.showDelay)
+    },
+
+    queueHide: function() {
+        this.cancelTimeout()
+        this.timeout = setTimeout($.proxy(this, 'hide'), this.hideDelay)
+    }
+})

r2/r2/templates/spotlightlisting.html

@@ -46,72 +46,39 @@
     <button class="arrow prev" onclick="get_organic(this, false)">prev</button>
     <button class="arrow next" onclick="get_organic(this, true)">next</button>
   </div>
-  
-  <div class="help">
-    <a class="open" href="javascript:void(0)">${_("what's this?")}</a>
+
+  <div class="help help-hoverable">
+    ${_("what's this?")}
+    <div id="spotlight-help" class="help-bubble">
+      <div class="help-section help-promoted">
+        <p>
+          ${text_with_links(
+            _("This sponsored link is an advertisement generated with our %(self_serve_advertisement_tool)s."),
+              self_serve_advertisement_tool=dict(link_text=_("self-serve advertisement tool"), path="http://www.reddit.com/help/selfservicepromotion")
+          )}
+        </p>
+        <p>
+          ${text_with_links(
+            _("Use of this tool is open to all members of reddit.com, and for as little as $20 you can advertise in this area. %(get_started)s"),
+              get_started=dict(link_text=unsafe(_("Get started &rsaquo;")), path="/ad_inq")
+          )}
+        </p>
+      </div>
+      <div class="help-section help-organic">
+        <p>
+          ${_("This area shows new and upcoming links. Vote on" +
+                " links here to help them become popular, and click" +
+                " the forwards and backwards buttons to view more. ")}
+        </p>
+        %if c.user_is_loggedin:
+          ${ynbutton(_("here"), _("This element has been disabled."),
+                     "disable_ui",
+                     format = _("Click %(here)s to disable this feature."),
+                     format_arg = "here",
+                     hidden_data = dict(id="organic"))}
+        %endif
+      </div>
+    </div>
   </div>
 </div>
 
-<div class="help help-cover promoted">
-    <p>
-      ${text_with_links(
-        _("This sponsored link is an advertisement generated with our %(self_serve_advertisement_tool)s."),
-          self_serve_advertisement_tool=dict(link_text=_("self-serve advertisement tool"), path="http://www.reddit.com/help/selfservicepromotion")
-      )}
-    </p>
-    <p>
-      ${text_with_links(
-        _("Use of this tool is open to all members of reddit.com, and for as little as $20 you can advertise in this area. %(get_started)s"),
-          get_started=dict(link_text=unsafe(_("Get started &rsaquo;")), path="/ad_inq")
-      )}
-    </p>
-    <div class="help">
-      <a class="close" href="javascript:void(0)">${_("close help")}</a>
-    </div>
-</div>
-
-<div class="help help-cover organic">
-    <p>
-      ${_("This area shows new and upcoming links. Vote on" +
-            " links here to help them become popular, and click" +
-            " the forwards and backwards buttons to view more. ")}
-    </p>
-    %if c.user_is_loggedin:
-      ${ynbutton(_("here"), _("This element has been disabled."),
-                 "disable_ui", callback = "disappear_help",
-                 format = _("Click %(here)s to disable this feature."),
-                 format_arg = "here",
-                 hidden_data = dict(id="organic"))}
-    %endif
-    <div class="help">
-      <a class="close" href="javascript:void(0)">${_("close help")}</a>
-    </div>
-</div>
-
-<script type="text/javascript">
-    function disappear_help(elem) {
-       $(elem).parents(".help:first").parent().html(
-                 "${_('The new link area will no longer appear for you.' +
-                      ' To re-enable it, visit your preferences.')}");
-    }
-    $(function() {
-        $(".help")
-            .find("a.open").click(function() {
-               var l = $(this).parents(".organic-listing");
-               if (l.find(".thing:visible").hasClass("promoted")) {
-                    l.siblings(".help.promoted").show();
-               } else {
-                    l.siblings(".help.organic").show();
-               }
-               l.hide();
-            }).end()
-            .find("a.close").click(function() {
-              $(this).parents(".spacer")
-                 .find(".help-cover").hide();
-              $(this).parents(".spacer")
-                .find(".organic-listing").show();
-            });
-      });
-</script>
-
-