src/index.js

@@ -69,7 +69,7 @@ export {
     withErrorMessage,
 } from "./utils/conditionalHOCs";
 export { ErrorMessage } from "./utils/ErrorMessage";
-export { useClickOutside } from "./utils/hooks";
+export { useClickOutside, useTooltip } from "./utils/hooks";
 export { toLocaleDateString } from "./utils/datetime";
 export { displayCard } from "./utils/displayCard";
 export { isPluginInstalled } from "./utils/isPluginInstalled";

src/utils/hooks.js

@@ -5,7 +5,8 @@
  * See /LICENSE for more information.
  */
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
+import { Tooltip } from "bootstrap/dist/js/bootstrap.bundle.min";
 
 /** Execute callback when condition is set to true. */
 export function useConditionalTimeout(
@@ -40,3 +41,22 @@ export function useClickOutside(element, callback) {
         };
     });
 }
+
+/** useTooltip hook for Bootstrap tooltips. */
+export function useTooltip(description, placement = "top", trigger = "hover") {
+    const tooltipRef = useRef();
+
+    useEffect(() => {
+        const tooltip = new Tooltip(tooltipRef.current, {
+            title: description,
+            placement,
+            trigger,
+        });
+
+        return () => {
+            tooltip.dispose();
+        };
+    });
+
+    return tooltipRef;
+}