diff --git a/src/webparts/summaryWebPart/components/RejectTasks/RejectTasks.module.scss b/src/webparts/summaryWebPart/components/RejectTasks/RejectTasks.module.scss index 425cfb2..6ef8da0 100644 --- a/src/webparts/summaryWebPart/components/RejectTasks/RejectTasks.module.scss +++ b/src/webparts/summaryWebPart/components/RejectTasks/RejectTasks.module.scss @@ -6,7 +6,7 @@ caption-side:bottom; table-layout: fixed; overflow: hidden; - white-space: nowrap; + //white-space: nowrap; thead { tr { th{ @@ -19,7 +19,6 @@ transition: 0.5s; white-space: normal; word-break: break-all; - cursor: pointer; &:hover { background: #f4f4f4; color: #666666; @@ -30,6 +29,7 @@ } .commonTbody { tr { + max-height: calc(14px * 3); td { padding: 6px; border: 1px solid #c8c8c8; @@ -37,7 +37,6 @@ color: #767676; font-size: 13px; transition: 0.5s; - cursor: pointer; &:hover { background: #f4f4f4; color: #666666; diff --git a/src/webparts/summaryWebPart/components/RejectTasks/RejectTasks.tsx b/src/webparts/summaryWebPart/components/RejectTasks/RejectTasks.tsx index edd40cc..aa8f9c8 100644 --- a/src/webparts/summaryWebPart/components/RejectTasks/RejectTasks.tsx +++ b/src/webparts/summaryWebPart/components/RejectTasks/RejectTasks.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { DeviationTasks } from '../../interfaces/IDeviationTasks'; import styles from '../RejectTasks/RejectTasks.module.scss' +import Tooltip from '../Tooltip'; export interface IComponentProps { structureData: DeviationTasks[] @@ -118,6 +119,12 @@ export default class DeviationTaskTable extends React.Component
{value}
+ ) + } + return (
{value}
) @@ -132,7 +139,7 @@ export default class DeviationTaskTable extends React.Component +
{membersValue}
{countValue}
diff --git a/src/webparts/summaryWebPart/components/Tooltip/index.tsx b/src/webparts/summaryWebPart/components/Tooltip/index.tsx new file mode 100644 index 0000000..2e077c2 --- /dev/null +++ b/src/webparts/summaryWebPart/components/Tooltip/index.tsx @@ -0,0 +1,17 @@ +import { Component } from "react"; +import * as React from "react"; +import styles from './styles.module.scss'; + +export default class Tooltip extends Component<{ tooltipText: string }> { + constructor(props) { + super(props); + } + + render() { + return ( +
{this.props.children} + {this.props.tooltipText} +
+ ) + } +} \ No newline at end of file diff --git a/src/webparts/summaryWebPart/components/Tooltip/styles.module.scss b/src/webparts/summaryWebPart/components/Tooltip/styles.module.scss new file mode 100644 index 0000000..df38f9c --- /dev/null +++ b/src/webparts/summaryWebPart/components/Tooltip/styles.module.scss @@ -0,0 +1,46 @@ +/* Tooltip container */ +.tooltip { + position: relative; + display: inline-block; + border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ + } + + /* Tooltip text */ + .tooltip .tooltiptext { + visibility: hidden; + width: 120px; + background-color: #555; + color: #fff; + text-align: center; + padding: 5px 0; + border-radius: 6px; + + /* Position the tooltip text */ + position: absolute; + z-index: 1; + bottom: 125%; + left: 50%; + margin-left: -60px; + + /* Fade in tooltip */ + opacity: 0; + transition: opacity 0.3s; + } + + /* Tooltip arrow */ + .tooltip .tooltiptext::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; + } + + /* Show the tooltip text when you mouse over the tooltip container */ + .tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; + } \ No newline at end of file