From 3ce46b917221a3f480d623ffbddebb15213fa503 Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Mon, 13 Dec 2021 09:40:48 -0800
Subject: [PATCH] move custom tool tip to remain permanent next to scroll to
 top button (#23551)

---
 components/ui/ScrollButton/ScrollButton.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/ui/ScrollButton/ScrollButton.tsx b/components/ui/ScrollButton/ScrollButton.tsx
index 612e8859ab5a..7397a438a5ff 100644
--- a/components/ui/ScrollButton/ScrollButton.tsx
+++ b/components/ui/ScrollButton/ScrollButton.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import cx from 'classnames'
 import { ChevronUpIcon } from '@primer/octicons-react'
+import { useTranslation } from '../../hooks/useTranslation'
 
 export type ScrollButtonPropsT = {
   className?: string
@@ -9,6 +10,7 @@ export type ScrollButtonPropsT = {
 
 export const ScrollButton = ({ className, ariaLabel }: ScrollButtonPropsT) => {
   const [show, setShow] = useState(false)
+  const { t } = useTranslation(['scroll_button'])
 
   useEffect(() => {
     // show scroll button only when view is scrolled down
@@ -35,9 +37,13 @@ export const ScrollButton = ({ className, ariaLabel }: ScrollButtonPropsT) => {
     <div className={cx(className, 'transition-200', show ? 'opacity-100' : 'opacity-0')}>
       <button
         onClick={onClick}
-        className={cx(
-          'tooltipped tooltipped-n tooltipped-no-delay color-bg-accent-emphasis color-fg-on-emphasis circle border-0'
-        )}
+        className="color-bg-default color-fg-on-emphasis border-0 d-inline-block mr-2 f6"
+      >
+        {t('scroll_to_top')}
+      </button>
+      <button
+        onClick={onClick}
+        className={cx('color-bg-accent-emphasis color-fg-on-emphasis circle border-0')}
         style={{ width: 40, height: 40 }}
         aria-label={ariaLabel}
       >