将图片显示为工具提示

前端开发 2026-07-11

我想把一张图片用作提示框（tooltip）。我不想在提示框中有文本。我想让图片以原始大小完整显示。该图片与列中已显示的图片相同。应该怎么做？到目前为止，我是这样做的：

from dash import Dash, html
import dash_ag_grid as dag

tooltip_image = "https://dash.plotly.com/assets/images/plotly_logo_light.png"

grid = dag.AgGrid(
   id = 'grid',
    rowData = [{
        'img_html': '<img src="https://dash.plotly.com/assets/images/plotly_logo_light.png" style="max-width:100%; height:auto;" />',
        'tooltip':'Tooltip text'
    }],

   columnDefs=[
      {
         'field': 'img_html', 'headerName': 'Image', 'filter': False, 'cellRenderer': 'markdown',
         "tooltipField": "tooltip",
         "tooltipComponent": "DccMarkdown",
         "tooltipComponentParams": {
            "style": {
               "padding": 200,
               "backgroundImage": f"url('{tooltip_image}')",
               "boxShadow": "var(--ag-card-shadow)",
            },
         },
      },
   ],
   columnSize = 'autoSize',
   dangerously_allow_code=True
)
app = Dash(__name__, assets_folder='./assets',)
app.layout = [html.Div([grid]),]
if __name__ == '__main__':
    app.run(debug=True)

这段JavaScript代码位于 assets 目录中：

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.DccMarkdown = function (props) {
    return React.createElement(
        window.dash_core_components.Markdown, {
            children: props.value,
            className: props.className,
            style: props.style,
            dangerously_allow_html : props.dangerously_allow_html | false,
            link_target: props.link_target,
            mathjax: props.mathjax
        }
    )
};

解决方案

好奇你为什么要把提示框图像渲染为背景图像？如果你那样做，你最终就只能让背景的宽度与div同宽。

另一方面，通过将提示框设置为一个React图像元素，你可以充分利用整个宽度。

请看这里：

from dash import Dash, html
import dash_ag_grid as dag

tooltip_image = "https://dash.plotly.com/assets/images/plotly_logo_light.png"

grid = dag.AgGrid(
   id = 'grid',
    rowData = [{
        'img_html': '<img src="https://dash.plotly.com/assets/images/plotly_logo_light.png" style="max-width:100%; height:auto;" />',
        'tooltip':'Tooltip text'
    } for i in range(10)],

   columnDefs=[
      {
         'field': 'img_html', 'headerName': 'Image', 'filter': False, 'cellRenderer': 'markdown',
         "tooltipField": "tooltip",
         "tooltipComponent": "DccImage",
         "tooltipComponentParams": {
            "srcField": tooltip_image
         },
      },
   ],
   columnSize = 'autoSize',
   dangerously_allow_code=True
)

# ..etc code

你的JavaScript函数可以是：

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

/**
 * @param {string} props.srcField - image src
 * @returns a React element that renders the image
 */
dagcomponentfuncs.DccImage = function (props) {
    return React.createElement('img', {
        key: 'image',
        src: props.srcField,
        alt: props.value || 'Image',
        style: {outline: '1px solid black', backgroundColor: 'white'},
    })
}

JavaScript