Fluent UI Teaching Bubble in SPFx

This article demonstrates how to implement the Fluent UI Teaching Bubble in the SharePoint Framework (SPFx).
The Teaching Bubble is a guided UI element used to draw user attention to specific parts of a page. It’s ideal for onboarding tours, feature discovery, or step-by-step assistance.

⚙️ Install Required Dependencies

Run the following command to install Fluent UI:

npm install office-ui-fabric-react --save

🧩 Implement Fluent UI Teaching Bubble

Below is the full code for implementing multiple Teaching Bubbles in sequence with “Don’t show again” logic stored in localStorage.

import * as React from 'react';
import { useState } from 'react';
import styles from './SpfxFluentuiTeachingbubble.module.scss';
import { ISpfxFluentuiTeachingbubbleProps } from './ISpfxFluentuiTeachingbubbleProps';
import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';

function SpfxFluentuiTeachingbubble(props: ISpfxFluentuiTeachingbubbleProps) {
  const localvalue = localStorage.getItem('694bd607-18b6-4c53-b085-fdc985c8963e');
  const [bubble1, setBubble1] = useState(localvalue === 'done' ? false : true);
  const [bubble2, setBubble2] = useState(false);
  const [bubble3, setBubble3] = useState(false);

  const options: IChoiceGroupOption[] = [
    { key: 'day', text: 'Day', iconProps: { iconName: 'CalendarDay' } },
    { key: 'week', text: 'Week', iconProps: { iconName: 'CalendarWeek' } },
    { key: 'month', text: 'Month', iconProps: { iconName: 'Calendar' }, disabled: true },
  ];

  const options2: IChoiceGroupOption[] = [
    {
      key: 'bar',
      imageAlt: 'Bar chart icon',
      text: 'Clustered bar chart',
      iconProps: { iconName: 'StackedColumnChart2Fill' }
    },
    {
      key: 'pie',
      iconProps: { iconName: 'PieDouble' },
      imageSize: { width: 32, height: 32 },
      text: 'Pie chart'
    },
  ];

  const dontshowmeagain = () => {
    localStorage.setItem('694bd607-18b6-4c53-b085-fdc985c8963e', 'done');
  };

  const bubble1Next: IButtonProps = React.useMemo(() => ({
    children: 'Next',
    onClick: () => { setBubble2(true); setBubble1(false); }
  }), [setBubble2, setBubble1]);

  const bubble1Close: IButtonProps = React.useMemo(() => ({
    children: 'Close',
    onClick: () => { setBubble1(false); dontshowmeagain(); }
  }), [setBubble1, dontshowmeagain]);

  const bubble2Previous: IButtonProps = React.useMemo(() => ({
    children: 'Previous',
    onClick: () => { setBubble1(true); setBubble2(false); }
  }), [setBubble2, setBubble1]);

  const bubble2Next: IButtonProps = React.useMemo(() => ({
    children: 'Next',
    onClick: () => { setBubble2(false); setBubble3(true); }
  }), [setBubble2, setBubble3]);

  const bubble3Previous: IButtonProps = React.useMemo(() => ({
    children: 'Previous',
    onClick: () => { setBubble2(true); setBubble3(false); }
  }), [setBubble2, setBubble3]);

  const bubble3Close: IButtonProps = React.useMemo(() => ({
    children: 'Close',
    onClick: () => { setBubble3(false); dontshowmeagain(); }
  }), [setBubble3, dontshowmeagain]);

  return (
    <div className={styles.spfxFluentuiTeachingbubble}>
      <DefaultButton id={'targetButton'} href="http://bing.com" target="_blank" title="Let us bing!">
        Bing
      </DefaultButton>
      <br />
      <ChoiceGroup id={'targetChoice'} label="Pick one icon" defaultSelectedKey="day" options={options} />
      <br />
      <ChoiceGroup id={'targetChoice2'} label="Pick one image" defaultSelectedKey="bar" options={options2} />

      {bubble1 && (
        <TeachingBubble
          target="#targetButton"
          primaryButtonProps={bubble1Next}
          secondaryButtonProps={bubble1Close}
          footerContent="1 of 3"
          headline="Discover what’s trending around you">
          Learn more about this feature using the Teaching Bubble guidance step.
        </TeachingBubble>
      )}
      {bubble2 && (
        <TeachingBubble
          target="#targetChoice"
          primaryButtonProps={bubble2Next}
          secondaryButtonProps={bubble2Previous}
          footerContent="2 of 3"
          headline="Explore available icons">
          Easily switch between calendar views using these options.
        </TeachingBubble>
      )}
      {bubble3 && (
        <TeachingBubble
          target="#targetChoice2"
          primaryButtonProps={bubble3Close}
          secondaryButtonProps={bubble3Previous}
          footerContent="3 of 3"
          headline="Pick your preferred visualization">
          Choose between bar and pie charts for data presentation.
        </TeachingBubble>
      )}
    </div>
  );
}

export default SpfxFluentuiTeachingbubble;

🧠 How It Works

Each TeachingBubble is attached to a different UI element (targetButton, targetChoice, etc.).
The Next/Previous buttons navigate between steps.
The Don’t show again option saves a flag in localStorage to prevent repeated display.

🚀 Build and Deploy

Run the following commands to build and package your web part:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file from the sharepoint/solution folder to your App Catalog, then add the web part to a SharePoint page.

📂 GitHub Sample Project

View full SPFx project on GitHub:Fluent UI Teaching Bubble in SPFx

GitHub

✅ Summary

The Fluent UI Teaching Bubble is a powerful UX tool for user onboarding and feature walkthroughs in SharePoint.
By chaining multiple bubbles together, you can create interactive tutorials and help users discover new features seamlessly.