Add bootstrap tooltip

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
   },
   rules: {
     'class-methods-use-this': 'off',
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
     'no-param-reassign': ['error', { props: false }],
     'prefer-destructuring': ['error', { object: true, array: false }],

assets/chat/css/style.scss

@@ -1,6 +1,7 @@
 @import '../../common';
 @import '../../icons/icons';
 @import '~normalize.css';
+@import '~bootstrap';
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700');
 
 *,

assets/chat/js/chat.js

@@ -2,6 +2,7 @@ import { fetch } from 'whatwg-fetch';
 import $ from 'jquery';
 import { debounce } from 'throttle-debounce';
 import moment from 'moment';
+import { Tooltip } from 'bootstrap';
 import {
   KEYCODES,
   DATE_FORMATS,
@@ -266,6 +267,9 @@ class Chat {
       return link.sheet;
     })();
 
+    const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    tooltipList.forEach((el) => new Tooltip(el));
+
     this.ishidden = (document.visibilityState || 'visible') !== 'visible';
     this.output = this.ui.find('#chat-output-frame');
     this.input = this.ui.find('#chat-input-control');

assets/demo.js

@@ -49,6 +49,7 @@ switch ((Chat.reqParam('t') || 'embed').toUpperCase()) {
 
   case 'EMBED':
   default:
+    html.attr('data-bs-theme', 'dark');
     chat
       .withGui(embedHtml)
       .then(() => chat.loadEmotesAndFlairs())

assets/views/embed.html

@@ -54,7 +54,9 @@
         <a
           id="chat-watching-focus-btn"
           class="chat-tool-btn"
-          title="Watching Focus"
+          title="Highlights messages from users watching the same stream"
+          data-bs-placement="top"
+          data-bs-toggle="tooltip"
         >
           <i class="btn-icon"></i>
         </a>

package.json

@@ -48,6 +48,7 @@
     "@babel/preset-env": "^7.14.2",
     "autoprefixer": "^10.2.5",
     "babel-loader": "^9.1.2",
+    "bootstrap": "^5.3.2",
     "css-loader": "^6.7.3",
     "eslint": "^8.27.0",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -87,4 +88,4 @@
       "prettier -cwu --loglevel silent ."
     ]
   }
-}
+}