Bug 592511, new hover tooltips, so exciting

apps/addons/templates/addons/details.html

@@ -249,7 +249,6 @@
   {% endwith %}
   {# /categories #}
 
-
   {# support box #}
   {% if addon.support_email or addon.support_url or addon.has_satisfaction %}
   <div id="support" class="highlight">

apps/addons/templates/addons/includes/collection_add_widget.html

@@ -1,4 +1,4 @@
-<div class="collection-add{{ ' condensed' if condensed else '' }}"
+<div class="collection-add widget collection{{ ' condensed tooltip' if condensed else '' }}"
   data-listurl="{{ url('collections.ajax_list') }}"
   data-addurl="{{ url('collections.ajax_add') }}"
   data-removeurl="{{ url('collections.ajax_remove') }}"
@@ -6,9 +6,9 @@
   data-addonid="{{ addon.id }}"
   >
   {% if condensed %}
-    <a href="#" title="{{ _('Add to collection') }}"><span></span></a>
+    <a class="collection" href="#" title="{{ _('Add to collection') }}"><span></span></a>
   {% else %}
-    <span><a href="#" title="{{ _('Add to collection') }}">
+    <span><a class="collection" href="#" title="{{ _('Add to collection') }}">
       {{ _('Add to collection') }}</a></span>
   {% endif %}
   <div class="popup-shim">

apps/addons/templates/addons/listing/items.html

@@ -12,7 +12,7 @@
         <div class="collection_widgets widgets condensed">
           {{ favorites_widget(addon, condensed=True) }}
           {{ collection_add_widget(addon, condensed=True) }}
-          {{ sharing_widget(addon, show_email=True) }}
+          {{ sharing_widget(addon, show_email=True, condensed=True) }}
         </div>
       {% endif %}
     </div>

apps/bandwagon/templates/bandwagon/collection_widgets.html

@@ -2,16 +2,16 @@
 {% if request.user.is_authenticated() %}
   {% set is_watching = c.id in request.amo_user.watching %}
       <a title="{{ (_('Stop Following') if is_watching else _('Follow this Collection')) if condensed }}"
-         class="widget watch{{ ' watching' if is_watching }}"
+         class="widget tooltip watch{{ ' watching' if is_watching }}"
          href="{{ c.watch_url() }}"><span>{{ _('Stop Following') if is_watching else _('Follow this Collection') }}</span></a>
 {% endif %}
-        {{ sharing_widget(c, show_email=False) }}
+        {{ sharing_widget(c, show_email=False, condensed=condensed) }}
 {% if request.user.is_authenticated() %}
       {#
       <a title="{{ _('Copy this Collection') }}" class="copy" href="#"></a>
       #}
       {% if request.check_ownership(c, require_owner=False) and condensed %}
-        <a title="{{ _('Edit this Collection') }}" class="widget edit" href="{{ c.edit_url() }}"></a>
+        <a title="{{ _('Edit this Collection') }}" class="widget edit tooltip" href="{{ c.edit_url() }}"></a>
       {% endif %}
 {% endif %}
 </div>

apps/bandwagon/templates/bandwagon/favorites_widget.html

@@ -1,6 +1,6 @@
 {% set text = faved_text if is_favorite else unfaved_text %}
 {% set title = _('Remove from favorites') if is_favorite else _('Add to favorites') %}
-<div class="addon-favorite {{ faved_class }}{{ ' condensed' if condensed else '' }}"
+<div class="addon-favorite widget {{ faved_class }}{{ ' condensed tooltip' if condensed else '' }}"
   data-addonid="{{ addon.id }}"
   data-addurl="{{ add_url }}"
   data-removeurl="{{ remove_url }}"

apps/sharing/helpers.py

@@ -8,7 +8,7 @@ from .models import ServiceBase, EMAIL
 
 @register.inclusion_tag('sharing/sharing_widget.html')
 @jinja2.contextfunction
-def sharing_widget(context, obj, show_email=True):
+def sharing_widget(context, obj, show_email=True, condensed=False):
     c = dict(context.items())
 
     services = list(sharing.SERVICES_LIST)
@@ -22,6 +22,7 @@ def sharing_widget(context, obj, show_email=True):
         counts[short] = service.count_term(share_counts[short])
 
     c.update({
+        'condensed': condensed,
         'show_email': show_email,
         'base_url': obj.share_url(),
         'counts': counts,

apps/sharing/templates/sharing/sharing_widget.html

@@ -7,10 +7,13 @@
 {% endif %}
 {% if listed %}
 {% set email_class = ' no-email' if not (show_email and request.user.is_authenticated()) %}
-<div class="share widget"
+<div class="share widget{{ ' condensed tooltip' if condensed }}"
      data-share-counts="{{ counts|json }}"
      data-base-url="{{ obj.share_url() }}?service=">
-  <a title="{{ sharemsg }}" class="share" href="#"><span>{{ sharemsg }}</span></a>
+  <a title="{{ sharemsg }}"
+     class="share" href="#">
+        <span>{{ sharemsg }}</span>
+  </a>
   <div class="share-me popup-shim{{ ' left' if condensed }}{{ email_class }}"></div>
 </div>
 {% endif %}

media/css/main.css

@@ -2460,7 +2460,7 @@ ol.pagination li a:active {
 }
 
 .condensed #sharing-popup.left {
-    left: -184px;
+    left: -194px;
 }
 
 .share-arrow {

media/css/zamboni/zamboni.css

@@ -730,6 +730,43 @@ th, td {
     font-size: inherit;
 }
 
+/** hover tooltip styles **/
+#tooltip {
+    display:none;
+    background: #2e5186;
+    color: white;
+    font-size: .9em;
+    -moz-border-radius: .8em;
+    -webkit-border-radius: .8em;
+    max-width: 300px;
+    text-align: center;
+    position: absolute;
+    padding: .1em .8em .2em .8em;
+    pointer-events: none;
+}
+
+#tooltip span {
+    display: block;
+    line-height: 1.2em;
+    max-height: 3.8em;
+    overflow: hidden;
+}
+
+#tooltip:before {
+    content: "\00a0";
+    display: block; /* reduce the damage in FF3.0 */
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin-left: -6px;
+    left: 50%;
+    bottom: -16px;
+    border: solid transparent;
+    border-width: 8px 6px;
+    border-top-color: #2e5186;
+    pointer-events: none;
+}
+
 /** =Search =Suggestions *********/
 .search-form .basic {
     overflow: visible;
@@ -2816,14 +2853,25 @@ td.input {
 .addon-favorite {
     cursor: pointer;
 }
+
 .addon-favorite span,
-.collection-add.condensed a span {
+.condensed .watch {
+    padding-left: 22px;
+}
+
+.addon-favorite span {
     background-repeat: no-repeat;
     background-image: url(../../img/zamboni/icons/collections.png);
     white-space: nowrap;
     background-position: 0 -500px;
-    padding-left: 22px;
 }
+
+.condensed .watch:not(.watching),
+.condensed .addon-favorite:not(.faved) span,
+.collection-add.condensed a span {
+    padding-left: 16px;
+}
+
 .addon-favorite span.msg {
     font-weight: bold;
 }
@@ -2902,7 +2950,6 @@ a.outlink:hover {
     background-image: url(../../img/zamboni/icons/collections.png);
     background-repeat: no-repeat;
     padding-left: 22px;
-    margin-right: .8em;
     text-indent: -9000px;
 }
 #addon-collector-logo {
@@ -2916,7 +2963,8 @@ a.outlink:hover {
 }
 .collection_widgets.condensed a.widget,
 .collection_widgets.condensed .widget > a{
-    padding-left: 16px;
+    padding: 0 0 0 16px;
+    width: 0px;
 }
 
 .html-rtl .collection_widgets.condensed a.widget,
@@ -2927,6 +2975,10 @@ a.outlink:hover {
     margin-left: .8em;
 }
 
+.widgets .widget {
+    margin-right: 8px;
+}
+
 .widgets.condensed a.widget > span,
 .widgets.condensed .widget > a > span {
     display: none;
@@ -2940,6 +2992,8 @@ a.outlink:hover {
 .widgets a.copy:hover { background-position: 0 0px; }
 .widgets a.watch { background-position: 0 -750px; }
 .widgets a.watch:hover { background-position: 0 -700px;}
+.widgets a.collection { background-position: 0 -150px; }
+.widgets a.collection:hover { background-position: 0 -100px;}
 .widgets a.watching { background-position: 0 -650px; }
 .widgets.condensed a.share { background-position: 0 -600px; }
 .widgets a.share, .widgets.condensed a.share:hover { background-position: 0 -550px; }

media/js/amo2009/global.js

@@ -546,6 +546,7 @@ $.fn.popup = function(click_target, opts) {
     return this;
 };
 
+
 /* Initialization things that get run on every page. */
 
 $(".hidden").hide(); // hide anything that should be hidden

media/js/zamboni/collections.js

@@ -705,6 +705,7 @@ $(document).ready(function () {
                     msg.text(widget.attr('data-favedtext'));
                     msg.attr('title', gettext('Remove from favorites'));
                 }
+                msg.trigger("tooltip_change");
             },
             error: function(xhr) {
                 widget.removeClass('ajax-loading');
@@ -731,8 +732,9 @@ $(document).ready(function () {
                 } else {
                     widget.removeClass("watching");
                 }
-                if (widget.attr("title")) {
+                if (widget.attr("title") || widget.attr("data-oldtitle")) {
                     widget.attr("title", follow_text);
+                    widget.trigger("tooltip_change");
                 } else {
                     widget.text(follow_text);
                 }

media/js/zamboni/global.js

@@ -0,0 +1,52 @@
+// Things global to the site should go here, such as re-usable helper
+// functions and common ui components.
+
+
+// Tooltip display. If you give an element a class of 'tooltip', it will
+// display a tooltip on hover. The contents of the tip will be the element's
+// title attriubute OR the first title attribute in its children. titles are
+// swapped out by the code so the native title doesn't display. If the title of
+// the element is changed while the tooltip is displayed, you can update the
+// tooltip by with the following:
+//      $el.trigger("tooltip_change");
+jQuery.fn.tooltip = function(tip_el) {
+    var $tip = $(tip_el),
+        $msg = $('span', $tip),
+        $targets = this,
+        $tgt, $title;
+
+    function setTip() {
+        var pos = $tgt.offset();
+
+        $msg.text($title.attr("title"));
+        $title.attr('data-oldtitle', $title.attr('title')).attr('title', '');
+
+        var tw  = $tip.outerWidth() / 2,
+            th  = $tip.outerHeight() - 8,
+            toX = pos.left + $tgt.innerWidth() / 2 - tw,
+            toY = pos.top - $tgt.innerHeight() - th - 1;
+
+        $tip.css({
+            left:   toX + "px",
+            top:    toY + "px"
+        }).show();
+    }
+    
+    $(document.body).bind("tooltip_change", setTip);
+    $targets.live("mouseover", function (e) {
+        $tgt = $(this);
+        $title = $tgt.attr('title') ? $tgt : $("[title]", $tgt).first();
+        setTip();
+
+    }).live("mouseout", function (e) {
+        $tip.hide();
+        $tgt = $(this);
+        $title.attr('title', $title.attr('data-oldtitle'))
+              .attr('data-oldtitle', '');
+    });
+};
+
+// Setting up site tooltips.
+$(document).ready(function() {
+    $(".tooltip").tooltip("#tooltip");
+})

settings.py

@@ -342,6 +342,7 @@ MINIFY_BUNDLES = {
             'js/zamboni/tabs.js',
 
             'js/jquery.cookie.js',
+            'js/zamboni/global.js',
             'js/amo2009/global.js',
             'js/jquery-ui/jqModal.js',
             'js/amo2009/home.js',

templates/base.html

@@ -93,6 +93,9 @@
         {% block content %}{% endblock %}
       {% endblock %}
     </div>
+    <div id="tooltip">
+      <span></span>
+    </div>
     <div class="hidden" id="popup-staging">
       {{ sharing_box() }}
       {% block popups %}