Swap bootstrap with tippy

.eslintrc.js

@@ -11,7 +11,6 @@ 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,7 +1,8 @@
 @import '../../common';
 @import '../../icons/icons';
 @import '~normalize.css';
-@import '~bootstrap';
+@import '~tippy.js/dist/tippy.css';
+@import '~tippy.js/dist/svg-arrow.css';
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700');
 
 *,
@@ -2180,3 +2181,13 @@ body.pref-fontscale[data-fontscale='10'] {
   font-family: 'Among Us';
   src: url('../../../fonts/AmongUs-Regular.ttf') format('truetype');
 }
+
+.tippy-box[data-theme~='dgg'] {
+  text-align: center;
+  background-color: white;
+  color: #000;
+}
+
+.tippy-box[data-theme~='dgg'] > .tippy-svg-arrow {
+  fill: white;
+}

assets/chat/js/chat.js

@@ -2,7 +2,7 @@ import { fetch } from 'whatwg-fetch';
 import $ from 'jquery';
 import { debounce } from 'throttle-debounce';
 import moment from 'moment';
-import { Tooltip } from 'bootstrap';
+import tippy, { roundArrow } from 'tippy.js';
 import {
   KEYCODES,
   DATE_FORMATS,
@@ -267,8 +267,15 @@ class Chat {
       return link.sheet;
     })();
 
-    const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-    tooltipList.forEach((el) => new Tooltip(el));
+    // Tooltips
+    tippy('[data-tippy-content]', {
+      arrow: roundArrow,
+      delay: 0,
+      duration: 0,
+      maxWidth: 250,
+      hideOnClick: false,
+      theme: 'dgg',
+    });
 
     this.ishidden = (document.visibilityState || 'visible') !== 'visible';
     this.output = this.ui.find('#chat-output-frame');

assets/demo.js

@@ -49,7 +49,6 @@ 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,9 +54,7 @@
         <a
           id="chat-watching-focus-btn"
           class="chat-tool-btn"
-          title="Highlights messages from users watching the same stream"
-          data-bs-placement="top"
-          data-bs-toggle="tooltip"
+          data-tippy-content="Highlights messages from users watching the same stream"
         >
           <i class="btn-icon"></i>
         </a>

package.json

@@ -40,6 +40,7 @@
     "overlayscrollbars": "^2.0.3",
     "sass-loader": "^13.2.0",
     "throttle-debounce": "~5.0.0",
+    "tippy.js": "^6.3.7",
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
@@ -48,7 +49,6 @@
     "@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",