Instead of P i want h2 tag, what is the solution for that

[DileepA-123]

import { TeachingBubble } from "@fluentui/react";
import { useClassNames } from "Components/Common/Tutorials/TutorialsContextStyle";
import { useFeatureFlagContext } from "Components/Contexts/FeatureFlagContext";
import { DEFAULT_ARIA_LIVE } from "Constants/A11y";
import { ILoggingContext } from "Constants/Logging";
import { STOP_TUTORIAL_BUTTON_CLICK } from "Constants/LoggingEventNames";
import { getTutorialCampaigns } from "Constants/TutorialCampaigns";
import { ITutorialsContext, Tutorial, TutorialIds } from "Constants/Tutorials";
import { SMOOTH_SCROLLING } from "Constants/UIConstants";
import i18next from "i18next";
import * as React from "react";
import { useLocation } from "react-router-dom";
import AppLogger from "Services/AppLogger";

const DefaultTutorialsContext: ITutorialsContext = {
setTutorialElement: () => undefined,
startTutorial: () => undefined,
stopTutorial: () => undefined
};

const TutorialsContext = React.createContext(DefaultTutorialsContext);

const findScrollContainer = (element?: HTMLElement): HTMLElement => {
if (!element || !element.parentElement) {
return document.body;
}

const { parentElement } = element;

if (parentElement.scrollHeight > parentElement.clientHeight) {
    return parentElement;
}

return findScrollContainer(parentElement);

};

export const useTutorials = (): ITutorialsContext => React.useContext(TutorialsContext);

export const TutorialsProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
const location = useLocation();
const featureFlags = useFeatureFlagContext();
const styles = useClassNames();
const [tutorials, setTutorials] = React.useState<Record<TutorialIds, Tutorial>>(getTutorialCampaigns(featureFlags));
const [currentStep, setCurrentStep] = React.useState(0);
const [currentTutorial, setCurrentTutorial] = React.useState<TutorialIds | null>(null);
const [stepsInViewport, setStepsInViewport] = React.useState<Record<number, boolean>>({});
const isScrollingDisabled = React.useMemo(
() => tutorials[currentTutorial]?.disableScrolling,
[tutorials, currentTutorial]
);
const isStepsInViewportDisabled = React.useMemo(
() => tutorials[currentTutorial]?.disableStepsInViewport,
[tutorials, currentTutorial]
);
const visibleTutorial: Tutorial = React.useMemo(
() =>
Object.fromEntries(
Object.entries(tutorials[currentTutorial] || {})
.filter(([, { elementRef }]) => Boolean(elementRef))
.map(([, step], index) => [index, step])
),
[currentTutorial, tutorials]
);
/* With the use of feature flags to hide some tutorial steps, the viewport steps
may no longer be in increments of one (ex. 0, 2, 3, 4 -> step 1 is not flighted).
This lookup table will serve as a mapping from the current step to the actual
next/previous viewport tutorial step that is available. Index in the lookup
table will equal the current step of the tutorial.
*/
const currentStepToViewPortStepLookup: number[] = React.useMemo(() => {
const lookup = Object.keys(tutorials[currentTutorial] || {})
.filter((key) => !Number.isNaN(key))
.map((key) => parseInt(key, 10));

    return lookup;
}, [currentTutorial, tutorials]);
const [currentTarget, setCurrentTarget] = React.useState<DOMRect>();
const visibleStep = visibleTutorial[currentStep];
const currentStepCount = React.useMemo(() => Object.keys(visibleTutorial).length, [visibleTutorial]);
const changeStep = React.useCallback(
    (stepChange: number) =>
        setCurrentStep((currentCurrentStep) => {
            const newStep = currentCurrentStep + stepChange;
            AppLogger.logClick({
                eventName: stepChange > 0 ? "NextTutorialButtonClick" : "PreviousTutorialButtonClick",
                context: visibleTutorial[currentCurrentStep].loggingContext,
                message: `From ${currentCurrentStep} to ${newStep}`
            });
            if (!isScrollingDisabled) {
                visibleTutorial[newStep]?.elementRef?.current?.scrollIntoView({ behavior: SMOOTH_SCROLLING });
            }
            return newStep;
        }),
    [visibleTutorial, isScrollingDisabled]
);
const startTutorial = React.useCallback((id: TutorialIds) => {
    setCurrentStep(0);
    setCurrentTutorial(id);
    setCurrentTarget(undefined);
}, []);
const stopTutorial = React.useCallback(() => setCurrentTutorial(null), []);
const nextButtonProps = React.useMemo(() => {
    const isLastStep = currentStep === currentStepCount - 1;

    return {
        children: (
            <div className={styles.secondaryButtonText}>
                {isLastStep ? i18next.t("Generic.Done") : i18next.t("Generic.Next")}
            </div>
        ),
        onClick: isLastStep ? stopTutorial : () => changeStep(1)
    };
}, [changeStep, currentStep, currentStepCount, stopTutorial]);
const previousButtonProps = React.useMemo(
    () => ({
        children: i18next.t("Generic.Previous"),
        onClick: () => changeStep(-1)
    }),
    [changeStep]
);
const setTutorialElement = React.useCallback(
    (
        id: TutorialIds,
        step: number,
        elementRef: React.MutableRefObject<HTMLDivElement>,
        loggingContext: ILoggingContext
    ) =>
        setTutorials((currentTutorials) => {
            const tutorialStep = currentTutorials[id]?.[step];
            if (tutorialStep) {
                if (tutorialStep.elementRef !== elementRef && !!elementRef?.current) {
                    new IntersectionObserver(([{ intersectionRatio }]) =>
                        setStepsInViewport((currentStepsInViewport) => ({
                            ...currentStepsInViewport,
                            [step]: intersectionRatio > 0
                        }))
                    ).observe(elementRef.current);

                    tutorialStep.elementRef = elementRef;
                }
                tutorialStep.loggingContext = loggingContext;
            }

            return { ...currentTutorials };
        }),
    []
);

