From 541ce55670d2677d6e4bc8919db4d61eb1a06dec Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Wed, 5 Aug 2020 15:48:36 +0200
Subject: [PATCH] Explore: Update tooltips for live tailing buttons (#26799)

* Update tooltips

* Update wordiing
---
 .../app/features/explore/LiveTailButton.tsx   | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/public/app/features/explore/LiveTailButton.tsx b/public/app/features/explore/LiveTailButton.tsx
index 397b7a0e722..47907e0070a 100644
--- a/public/app/features/explore/LiveTailButton.tsx
+++ b/public/app/features/explore/LiveTailButton.tsx
@@ -98,10 +98,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
   };
 });
 
-const defaultLiveTooltip = () => {
-  return <>Live</>;
-};
-
 type LiveTailButtonProps = {
   splitted: boolean;
   start: () => void;
@@ -120,7 +116,7 @@ export function LiveTailButton(props: LiveTailButtonProps) {
 
   return (
     <>
-      <Tooltip content={defaultLiveTooltip} placement="bottom">
+      <Tooltip content={isLive ? <>Pause the live stream</> : <>Live stream your logs</>} placement="bottom">
         <ResponsiveButton
           splitted={splitted}
           buttonClassName={classNames('btn navbar-button', styles.liveButton, {
@@ -147,12 +143,14 @@ export function LiveTailButton(props: LiveTailButtonProps) {
         }}
       >
         <div>
-          <button
-            className={`btn navbar-button navbar-button--attached explore-active-button ${styles.isLive}`}
-            onClick={stop}
-          >
-            <Icon className="icon-brand-gradient" name="square-shape" size="lg" type="mono" />
-          </button>
+          <Tooltip content={<>Stop and exit the live stream</>} placement="bottom">
+            <button
+              className={`btn navbar-button navbar-button--attached explore-active-button ${styles.isLive}`}
+              onClick={stop}
+            >
+              <Icon className="icon-brand-gradient" name="square-shape" size="lg" type="mono" />
+            </button>
+          </Tooltip>
         </div>
       </CSSTransition>
     </>