Display tooltips below (better on smartphones I think)

diff --git a/TODO b/TODO
index a51301d..8dacb29 100644 (file)
--- a/TODO
+++ b/TODO
@@ -1,6 +1,4 @@
 PGN text is not selectable (understand why?!)
-Change cursor when computer "think" (sablier)
-Tooltip text should fade (even when mouse stay on it, especially for small screens)
 Checkered stage 2: switch button at reserve position (or on top).
 Mode expert: game.js, button on top (with online indicator)
 Turn indicator on top too (black or white)

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index e412525..30ed7e0 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -40,6 +40,7 @@ Vue.component('my-game', {
                                        attrs: { "aria-label": 'New game VS human' },
                                        'class': {
                                                "tooltip": true,
+                                               "bottom": true, //display below
                                                "seek": this.seek,
                                                "playing": playingHuman,
                                        },
@@ -51,6 +52,7 @@ Vue.component('my-game', {
                                        attrs: { "aria-label": 'New game VS computer' },
                                        'class': {
                                                "tooltip":true,
+                                               "bottom": true,
                                                "playing": playingComp,
                                        },
                                },
@@ -180,7 +182,10 @@ Vue.component('my-game', {
                                        {
                                                on: { click: this.resign },
                                                attrs: { "aria-label": 'Resign' },
-                                               'class': { "tooltip":true },
+                                               'class': {
+                                                       "tooltip":true,
+                                                       "bottom": true,
+                                               },
                                        },
                                        [h('i', { 'class': { "material-icons": true } }, "flag")])
                        );