locked
Clicking on the icon link display as shown in in pic in SPFX react webpart RRS feed

  • Question

  • In my spfx webpart whenever i click the below icon link it should display the data as shown in below pic

    Tuesday, December 17, 2019 10:53 AM

Answers

  • Hi Rajesh,

    The following example code for your reference.

    import * as React from 'react';
    import { DefaultButton, Callout,Icon, DirectionalHint, Link, getTheme, FontWeights, mergeStyleSets, getId } from 'office-ui-fabric-react';
    
    export interface IOfficeUiReactState{
      isCalloutVisible?: boolean; 
    }
    const theme = getTheme();
    const styles = mergeStyleSets({
      IconArea: {
        verticalAlign: 'top',
        display: 'inline-block',
        textAlign: 'center',
        margin: '0 0px'
      },
      callout: {
        maxWidth: 300
      },
      header: {
        padding: '18px 24px 12px'
      },
      title: [
        theme.fonts.xLarge,
        {
          margin: 0,
          color: theme.palette.neutralPrimary,
          fontWeight: FontWeights.semilight
        }
      ],
      inner: {
        height: '100%',
        padding: '0 24px 20px'
      },
      actions: {
        position: 'relative',
        marginTop: 20,
        width: '100%',
        whiteSpace: 'nowrap'
      },
      subtext: [
        theme.fonts.small,
        {
          margin: 0,
          color: theme.palette.neutralPrimary,
          fontWeight: FontWeights.semilight
        }
      ],
      link: [
        theme.fonts.medium,
        {
          color: theme.palette.neutralPrimary
        }
      ]
    });
    export default class OfficeUiReact extends React.Component<{},IOfficeUiReactState> {
      
      public state: IOfficeUiReactState = {
        isCalloutVisible: false
      };
    
      private _menuButtonElement = React.createRef<HTMLDivElement>();
      private _labelId: string = getId('callout-label');
      private _descriptionId: string = getId('callout-description');
    
      public render(): JSX.Element{
        return (
    
          <div>
             <div className={styles.IconArea} ref={this._menuButtonElement}>
              <Icon iconName='Info' onClick={this._onShowMenuClicked}/>
            </div> 
            {this.state.isCalloutVisible && (
              <Callout
                className={styles.callout}
                ariaLabelledBy={this._labelId}
                ariaDescribedBy={this._descriptionId}
                role="alertdialog"
                gapSpace={0}
                directionalHint={DirectionalHint.rightCenter}
                target={this._menuButtonElement.current}
                onDismiss={this._onCalloutDismiss}
                setInitialFocus={true}
              >
                <div className={styles.header}>
                  <p className={styles.title} id={this._labelId}>
                    All of your favorite people
                  </p>
                </div>
                <div className={styles.inner}>
                  <p className={styles.subtext} id={this._descriptionId}>
                    Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.
                  </p>
                  <div className={styles.actions}>
                    <Link className={styles.link} href="http://microsoft.com" target="_blank">
                      Go to microsoft
                    </Link>
                  </div>
                </div>
              </Callout>
            )}
              
           </div>
          
        ); 
      }
      private _onShowMenuClicked = (): void => {
        this.setState({
          isCalloutVisible: !this.state.isCalloutVisible
        });
      };
    
      private _onCalloutDismiss = (): void => {
        this.setState({
          isCalloutVisible: false
        });
      };
    }
    

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by SatyaNK Monday, December 23, 2019 9:18 AM
    Friday, December 20, 2019 9:48 AM

