i have created two teaching bubble , now i want that if user click one of the heading of First Teaching bubble it will open another teaching bubble , below are my teaching bubble code.
import * as React from 'react';
import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
import { ITravelBriefProps } from './ITravelBriefProps';
import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
import { useBoolean } from '@uifabric/react-hooks';
import styles from './TravelBrief.module.scss';
import {
getTheme,
mergeStyleSets,
FontWeights,
ContextualMenu,
Toggle,
//DefaultButton,
Modal,
IDragOptions,
IconButton,
IIconProps,ITeachingBubbleProps, shouldWrapFocus
} from 'office-ui-fabric-react';
import { readyException } from 'jquery';
import { TeachingBubbleBasicNext } from './Teaching copy';
const iconButtonStyles = {
alignItems: 'normal',
root: {
color: '#dd1d21',
marginLeft: 'auto',
marginTop: '2px',
marginRight: '2px',
},
rootHovered: {
color: '#dd1d21',
},
};
const ArrowIcon: IIconProps = { iconName: 'OfficeChat' };
function show()
{
}
const examplePrimaryButtonProps: IButtonProps = {
children: 'Yes',
onClick: function () {
window.open("")
}
}
const constheadline :ITeachingBubbleProps={
headline:""
}
export const TeachingBubbleBasicExample: React.FunctionComponent = () =>{
const (teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }) = useBoolean(false);
const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
() => ({
children: 'Maybe later',
onClick: toggleTeachingBubbleVisible
}),
(toggleTeachingBubbleVisible),
);
return (
<div>
<div> <IconButton
styles={iconButtonStyles}
iconProps={ArrowIcon}
ariaLabel="Close popup modal"
onClick={toggleTeachingBubbleVisible}
id="targetButton"
text={teachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
/> <label className={styles.label} onClick={toggleTeachingBubbleVisible} ></label>
</div>
{/* <DefaultButton
id="targetButton"
onClick={toggleTeachingBubbleVisible}
text={teachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
/> */}
{teachingBubbleVisible && (
<TeachingBubble
target="#targetButton"
// primaryButtonProps={examplePrimaryButtonProps}
// secondaryButtonProps={exampleSecondaryButtonProps}
onDismiss={toggleTeachingBubbleVisible}
>
<ul>
<li className={styles.label}> <a href="#" >get more info</a>. </li>
</ul>
</TeachingBubble>
)}
</div>
);
};
second teaching bubble which should open on click of get more info
import * as React from 'react';
import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
import { ITravelBriefProps } from './ITravelBriefProps';
import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
import { useBoolean } from '@uifabric/react-hooks';
import styles from './TravelBrief.module.scss';
import {
getTheme,
mergeStyleSets,
FontWeights,
ContextualMenu,
Toggle,
//DefaultButton,
Modal,
IDragOptions,
IconButton,
IIconProps,ITeachingBubbleProps
} from 'office-ui-fabric-react';
import { PropertyPaneSlider } from '@microsoft/sp-property-pane';
const iconButtonStyles = {
alignItems: 'normal',
root: {
color: '#dd1d21',
marginLeft: 'auto',
marginTop: '2px',
marginRight: '2px',
},
rootHovered: {
color: '#dd1d21',
},
};
const ArrowIcon: IIconProps = { iconName: 'OfficeChat' };
interface ModernProps {
pdata: number;
}
const examplePrimaryButtonProps: IButtonProps = {
children: 'Yes',
onClick: function () {
location.href = ""
}
}
export const TeachingBubbleBasicNext: React.FunctionComponent <{country:any,rating:any}>= (country,rating)=> {
const (teachingBubbleVisibleNext, { toggle: toggleteachingBubbleVisibleNext }) = useBoolean(false);
const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
() => ({
children: 'Maybe later',
onClick: toggleteachingBubbleVisibleNext,
test:""
}),
(toggleteachingBubbleVisibleNext),
);
return (
<div className={styles.TeachingbubblePositing}>
<div> <IconButton
styles={iconButtonStyles}
iconProps={ArrowIcon}
ariaLabel="Close popup modal"
onClick={toggleteachingBubbleVisibleNext}
id="targetButtonNext"
text={teachingBubbleVisibleNext ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
/> <label className={styles.label} onClick={toggleteachingBubbleVisibleNext} ></label>
</div>
{/* <DefaultButton
id="targetButton"
onClick={toggleteachingBubbleVisibleNext}
text={teachingBubbleVisibleNext ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
/> */}
{teachingBubbleVisibleNext && (
<TeachingBubble
target="#targetButtonNext"
// primaryButtonProps={examplePrimaryButtonProps}
// secondaryButtonProps={exampleSecondaryButtonProps}
onDismiss={toggleteachingBubbleVisibleNext}
>
<ul>
<li className={styles.label}>some text goes here </li>
</ul>
</TeachingBubble>
)}
</div>
);
};
