New tooltips

www/common/common-interface.js

@@ -5,8 +5,10 @@ define([
     '/customize/application_config.js',
     '/bower_components/alertifyjs/dist/js/alertify.js',
     '/common/notify.js',
-    '/common/visible.js'
-], function ($, Messages, Util, AppConfig, Alertify, Notify, Visible) {
+    '/common/visible.js',
+    '/common/tippy.min.js',
+    'css!/common/tippy.css',
+], function ($, Messages, Util, AppConfig, Alertify, Notify, Visible, Tippy) {
 
     var UI = {};
 
@@ -251,9 +253,13 @@ define([
         });
     }
 
-    UI.importContent = function (type, f) {
+    UI.importContent = function (type, f, cfg) {
         return function () {
-            var $files = $('<input type="file">').click();
+            var $files = $('<input>', {type:"file"});
+            if (cfg && cfg.accept) {
+                $files.attr('accept', cfg.accept);
+            }
+            $files.click();
             $files.on('change', function (e) {
                 var file = e.target.files[0];
                 var reader = new FileReader();
@@ -288,5 +294,55 @@ define([
         return $icon;
     };
 
+    // Tooltips
+    UI.addTooltips = function () {
+        var MutationObserver = window.MutationObserver;
+        var addTippy = function (el) {
+            if (el.nodeName === 'IFRAME') { return; }
+            console.log(el);
+            Tippy(el, {
+                position: 'bottom',
+                distance: 0,
+                performance: true,
+                delay: [500, 0]
+            });
+        };
+        var $body = $('body');
+        var $padIframe = $('#pad-iframe').contents().find('body');
+        $('[title]').each(function (i, el) {
+            addTippy(el);
+        });
+        $('#pad-iframe').contents().find('[title]').each(function (i, el) {
+            addTippy(el);
+        });
+        var observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.type === 'childList' && mutation.addedNodes.length) {
+                    $body.find('[title]').each(function (i, el) {
+                        addTippy(el);
+                    });
+                    if (!$padIframe.length) { return; }
+                    $padIframe.find('[title]').each(function (i, el) {
+                        addTippy(el);
+                    });
+                }
+            });
+        });
+        observer.observe($('body')[0], {
+            attributes: false,
+            childList: true,
+            characterData: false,
+            subtree: true
+        });
+        if ($('#pad-iframe').length) {
+            observer.observe($('#pad-iframe').contents().find('body')[0], {
+                attributes: false,
+                childList: true,
+                characterData: false,
+                subtree: true
+            });
+        }
+    };
+
     return UI;
 });

www/common/cryptpad-common.js

@@ -76,6 +76,7 @@ define([
     common.notify = UI.notify;
     common.unnotify = UI.unnotify;
     common.getIcon = UI.getIcon;
+    common.addTooltips = UI.addTooltips;
 
     // import common utilities for export
     common.find = Util.find;
@@ -1093,7 +1094,7 @@ define([
                     .click(prepareFeedback(type))
                     .click(UI.importContent('text/plain', function (content, file) {
                         callback(content, file);
-                    }));
+                    }, {accept: data ? data.accept : undefined}));
                 }
                 break;
             case 'upload':
@@ -1796,6 +1797,7 @@ define([
             store = common.store = env.store = storeObj;
 
             common.addDirectMessageHandler(common);
+            common.addTooltips();
 
             var proxy = getProxy();
             var network = getNetwork();

www/common/toolbar2.js

@@ -1,7 +1,7 @@
 define([
     'jquery',
     '/customize/application_config.js',
-    '/api/config'
+    '/api/config',
 ], function ($, Config, ApiConfig) {
     var Messages = {};
     var Cryptpad;
@@ -206,7 +206,7 @@ define([
         var pendingFriends = Cryptpad.getPendingInvites();
         editUsersNames.forEach(function (data) {
             var name = data.name || Messages.anonymous;
-            var $span = $('<span>', {'title': name, 'class': 'avatar'});
+            var $span = $('<span>', {'class': 'avatar'});
             var $rightCol = $('<span>', {'class': 'right-col'});
             var $nameSpan = $('<span>', {'class': 'name'}).text(name).appendTo($rightCol);
             var proxy = Cryptpad.getProxy();
@@ -214,9 +214,10 @@ define([
 
             if (Cryptpad.isLoggedIn() && data.curvePublic) {
                 if (isMe) {
-                    $nameSpan.attr('title', Messages._getKey('userlist_thisIsYou', [
+                    $span.attr('title', Messages._getKey('userlist_thisIsYou', [
                         name
-                    ])).text(name);
+                    ]));
+                    $nameSpan.text(name);
                 } else if (!proxy.friends || !proxy.friends[data.curvePublic]) {
                     if (pendingFriends.indexOf(data.netfluxId) !== -1) {
                         $('<span>', {'class': 'friend'}).text(Messages.userlist_pending)