Explore: Update tooltips for live tailing buttons (#26799)

* Update tooltips

* Update wordiing

public/app/features/explore/LiveTailButton.tsx

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