React.useEffect(() => {
    stopTutorial();
}, [location, stopTutorial]);

React.useEffect(() => {
    const scrollHandler = () => setCurrentTarget(visibleStep?.elementRef?.current?.getBoundingClientRect());
    const scrollContainer = findScrollContainer(visibleStep?.elementRef?.current);

    scrollContainer.addEventListener("scroll", scrollHandler);

    return () => scrollContainer.removeEventListener("scroll", scrollHandler);
}, [visibleStep?.elementRef]);

return (
    <TutorialsContext.Provider value={{ setTutorialElement, startTutorial, stopTutorial }}>
        {visibleStep && (
            <TeachingBubble
                calloutProps={{
                    "aria-live": DEFAULT_ARIA_LIVE,
                    hidden: isStepsInViewportDisabled
                        ? !isStepsInViewportDisabled
                        : !stepsInViewport[currentStepToViewPortStepLookup[currentStep]],
                    preventDismissOnScroll: true
                }}
                closeButtonAriaLabel={i18next.t("Generic.Close")}
                focusTrapZoneProps={{
                    enableAriaHiddenSiblings: true
                }}
                footerContent={
                    currentStepCount > 1
                        ? i18next.t("Generic.StepNavInfo", {
                              stepPosition: currentStep + 1,
                              stepCount: currentStepCount
                          })
                        : null
                }
                header ={visibleStep.title}
                onDismiss={() => {
                    stopTutorial();
                    AppLogger.logClick({
                        eventName: STOP_TUTORIAL_BUTTON_CLICK,
                        context: visibleTutorial[currentStep].loggingContext,
                        message: `Closing a ${currentStep}`
                    });
                }}
                primaryButtonProps={currentStep > 0 ? previousButtonProps : undefined}
                secondaryButtonProps={nextButtonProps}
                styles={{
                    primaryButton: styles.primaryButton,
                    secondaryButton: styles.secondaryButton,
                    body: styles.body
                }}
                target={visibleStep.elementRef?.current || currentTarget}
                hasCloseButton
            >
                {visibleStep.text}
            </TeachingBubble>
        )}
        {children}
    </TutorialsContext.Provider>
);

};

in header ={visibleStep.title} i am passing totle in output it is coming as P i want h2

[Yiosko]

You're encountering this issue because the TeachingBubble component from Fluent UI renders the header text using a default tag <p>, not an <h2>. To customize the HTML tag used for the header, Fluent UI unfortunately does not provide a built-in prop like headerAs for TeachingBubble (unlike some other components like Text or MessageBar).

However, you can work around this by not using the header prop, and instead putting your custom header content directly inside the TeachingBubble children like this:

<TeachingBubble
    calloutProps={{
        "aria-live": DEFAULT_ARIA_LIVE,
        hidden: isStepsInViewportDisabled
            ? !isStepsInViewportDisabled
            : !stepsInViewport[currentStepToViewPortStepLookup[currentStep]],
        preventDismissOnScroll: true
    }}
    closeButtonAriaLabel={i18next.t("Generic.Close")}
    focusTrapZoneProps={{
        enableAriaHiddenSiblings: true
    }}
    footerContent={
        currentStepCount > 1
            ? i18next.t("Generic.StepNavInfo", {
                stepPosition: currentStep + 1,
                stepCount: currentStepCount
              })
            : null
    }
    onDismiss={() => {
        stopTutorial();
        AppLogger.logClick({
            eventName: STOP_TUTORIAL_BUTTON_CLICK,
            context: visibleTutorial[currentStep].loggingContext,
            message: `Closing a ${currentStep}`
        });
    }}
    primaryButtonProps={currentStep > 0 ? previousButtonProps : undefined}
    secondaryButtonProps={nextButtonProps}
    styles={{
        primaryButton: styles.primaryButton,
        secondaryButton: styles.secondaryButton,
        body: styles.body
    }}
    target={visibleStep.elementRef?.current || currentTarget}
    hasCloseButton
>
    {/* 👇 Custom header as <h2> */}
    <h2 className={styles.header}>{visibleStep.title}</h2>

    {/* Body content */}
    {visibleStep.text}
</TeachingBubble>

Make sure styles.header is defined in your useClassNames or however you're managing styles, so it matches the visual design (font size, weight, margins, etc.) Fluent UI expects.

If you need help matching Fluent UI's default TeachingBubble header style, let me know, and I can help you write a matching CSS class.