How to create tooltip on ag-grid row?

I want to display a tooltip conditionally based on status field, on hovering over an entire row(not on just cells). In the API documentation, I found this: https://www.ag-grid.com/javascript-grid-column-properties/

tooltip A callback that takes (value, valueFormatted, data, node , colDef, rowIndex, and api) It must return the string used as a tooltip. tooltipField takes precedence.

Can this be used to display a tooltip on an entire row? If yes, could anyone provide any working example? If not, is there any other way I can achieve it?

Thanks

Upvotes: 21

Answers (5)

Pipo

Reputation: 5093

Use tooltipValueGetter if needed:

{
        headerName: 'Operator',
        headerTooltip: 'Operator First name and Last name',
        ...
        tooltipValueGetter: (params: ITooltipParams){
                  let getterRes: string = '';
                  if (params?.data?.firstName || params?.data?.lastName) {
                    getterRes = params.data.firstName;
                    if (params?.data?.lastName) {
                      getterRes += ' ' + params.data.lastName;
                    }
                  }
                  return getterRes;
                },
        ....
}

Upvotes: 4

Dev 404

Reputation: 1606

As of v20.1, colDef.tooltip has been deprecated.

You can now set a tooltip on an individual column by using colDef.tooltipField. You can pass an optional tooltipComponentParams object for further customization.

const columnDefs = [
    {
        field: 'FirstName',
        headerName: 'First Name',
        tooltipField: 'FirstName',
        tooltipComponentParams: {
            // Optional Parameters
        }
    }
]

You can also register and use a custom tooltip component for complete customization.

Documentation

Upvotes: 10

KARTHIKEYAN.A

Reputation: 20118

I have created custom tooltip coponent and rendered something below

CustomTooltip.js

import React, { useState, useCallback } from 'react'
import ErrorOutlineOutlinedIcon from '@material-ui/icons/ErrorOutlineOutlined'
import {
    makeStyles,
    createStyles,
    withStyles,
} from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import {
    Popper,
    Fade,
    Paper,
    IconButton,
    Divider,
    Link
} from '@material-ui/core'
import CancelIcon from '@material-ui/icons/Cancel'


const imageStyles = { root: { color: 'deeppink', height: 20, marginBottom: 0, width: 20 } }

const Image = withStyles(imageStyles)(({ classes }) => (
    <ErrorOutlineOutlinedIcon classes={classes} />
))

const useStylesBootstrap = makeStyles({
    arrow: {
        '&': {
            '&::before': {
                borderColor: 'lightgray transparent transparent transparent',
                borderWidth: '1em 1em 0 1em'
            },
            bottom: 0,
            height: '1em',
            left: 0,
            marginBottom: '0.5em',
            width: '2em'
        },
        '&::before': {
            borderStyle: 'solid',
            content: '""',
            display: 'block',
            height: 0,
            margin: 'auto',
            width: 0
        },
        fontSize: 9,
        position: 'absolute'
    }
})

const useStyles = makeStyles(theme =>
    createStyles({
        closeButton: {
            cursor: 'pointer',
            position: 'absolute',
            right: -8,
            top: -8
        },
        content: {
            border: `1px solid ${theme.palette.grey[300]}`,
            marginBottom: 13,
            minWidth: 500,
            padding: 0,
            zIndex: 1,
        },
        contentInner: {
            padding: theme.spacing(2)
        },
        header: {
            backgroundColor: 'deeppink',
            fontWeight: 'bold',
            padding: theme.spacing(1),
        }
    })
)

export default function SimplePopoverTooltip(params) {
    // const { arrow, ...classes } = useStylesBootstrap()
    console.log(params.column.colDef.headerName, 'params')
    const { arrow } = useStylesBootstrap()
    const classes1 = useStyles()

    // const classes = useStyles()
    const [ anchorEl, setAnchorEl ] = useState(null)
    const [ arrowRef, setArrowRef ] = useState(null)
    const [ displayArrow, setDisplayArrow ] = useState(false)

    const handleClick = useCallback(event => {
        setAnchorEl(anchorEl ? null : event.currentTarget)
        setDisplayArrow(!displayArrow)
    })
    const open = Boolean(anchorEl)
    const id = open ? 'simple-popover' : undefined
    const labelDisplay = params.value
    return (
        <div>
            <Paper
                aria-describedby={id}
                color='primary'
                onMouseEnter={handleClick}'
                style={{ alignItems: 'center', boxShadow: 'none', display: 'flex', fontSize: '12px', justifyContent: 'space-around', padding: '0px', textTransform: 'none', width: '100%'}}
            >
                {labelDisplay && labelDisplay.length > 2 ? `${labelDisplay.slice(0, 23)}...` : ''}
                {labelDisplay && labelDisplay.length > 20 ? <Image/> : ''}
            </Paper>
            <Popper
                id={id}
                open={open}
                placement='top'
                anchorEl={anchorEl}
                style={{zIndex: 1}}
                popperOptions={{
                    modifiers: {
                        arrow: {
                            element: arrowRef,
                            enabled: Boolean(arrowRef),
                        },
                    },
                }}
                transition
            >
                {useCallback(({ TransitionProps }) => (
                    <>
                        <Fade {...TransitionProps} timeout={350}>
                            <Paper className={classes1.content}>
                                <IconButton
                                    onClick={handleClick}
                                    className={classes1.closeButton}
                                >
                                    <CancelIcon style={{ width: 20 }} />
                                </IconButton>
                                <div className={classes1.header}>
                                    <Typography color='inherit' variant='body1' style={{color: 'white', fontSize: '20px'}}>
                                        {params.column.colDef.headerName}
                                    </Typography>
                                </div>
                                <Divider />
                                <div className={classes1.contentInner}>
                                    {params.value}
                                </div>
                            </Paper>
                        </Fade>
                        <Fade in={displayArrow} timeout={350}>
                            <span className={arrow} ref={setArrowRef} />
                        </Fade>
                    </>
                ), [ ])}
            </Popper>
        </div>
    )
}

Column Definiton:

columnDefs: [{
            cellRenderer: SimplePopoverTooltip,
            field: 'action',
            filter: 'agTextColumnFilter',
            headerName: 'Action',
        },]

Upvotes: 0

kWakulewski

Reputation: 81

I found something like this:

gridOptions.defaultColDef = {
    tooltip: (params) => {
        if (condition2) {
            return "Some txt";
        } else if (condition2) {
            return "Some txt2";
        } else {
            return "Some txt3";
        }
    }
};

It will add this tooltip as default columns definitions so you dont need to copy it in every column definition.

-> link to documentation: https://www.ag-grid.com/javascript-grid-cell-editing/

Upvotes: 8

Quad Coders

Reputation: 668

I use them like this in column definition:

{
    field: 'fullAddress',
    headerName: 'Address',
    tooltip: (params) => 'Address: ' + params.value
}

Upvotes: 22

How to create tooltip on ag-grid row?

Answers (5)

Related Questions