All replies

  • Hi Rajesh,

    If you want to achieve the tooltip feature in SPFx web part, we can use react-simple-tooltip to achieve it.

    Install the plugin using this.

    npm install react-simple-tooltip --save

    And usage like below.

    import Tooltip from "react-simple-tooltip";
     <Tooltip content="test1 \n test2" background="white" color="black" placement={["right"]}>
        <button>Hover me</button>
     </Tooltip>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, December 18, 2019 7:11 AM
  • I am using the below code

    <Icon iconName='Info' />

    and importing from below 

    import { Icon } from 'office-ui-fabric-react/lib/Icon';


    Its not tooltip for me it should be similar to below having fonts bold and email id and some styles



    • Edited by SatyaNK Wednesday, December 18, 2019 8:26 AM
    Wednesday, December 18, 2019 8:13 AM
  • Hi Rajesh,

    Using Office UI fabric Callout to achieve it.

    Office UI fabric Callout in SharePoint Framework (SPFx)

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, December 18, 2019 9:41 AM
  • Ho can i update the below code with call out function.

    <Icon iconName='Info' />

    Friday, December 20, 2019 5:33 AM
  • Hi Rajesh,

    The following example code for your reference.

    import * as React from 'react';
    import { DefaultButton, Callout,Icon, DirectionalHint, Link, getTheme, FontWeights, mergeStyleSets, getId } from 'office-ui-fabric-react';
    
    export interface IOfficeUiReactState{
      isCalloutVisible?: boolean; 
    }
    const theme = getTheme();
    const styles = mergeStyleSets({
      IconArea: {
        verticalAlign: 'top',
        display: 'inline-block',
        textAlign: 'center',
        margin: '0 0px'
      },
      callout: {
        maxWidth: 300
      },
      header: {
        padding: '18px 24px 12px'
      },
      title: [
        theme.fonts.xLarge,
        {
          margin: 0,
          color: theme.palette.neutralPrimary,
          fontWeight: FontWeights.semilight
        }
      ],
      inner: {
        height: '100%',
        padding: '0 24px 20px'
      },
      actions: {
        position: 'relative',
        marginTop: 20,
        width: '100%',
        whiteSpace: 'nowrap'
      },
      subtext: [
        theme.fonts.small,
        {
          margin: 0,
          color: theme.palette.neutralPrimary,
          fontWeight: FontWeights.semilight
        }
      ],
      link: [
        theme.fonts.medium,
        {
          color: theme.palette.neutralPrimary
        }
      ]
    });
    export default class OfficeUiReact extends React.Component<{},IOfficeUiReactState> {
      
      public state: IOfficeUiReactState = {
        isCalloutVisible: false
      };
    
      private _menuButtonElement = React.createRef<HTMLDivElement>();
      private _labelId: string = getId('callout-label');
      private _descriptionId: string = getId('callout-description');
    
      public render(): JSX.Element{
        return (
    
          <div>
             <div className={styles.IconArea} ref={this._menuButtonElement}>
              <Icon iconName='Info' onClick={this._onShowMenuClicked}/>
            </div> 
            {this.state.isCalloutVisible && (
              <Callout
                className={styles.callout}
                ariaLabelledBy={this._labelId}
                ariaDescribedBy={this._descriptionId}
                role="alertdialog"
                gapSpace={0}
                directionalHint={DirectionalHint.rightCenter}
                target={this._menuButtonElement.current}
                onDismiss={this._onCalloutDismiss}
                setInitialFocus={true}
              >
                <div className={styles.header}>
                  <p className={styles.title} id={this._labelId}>
                    All of your favorite people
                  </p>
                </div>
                <div className={styles.inner}>
                  <p className={styles.subtext} id={this._descriptionId}>
                    Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.
                  </p>
                  <div className={styles.actions}>
                    <Link className={styles.link} href="http://microsoft.com" target="_blank">
                      Go to microsoft
                    </Link>
                  </div>
                </div>
              </Callout>
            )}
              
           </div>
          
        ); 
      }
      private _onShowMenuClicked = (): void => {
        this.setState({
          isCalloutVisible: !this.state.isCalloutVisible
        });
      };
    
      private _onCalloutDismiss = (): void => {
        this.setState({
          isCalloutVisible: false
        });
      };
    }
    

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by SatyaNK Monday, December 23, 2019 9:18 AM
    Friday, December 20, 2019 9:48 AM
  • Hi Rajesh,

    Any update?

    If my last reply help you, please mark the reply as answer, it will make others who stuck with the similar issue easier to search for valid solutions in this forum.

    Best regards,
    Dennis

    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, December 23, 2019 8:38 AM
  • I just added ur code its working fine. Let me modify as per my requirement and comeback to you shortly
    Monday, December 23, 2019 9:18 AM
  • I have the below icon in more than 10 place and i want to use one callout function and data will be change based on the field name. Something below 

    • Edited by SatyaNK Monday, December 23, 2019 10:03 AM
    Monday, December 23, 2019 9:48 AM
  • Hi Rajesh,

    You can bind the data to callout using state, and change the state in the click method.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, December 24, 2019 9:11 AM
  • Hi Dennis,

    Can you please with some examples.

    Aam i need to write the below code multiple times for all 10 icons or can we reuse the same code and call so that data will change based on the icon

    --------------------------------------------------------------------------------

    <Callout
    className={styles2.callout}
    ariaLabelledBy={this._labelId}
    ariaDescribedBy={this._descriptionId}
    role="alertdialog"
    gapSpace={0}
    directionalHint={DirectionalHint.rightCenter}
    target={this._menuButtonElement.current}
    onDismiss={this._onCalloutDismiss}
    setInitialFocus={true}
    >
    <div className={styles2.header}>
    <p className={styles2.title} id={this._labelId}>
    All of your favorite people
    </p>
    </div>
    <div className={styles2.inner}>
    <p className={styles2.subtext} id={this._descriptionId}>
    Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.
    </p>
    <div className={styles2.actions}>
    <Link className={styles2.link} href="http://microsoft.com" target="_blank">
    Go to microsoft
    </Link>
    </div>
    </div>
    </Callout>

    Tuesday, December 24, 2019 9:21 AM
  • Can you provide how we achieve the dynamic data for mulitple call out.

    How can we fixed the call out place exactly beside the icon if we move the page up and down also?

    Friday, January 10, 2020 6:18 AM
  • Can you please help on the above query or give some references?
    Friday, January 10, 2020 6:19 AM
  • Hi Rajesh,

    The following example code with two callout for your reference.

    import * as React from 'react';
    import { DefaultButton, Callout,Icon, DirectionalHint, Link, getTheme, FontWeights, mergeStyleSets, getId } from 'office-ui-fabric-react';
    
    export interface IOfficeUiReactState{
      isCalloutVisible?: boolean; 
      calloutTitle:string;
      calloutContent:string;
      calloutLink:string;
    }
    const theme = getTheme();
    const styles = mergeStyleSets({
      IconArea: {
        verticalAlign: 'top',
        display: 'inline-block',
        textAlign: 'center',
        margin: '0 0px'
      },
      callout: {
        maxWidth: 300
      },
      header: {
        padding: '18px 24px 12px'
      },
      title: [
        theme.fonts.xLarge,
        {
          margin: 0,
          color: theme.palette.neutralPrimary,
          fontWeight: FontWeights.semilight
        }
      ],
      inner: {
        height: '100%',
        padding: '0 24px 20px'
      },
      actions: {
        position: 'relative',
        marginTop: 20,
        width: '100%',
        whiteSpace: 'nowrap'
      },
      subtext: [
        theme.fonts.small,
        {
          margin: 0,
          color: theme.palette.neutralPrimary,
          fontWeight: FontWeights.semilight
        }
      ],
      link: [
        theme.fonts.medium,
        {
          color: theme.palette.neutralPrimary
        }
      ]
    });
    export default class OfficeUiReact extends React.Component<{},IOfficeUiReactState> {
      public state: IOfficeUiReactState = {
        isCalloutVisible: false,
        calloutTitle:"",
        calloutContent:"",
        calloutLink:""
      };
      private _menuButtonElement: HTMLElement | null;
      private _labelId: string = getId('callout-label');
      private _descriptionId: string = getId('callout-description');
    
      public render(): JSX.Element{
        return (
          <div>
             <div id="icon1" className={styles.IconArea} ref={menuButton => (this._menuButtonElement = menuButton)}>
              <Icon  iconName='Info' onClick={e => this._onShowMenuClicked(e.currentTarget.title)} title="icon1"/>
            </div> 
            <br/> <br/> <br/>
            <div id="icon2" className={styles.IconArea} ref={menuButton => (this._menuButtonElement = menuButton)}>
              <Icon  iconName='Info' onClick={e => this._onShowMenuClicked(e.currentTarget.title)} title="icon2"/>
            </div>
            {this.state.isCalloutVisible && (
              <Callout
                className={styles.callout}
                ariaLabelledBy={this._labelId}
                ariaDescribedBy={this._descriptionId}
                role="alertdialog"
                gapSpace={0}
                directionalHint={DirectionalHint.rightCenter}
                target={this._menuButtonElement}
                onDismiss={this._onCalloutDismiss}
                setInitialFocus={true}
              >
                <div className={styles.header}>
                  <p className={styles.title} id={this._labelId}>
                    {this.state.calloutTitle}
                  </p>
                </div>
                <div className={styles.inner}>
                  <p className={styles.subtext} id={this._descriptionId}>
                    {this.state.calloutContent}
                  </p>
                  <div className={styles.actions}>         
                    <div dangerouslySetInnerHTML={{__html: this.state.calloutLink}} />
                  </div>
                </div>
              </Callout>
            )}          
           </div>
          
        ); 
      }
      private _onShowMenuClicked= (title:any): void =>{
        this._menuButtonElement=document.getElementById(title);
        if(title=="icon1"){
          this.setState({
            isCalloutVisible: !this.state.isCalloutVisible,
            calloutTitle:"My CallOut 1",
            calloutContent:"My CallOut Content 1",
            calloutLink:"<a href='http://bing.com'>Go to Bing1</a>",
          });
        }     
        if(title=="icon2"){
          this.setState({
            isCalloutVisible: !this.state.isCalloutVisible,
            calloutTitle:"My CallOut 2",
            calloutContent:"My CallOut Content 2",
            calloutLink:"<a href='http://microsoft.com'>Go to microsoft</a>"
          });
        }
      };
    
      private _onCalloutDismiss = (): void => {
        this.setState({
          isCalloutVisible: false
        });
      };
    }
    

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, January 10, 2020 9:07 AM
  • Thanks Dennis For your response.

    Is the CallOut pop up is always beside the icon if i move page up and click icon if i page move down and click icon?

    Friday, January 10, 2020 10:01 AM
  • Hi Dennis,

    Thanks for your response.

    I added the 2 icons but whenever i click Icon1 initially callout showing near to Icon1 then later its moving to Icon2 place as shown in the below picture.

    Friday, January 10, 2020 11:04 AM
  • Any update on the below one?
    Monday, January 20, 2020 6:42 AM