如何在 ag-grid 行上创建工具提示？

Question

我想根据status字段有条件地显示工具提示，将鼠标悬停在整行（不仅仅是单元格）上。 在 API 文档中，我发现了这个： https://www.ag-grid.com/javascript-grid-column-properties/

tooltip 一个回调，它接受（value、valueFormatted、data、node、colDef、rowIndex 和 api）它必须返回用作工具提示的字符串。 tooltipField 优先。

这可以用来在整行上显示工具提示吗？ 如果是，任何人都可以提供任何工作示例吗？ 如果没有，还有其他方法可以实现吗？

谢谢

Answer 1

我在列定义中像这样使用它们：

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

Answer 2

我发现了这样的东西：

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

它将将此工具提示添加为默认列定义，因此您无需在每个列定义中复制它。

-> 文档链接： https : //www.ag-grid.com/javascript-grid-cell-editing/

Answer 3

从v20.1 开始， colDef.tooltip已被弃用。 您现在可以通过执行以下操作在每列上设置工具提示：

{
    field: 'ItemDescription',
    headerName: 'Description',
    tooltipField: 'ItemDescription'
}

您可以在此处查看文档。

Answer 4

我创建了自定义工具提示组件并在下面呈现了一些内容

自定义工具提示.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>
    )
}

列定义：

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