add tooltips

package.json

@@ -51,5 +51,8 @@
     "url-loader": "^0.5.7",
     "webpack": "^3.1.0",
     "webpack-dev-server": "^2.4.5"
+  },
+  "dependencies": {
+    "balloon-css": "^0.5.0"
   }
 }

src/DPlayer.js

@@ -281,11 +281,10 @@ class DPlayer {
         const volumeEle = this.element.getElementsByClassName('dplayer-volume')[0];
         const volumeBarWrapWrap = this.element.getElementsByClassName('dplayer-volume-bar-wrap')[0];
         const volumeBarWrap = this.element.getElementsByClassName('dplayer-volume-bar')[0];
-        const volumeicon = this.element.getElementsByClassName('dplayer-volume-icon')[0];
+        const volumeicon = this.element.getElementsByClassName('dplayer-volume-icon')[0].getElementsByClassName('dplayer-icon-content')[0];
         const vWidth = 35;
 
         this.switchVolumeIcon = () => {
-            const volumeicon = this.element.getElementsByClassName('dplayer-volume-icon')[0];
             if (this.volume() >= 0.95) {
                 volumeicon.innerHTML = svg('volume-up');
             }
@@ -842,18 +841,17 @@ class DPlayer {
     /**
      * Set volume
      */
-    volume (percentage, nonotice, nostorage) {
+    volume (percentage, nostorage) {
         percentage = parseFloat(percentage);
         if (!isNaN(percentage)) {
             percentage = percentage > 0 ? percentage : 0;
             percentage = percentage < 1 ? percentage : 1;
             this.updateBar('volume', percentage, 'width');
+            const formatPercentage = `${(percentage * 100).toFixed(0)}%`;
+            this.element.getElementsByClassName('dplayer-volume-bar-wrap')[0].dataset.balloon = formatPercentage;
             if (!nostorage) {
                 this.user.set('volume', percentage);
             }
-            if (!nonotice) {
-                this.notice(`${this.tran('Volume')} ${(percentage * 100).toFixed(0)}%`);
-            }
             this.video.volume = percentage;
             if (this.video.muted) {
                 this.video.muted = false;
@@ -1005,7 +1003,7 @@ class DPlayer {
             });
         }
 
-        this.volume(this.user.get('volume'), true, true);
+        this.volume(this.user.get('volume'), true);
     }
 
     switchQuality (index) {

src/DPlayer.scss

@@ -1,3 +1,5 @@
+@import '../node_modules/balloon-css/balloon.css';
+
 .dplayer {
     position: relative;
     overflow: hidden;
@@ -497,14 +499,19 @@
                 background-color: transparent;
                 outline: none;
                 cursor: pointer;
-                opacity: .8;
-                transition: all .2s ease-in-out;
                 vertical-align: middle;
                 box-sizing: border-box;
                 display: inline-block;
 
+                .dplayer-icon-content {
+                    transition: all .2s ease-in-out;
+                    opacity: .8;
+                }
+
                 &:hover {
-                    opacity: 1;
+                    .dplayer-icon-content {
+                        opacity: 1;
+                    }
                 }
 
                 &.dplayer-quality-icon {
@@ -1263,3 +1270,16 @@
         transform: translate(0, 0) rotate(0deg);
     }
 }
+
+[data-balloon]:before {
+    display: none;
+}
+
+[data-balloon]:after {
+    padding: 0.3em 0.7em;
+    background: rgba(17, 17, 17, 0.7);
+}
+
+[data-balloon][data-balloon-pos="up"]:after {
+    margin-bottom: 0;
+}

src/html.js

@@ -51,13 +51,13 @@ const html = {
         <div class="dplayer-controller">
             <div class="dplayer-icons dplayer-icons-left">
                 <button class="dplayer-icon dplayer-play-icon">
-                    ${svg('play')}
+                    <span class="dplayer-icon-content">${svg('play')}</span>
                 </button>
                 <div class="dplayer-volume">
                     <button class="dplayer-icon dplayer-volume-icon">
-                        ${svg('volume-down')}
+                        <span class="dplayer-icon-content">${svg('volume-down')}</span>
                     </button>
-                    <div class="dplayer-volume-bar-wrap">
+                    <div class="dplayer-volume-bar-wrap" data-balloon-pos="up">
                         <div class="dplayer-volume-bar">
                             <div class="dplayer-volume-bar-inner" style="background: ${option.theme};">
                                 <span class="dplayer-thumb" style="background: ${option.theme}"></span>
@@ -77,17 +77,17 @@ const html = {
                 </div>
                 ` : ``}
                 ${option.screenshot ? `
-                <a href="#" class="dplayer-icon dplayer-camera-icon">
-                    ${svg('camera')}
+                <a href="#" class="dplayer-icon dplayer-camera-icon" data-balloon="${tran('Screenshot')}" data-balloon-pos="up">
+                    <span class="dplayer-icon-content">${svg('camera')}</span>
                 </a>
                 ` : ``}
                 <div class="dplayer-comment">
-                    <button class="dplayer-icon dplayer-comment-icon">
-                        ${svg('comment')}
+                    <button class="dplayer-icon dplayer-comment-icon" data-balloon="${tran('Send danmaku')}" data-balloon-pos="up">
+                        <span class="dplayer-icon-content">${svg('comment')}</span>
                     </button>
                     <div class="dplayer-comment-box">
-                        <button class="dplayer-icon dplayer-comment-setting-icon">
-                            ${svg('menu')}
+                        <button class="dplayer-icon dplayer-comment-setting-icon" data-balloon="${tran('Setting')}" data-balloon-pos="up">
+                            <span class="dplayer-icon-content">${svg('menu')}</span>
                         </button>
                         <div class="dplayer-comment-setting-box">
                             <div class="dplayer-comment-setting-color">
@@ -134,23 +134,23 @@ const html = {
                             </div>
                         </div>
                         <input class="dplayer-comment-input" type="text" placeholder="${tran('Input danmaku, hit Enter')}" maxlength="30">
-                        <button class="dplayer-icon dplayer-send-icon">
-                            ${svg('send')}
+                        <button class="dplayer-icon dplayer-send-icon" data-balloon="${tran('Send')}" data-balloon-pos="up">
+                            <span class="dplayer-icon-content">${svg('send')}</span>
                         </button>
                     </div>
                 </div>
                 <div class="dplayer-setting">
-                    <button class="dplayer-icon dplayer-setting-icon">
-                        ${svg('setting')}
+                    <button class="dplayer-icon dplayer-setting-icon" data-balloon="${tran('Setting')}" data-balloon-pos="up">
+                        <span class="dplayer-icon-content">${svg('setting')}</span>
                     </button>
                     <div class="dplayer-setting-box"></div>
                 </div>
                 <div class="dplayer-full">
-                    <button class="dplayer-icon dplayer-full-in-icon">
-                        ${svg('full-in')}
+                    <button class="dplayer-icon dplayer-full-in-icon" data-balloon="${tran('Web full screen')}" data-balloon-pos="up">
+                        <span class="dplayer-icon-content">${svg('full-in')}</span>
                     </button>
-                    <button class="dplayer-icon dplayer-full-icon">
-                        ${svg('full')}
+                    <button class="dplayer-icon dplayer-full-icon" data-balloon="${tran('Full screen')}" data-balloon-pos="up">
+                        <span class="dplayer-icon-content">${svg('full')}</span>
                     </button>
                 </div>
             </div>

src/i18n.js

@@ -44,7 +44,13 @@ const tranTxt = {
         'quality': '画质',
         'FF to': '快进至',
         'REW to': '快退至',
-        'Unlimited danmaku': '海量弹幕'
+        'Unlimited danmaku': '海量弹幕',
+        'Send danmaku': '发送弹幕',
+        'Setting': '设置',
+        'Full screen': '全屏',
+        'Web full screen': '页面全屏',
+        'Send': '发送',
+        'Screenshot': '截图'
     },
     "zh-tw" : {
         'Danmaku is loading': '彈幕加載中',

yarn.lock

@@ -701,6 +701,10 @@ balanced-match@^0.4.1, balanced-match@^0.4.2:
   version "0.4.2"
   resolved "http://registry.npm.taobao.org/balanced-match/download/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
 
+balloon-css@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.npmjs.org/balloon-css/-/balloon-css-0.5.0.tgz#6a3c065efab9ea5f509a95d4315df00aae114fa3"
+
 base64-js@^1.0.2:
   version "1.2.0"
   resolved "http://registry.npm.taobao.org/base64-js/download/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"