#23 tooltip added on question icon (#8)
Opened 2 years ago by divyanshisingh. Modified 2 years ago
fedora-qa/ divyanshisingh/landingpage feature/tooltip  into  master

@@ -0,0 +1,24 @@ 

+ import React, { useState } from "react";

+ import { Tooltip } from "reactstrap";

+ 

+ const TooltipItem = props => {

+   const { placement, id, content, toolTipText } = props;

+   const [tooltipOpen, setTooltipOpen] = useState(false);

+ 

+   const toggle = () => setTooltipOpen(!tooltipOpen);

+ 

+   return (

+     <span>

+         {content}

+       <Tooltip

+         placement={placement}

+         isOpen={tooltipOpen}

+         target={"Tooltip-" + id}

+         toggle={toggle}

+       >

+         {toolTipText}

+       </Tooltip>

+     </span>

+   );

+ };

+ export default TooltipItem; 

\ No newline at end of file

file modified
+11 -4
@@ -1,12 +1,13 @@ 

  import React, { Component } from "react"

  import SourceLink from './SourceLink'

+ import TooltipItem from "../components/TooltipItem";

  

  class Timeline extends Component {

    constructor(props) {

      super(props)

      this.state = { schedule: [] }

    }

- 

+   

    get_title(summary) {

      summary = summary.toLowerCase()

      if (summary.includes("freeze"))
@@ -36,13 +37,19 @@ 

        )

      })

  

-     const schedule = this.props.data.map((milestone) => {

+     const schedule = this.props.data.map((milestone,index) => {

        return (

          <td

            key={"schedule" + milestone.summary}

-           title={this.get_title(milestone.summary)}

            width="150">

-           {milestone.summary} <i className="fas fa-question-circle light"></i>

+           {milestone.summary} 

+           <TooltipItem 

+             key={index} 

+             content={<span id={"Tooltip-" + index}> <i className="fas fa-question-circle light"></i> </span>} 

+             placement="right" 

+             id={index}

+             toolTipText={this.get_title(milestone.summary)}

+           />

          </td>

        )

      })

Created a generalized tooltip component (#8).

Thanks, this is better.

Metadata Update from @lbrabec:
- Pull-request tagged with: review done

2 years ago