Tooltips that appear when hovering over elements in a Fixed Data Table

Question

Tooltips that appear when hovering over elements in a Fixed Data Table

I am looking to incorporate both click and hover events for tooltip content within the cells of the Fixed Data Table component. Currently, I am utilizing react-tippy for tooltips with the use of the html option to create a dropdown menu. While I can display the tooltip, I am facing difficulties in adding additional events for the content inside the tooltips.

The onMouseEnter and onClick events in the .actions-list__item within the ActionCell.jsx are not being triggered.

react-tippy-data-table.firebaseapp.com

https://i.sstatic.net/LhQW2.png

I encountered issues running react-tippy in JSFiddle, hence I deployed an example project on Firebase.

Table.jsx

import React, { Component } from 'react';
// Remaining code from Table.jsx...

ActionCell.jsx

import React from 'react';
// Remaining code from ActionCell.jsx...

javascript css reactjs fixed-data-table

Answer 1

Answer №1

My solution involved incorporating the interactive parameter within the context of the react-tippy

Answer 2

My solution involved incorporating the interactive parameter within the context of the react-tippy

Answer 3

Answer №2

<pre>
    import React from 'react';

    import CustomTooltip from './CustomTooltip';

    interface Props {
        className?: string;
        value?: string;
        colSpan?: number;
    };

    interface State {
        isOverflowing: boolean;
    };

    class CustomTableCell extends React.Component<Props, State> {
        private myRef = React.createRef();
        constructor (props: Props) {
            super(props);
            this.state = {
                isOverflowing: false
            }
        }

        handleHover(event: any) {
            if (event.target.scrollWidth > event.target.offsetWidth) {
                this.setState({isOverflowing: true});
            } else {
                this.setState({isOverflowing: false});
            }
        }

        render () {
            return (
                <td colSpan={this.props.colSpan} className={this.props.className}>
                    <span onMouseEnter={this.handleHover.bind(this)} className="overflow-span">
                        {this.props.value}
                    </span>
                    <CustomTooltip
                        isVisible={this.state.isOverflowing}
                        value={this.props.value}>
                    </CustomTooltip>
                </td>
            );
        }
    };

    export default CustomTableCell;

    // Using the custom tooltip component in another file

    import React from 'react';

    interface Props {
        value?: string;
        isVisible?: boolean;
    };

    interface State {};

    class CustomTooltip extends React.Component<Props, State> {
        render () {
            if (this.props.isVisible) {
                return (
                    <span className="custom-tooltip">
                        {this.props.value}
                    </span>
                );
            }
            return (
                <span>
                </span>
            );
        }
    };

    export default CustomTooltip;

    // Corresponding CSS styles

    .custom-tooltip {
      display: none;
      position: absolute; 
      z-index: 100;
      border: 1px;
      background-color:white;
      border-style: solid;
      border-width: 1px;
      border-color:#0c7c84;
      padding: 5px;
      color:#0c7c84;
      font-size: 16px;
      border-radius: 5px;
      top: -50px;
      left: 50px;
      white-space: pre-line;
      word-break: break-all;
      width:100%;
    }
    
    .overflow-span {
      display: inline-block;
      overflow: hidden;
      width: 90%;
      text-overflow: ellipsis;
    }
    
</pre>

You can utilize the custom tooltip component to display a tooltip on hover, where the tooltip is only visible when the data overflows within the table cell.

Answer 4

<pre>
    import React from 'react';

    import CustomTooltip from './CustomTooltip';

    interface Props {
        className?: string;
        value?: string;
        colSpan?: number;
    };

    interface State {
        isOverflowing: boolean;
    };

    class CustomTableCell extends React.Component<Props, State> {
        private myRef = React.createRef();
        constructor (props: Props) {
            super(props);
            this.state = {
                isOverflowing: false
            }
        }

        handleHover(event: any) {
            if (event.target.scrollWidth > event.target.offsetWidth) {
                this.setState({isOverflowing: true});
            } else {
                this.setState({isOverflowing: false});
            }
        }

        render () {
            return (
                <td colSpan={this.props.colSpan} className={this.props.className}>
                    <span onMouseEnter={this.handleHover.bind(this)} className="overflow-span">
                        {this.props.value}
                    </span>
                    <CustomTooltip
                        isVisible={this.state.isOverflowing}
                        value={this.props.value}>
                    </CustomTooltip>
                </td>
            );
        }
    };

    export default CustomTableCell;

    // Using the custom tooltip component in another file

    import React from 'react';

    interface Props {
        value?: string;
        isVisible?: boolean;
    };

    interface State {};

    class CustomTooltip extends React.Component<Props, State> {
        render () {
            if (this.props.isVisible) {
                return (
                    <span className="custom-tooltip">
                        {this.props.value}
                    </span>
                );
            }
            return (
                <span>
                </span>
            );
        }
    };

    export default CustomTooltip;

    // Corresponding CSS styles

    .custom-tooltip {
      display: none;
      position: absolute; 
      z-index: 100;
      border: 1px;
      background-color:white;
      border-style: solid;
      border-width: 1px;
      border-color:#0c7c84;
      padding: 5px;
      color:#0c7c84;
      font-size: 16px;
      border-radius: 5px;
      top: -50px;
      left: 50px;
      white-space: pre-line;
      word-break: break-all;
      width:100%;
    }
    
    .overflow-span {
      display: inline-block;
      overflow: hidden;
      width: 90%;
      text-overflow: ellipsis;
    }
    
</pre>

You can utilize the custom tooltip component to display a tooltip on hover, where the tooltip is only visible when the data overflows within the table cell.

Tooltips that appear when hovering over elements in a Fixed Data Table

Answer №1

Answer №2

Similar questions

Fan Animation in CSS

An embedded object is encountering an error due to an undefined value in the field of 'Math'

What is the best way to include my JavaScript code in a shiny app to ensure all hyperlinks are acknowledged?

Retrieving JSON data every few seconds using JavaScript

Having trouble executing react-native project using the command "npx react-native run-android"

Retrieving a PHP string and storing it in a jQuery variable

Generate a Year attribute value using the information from the year field in a JSON document

Tips for overriding a CSS class without impacting other classes sharing the same name

Real-time array filtering with ReactJS for nested arrays

Backbone template fails to display

What is the best way to update a Bootstrap Toggle with a dynamic value?

Utilizing PHP to retrieve and insert data from a database, then display the information within a div. Despite CSS being configured with different width and height settings, the div expands accordingly

Comparing SSE and Ajax Polling for querying in the browser without using JavaScript code

Identify when a mouse hovers within 10 pixels of a div using jQuery

Click the edit button to access the options in the material table

Having difficulty adjusting the text to match the image alignment

Tips for alternating the display between parent and child elements using jQuery

Is it possible to dynamically adjust the number of children in an array?

Utilize LESS Bootstrap as a guide for incorporating content

How to organize items in an array based on paired values using Angular or Javascript?