Post
Ask Question

React Tooltip In SPFX📣

Introduction

 
The react-portal-tooltip is a plugin written in React.js to initialize the React Tooltip component in React forms.
 
Open a command prompt. Create a directory for the SPFx solution.
 
md spfx-ReactTooltip
 
Navigate to the above-created directory.
 
cd  spfx-ReactTooltip
 
Run the Yeoman SharePoint Generator to create the solution.
 
yo @microsoft/sharepoint
 
Solution Name
 
Hit Enter to have the default name (spfx-ReactTooltipthis case) or type in any other name for your solution.
Selected choice - Hit Enter
 
Target for the component
 
Here, we can select the target environment where we are planning to deploy the client web part; i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).
Selected choice - SharePoint Online only (latest).
 
Place of files
 
We may choose to use the same folder or create a subfolder for our solution.
Selected choice - same folder.
 
Deployment option
 
Selecting Y will allow the app to be deployed instantly to all sites and be accessible everywhere.
Selected choice - N (install on each site explicitly).
 
Permissions to access web APIs
 
Choose if the components in the solution require permission to access web APIs that are unique and not shared with other components in the tenant.
Selected choice - N (solution contains unique permissions).
 
Type of client-side component to create
 
We can choose to create a client-side web part or an extension. Choose the web part option.
Selected choice - WebPart
 
Web part name
 
Hit Enter to select the default name or type in any other name.
Selected choice - ReactToolTip
 
Web part description
 
Hit Enter to select the default description or type in any other value.
 
Framework to use
 
Select any JavaScript framework to develop the component. Available choices are - No JavaScript Framework, React, and Knockout.
Selected choice - React
 
The Yeoman generator will perform a scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.
 
Once the scaffolding process is completed, lock down the version of project dependencies by running the below command,
 
npm shrinkwrap
 
In the command prompt, type the below command to open the solution in the code editor of your choice.
 
NPM Packages used,
  1. npm i react-portal-tooltip  
Necessary imports,
  1. import ToolTip, {StatefulToolTip }from 'react-portal-tooltip';  
We can initialize Tooltip in two ways
  1. stateful component
  2. stateless component
Stateful Component using ID
  1. <p id="mytext" onMouseEnter={this.showTooltip.bind(this)} onMouseLeave={this.hideTooltip.bind(this)}>With ID</p>  
  2.   
  3. <ToolTip active={true} position="bottom" arrow="center" parent="#mytext">    
  4.                     <div>    
  5.                         <p>This is My C# aCCOUNT</p>    
  6.                         <img src="https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/AuthorImage/72e1f720170620060203.jpg"/>    
  7.                     </div>    
  8.                 </ToolTip>   
The above Intialization shows the Tooltip by using the parent id (The element id where we need to show tooltip and parent id of tooltip must be the same; i.e. stateful.)
 
Stateful Component using  Ref
  1.   private  mytooltip = React.createRef<HTMLParagraphElement>();            
  2.  <p ref={this.mytooltip} onMouseEnter={this.showTooltip2} onMouseLeave={this.hideTooltip2}>  
  3.     Hover me!!!  
  4. </p>  
  5. <ToolTip active={true} position="top" arrow="center" parent={this.mytooltip.current}>  
  6.     <div>  
  7.         <p>My Content</p>  
  8.     </div>  
  9. </ToolTip>  
The above intialization shows the Tooltip by using the parent Ref(stateful).
 
Stateless component 
  1. const buttonStateful = <span className="btn btn-default">Hover me Stateful</span>;   
  2.  <StatefulToolTip parent={ buttonStateful } position="right" arrow="center" className="stateful-button">Stateful Tooltip here!</StatefulToolTip>  
  3.                   
  4.       </div>  
The above Intialization shows the Tooltip by using stateless component.
 
