Headline for teaching Bubble

Question

Trying to show HTML data to teaching bubble headline but getting below error.

Any idea how can I resolve it?

Answer 1

The headline attribute in TeachingBubble component needs a string value.

As a workaround,we could add html element in the content part.

Test code:

{teachingBubbleVisible && (
        <TeachingBubble
          target="#targetButton"
          primaryButtonProps={examplePrimaryButtonProps}
          secondaryButtonProps={exampleSecondaryButtonProps}
          onDismiss={toggleTeachingBubbleVisible}
          
        >
            <h1>Discover what’s trending around youw</h1>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, nulla, ipsum? Molestiae quis aliquam magni
          harum non?
        </TeachingBubble>
      )}

Answer 2

As per the documentation at ITeachingBubbleProps interface - headline,

headline property expects string value. So you have to pass the string value to headline property of TeachingBubble element.

If want to apply additional styling to headline then you can use:

ITeachingBubbleStyles interface - headline