Implement new Read Receipt design (#8389)

* feat: introduce new alignment types for tooltip
* feat: introduce new hook for tooltips
* feat: allow using onFocus callback for RovingAccessibleButton
* feat: allow using custom class for ContextMenu
* feat: allow setting tab index for avatar
* refactor: move read receipts out of event tile
* feat: implement new read receipt design
* feat: update SentReceipt to match new read receipts as well

src/utils/useTooltip.tsx

@@ -0,0 +1,24 @@
+import React, { ComponentProps, useState } from "react";
+
+import Tooltip from "../components/views/elements/Tooltip";
+
+interface TooltipEvents {
+    showTooltip: () => void;
+    hideTooltip: () => void;
+}
+
+export function useTooltip(props: ComponentProps<typeof Tooltip>): [TooltipEvents, JSX.Element | null] {
+    const [isVisible, setIsVisible] = useState(false);
+
+    const showTooltip = () => setIsVisible(true);
+    const hideTooltip = () => setIsVisible(false);
+
+    // No need to fill up the DOM with hidden tooltip elements. Only add the
+    // tooltip when we're hovering over the item (performance)
+    const tooltip = <Tooltip
+        {...props}
+        visible={isVisible}
+    />;
+
+    return [{ showTooltip, hideTooltip }, tooltip];
+}