We can style the tooltip by custom css.
  1. let mystyle = {  
  2.   style: {  
  3.     background: 'rgba(0,0,0,.8)',  
  4.     padding: 20,  
  5.     boxShadow: '5px 5px 3px rgba(0,0,0,.5)'  
  6.   },  
  7.   arrowStyle: {  
  8.     color: 'rgba(0,0,0,.8)',  
  9.     borderColor: false  
  10.   }  
  11. };  
  12.   
  13. <p id="mytext1" onMouseEnter={this.showTooltip3} onMouseLeave={this.hideTooltip3}>With Ref Element</p>  
  14.                 <ToolTip active={this.state.is3rdTooltipActive} position="bottom" arrow="center" parent="#mytext1" style={mystyle}>  
  15.                     <div>  
  16.                         <p>This my c# Corner Account with styled component</p>  
  17.                         <img src="https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/AuthorImage/72e1f720170620060203.jpg"/>  
  18.                     </div>  
  19.                 </ToolTip>  
 Full Code
  1. import * as React from 'react';  
  2. import { IReactToolTipProps } from './IReactToolTipProps';  
  3. export interface ITooltipState {        
  4.   is1stTooltipActive?:boolean;      
  5.   is2ndTooltipActive?:boolean;   
  6.   is3rdTooltipActive?:boolean;  
  7. }   
  8. let mystyle = {  
  9.   style: {  
  10.     background: 'rgba(0,0,0,.8)',  
  11.     padding: 20,  
  12.     boxShadow: '5px 5px 3px rgba(0,0,0,.5)'  
  13.   },  
  14.   arrowStyle: {  
  15.     color: 'rgba(0,0,0,.8)',  
  16.     borderColor: false  
  17.   }  
  18. };  
  19. import ToolTip, {StatefulToolTip }from 'react-portal-tooltip';  
  20. export default class ReactToolTip extends React.Component<IReactToolTipProps,ITooltipState> {  
  21.   private  mytooltip = React.createRef<HTMLParagraphElement>();   
  22.   constructor(props) {    
  23.     super(props);    
  24.     this.state = {  
  25.       is1stTooltipActive: false,  
  26.       is2ndTooltipActive:false,  
  27.       is3rdTooltipActive:false  
  28.     };    
  29.     this.showTooltip = this.showTooltip.bind(this);   
  30.     this.hideTooltip = this.hideTooltip.bind(this);   
  31.     this.showTooltip2 = this.showTooltip2.bind(this);   
  32.     this.hideTooltip2 = this.hideTooltip2.bind(this);   
  33.     this.showTooltip3 = this.showTooltip3.bind(this);   
  34.     this.hideTooltip3 = this.hideTooltip3.bind(this);   
  35.     
  36.   }   
  37.   private showTooltip() {  
  38.     this.setState({is1stTooltipActive: true});  
  39. }  
  40. private hideTooltip() {  
  41.     this.setState({is1stTooltipActive: false});  
  42. }  
  43. private showTooltip2() {  
  44.   this.setState({is2ndTooltipActive:true});  
  45. }  
  46. private hideTooltip2() {  
  47.   this.setState({is2ndTooltipActive:false});  
  48. }  
  49. private showTooltip3() {  
  50.   this.setState({is3rdTooltipActive:true});  
  51. }  
  52. private hideTooltip3() {  
  53.   this.setState({is3rdTooltipActive:false});  
  54. }  
  55.   public render(): React.ReactElement<IReactToolTipProps> {  
  56.     const mymsg = <span>Hover me to display the tooltip</span>;  
  57.     const buttonStateful = <span className="btn btn-default">Hover me Stateful</span>;  
  58.     return (  
  59.       <div >  
  60.       <p id="mytext" onMouseEnter={this.showTooltip.bind(this)} onMouseLeave={this.hideTooltip.bind(this)}>With ID</p>  
  61.                 <ToolTip active={this.state.is1stTooltipActive} position="bottom" arrow="center" parent="#mytext">  
  62.                     <div>  
  63.                         <p>This is My C# aCCOUNT</p>  
  64.                         <img src="https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/AuthorImage/72e1f720170620060203.jpg"/>  
  65.                     </div>  
  66.                 </ToolTip>  
  67.                 <p ref={this.mytooltip} onMouseEnter={this.showTooltip2} onMouseLeave={this.hideTooltip2}>  
  68.     Hover me!!!  
  69. </p>  
  70. <ToolTip active={this.state.is2ndTooltipActive} position="top" arrow="center" parent={this.mytooltip.current}>  
  71.     <div>  
  72.         <p>My Content</p>  
  73.     </div>  
  74. </ToolTip>  
  75.             
  76. <p id="mytext1" onMouseEnter={this.showTooltip3} onMouseLeave={this.hideTooltip3}>With Ref Element</p>  
  77.                 <ToolTip active={this.state.is3rdTooltipActive} position="bottom" arrow="center" parent="#mytext1" style={mystyle}>  
  78.                     <div>  
  79.                         <p>This my c# Corner Account with styled component</p>  
  80.                         <img src="https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/AuthorImage/72e1f720170620060203.jpg"/>  
  81.                     </div>  
  82.                 </ToolTip>  
  83.   
  84.                 <StatefulToolTip parent={ mymsg } >  
  85.     Stateful Tooltip content here!  
  86.   </StatefulToolTip>  
  87.   <br></br><br></br>  
  88.   <StatefulToolTip parent={ buttonStateful } position="right" arrow="center" className="stateful-button">Stateful Tooltip here!</StatefulToolTip>  
  89.                   
  90.       </div>  
  91.     );  
  92.   }  
  93. }  
 Important Properties
  • active- boolean, the tooltip will be visible if true
  • position- top, right, bottom or left. Default to right
  • arrow- center, right, left, top or bottom (depending on the position prop). No arrow when the prop is not sepecified
  • align- the alignment of the whole tooltip relative to the parent element. possible values : center, right, left. Default to center.
  • tooltipTimeout- timeout for the tooltip fade out in milliseconds. Default to 500
  • parent- the tooltip will be placed next to this element. Can be the id of the parent or the ref (see example below)
  • group- string, necessary if you want several independent tooltips
  • style- object, allows customizing the tooltip. Check out the example for details.
  • useHover -bool, default to true. If true, the tooltip will stay visible when hovered.
Output
 
With no style:
 
React Tooltip In SPFX 
 
With custom style:
 
React Tooltip In SPFX 
 
With arrow:
 
React Tooltip In SPFX 
 
Without arrow:
 
React Tooltip In SPFX
 

Conclusion

 
Here we learned about initializing React Tooltip component in Spfx forms using react-portal-tooltip plugin. I hope this helps someone. Happy coding :)


Similar Articles