search

arunghosh / react-heatmap-grid

A react component for heatmap visualisation in grid layout
https://codesandbox.io/s/r4rvwkl3yn
MIT License
76 stars 42 forks source link

Tooltips in cellRender #174

Open bucky-badger-gesmer opened 4 years ago

bucky-badger-gesmer commented 4 years ago

Hi there, we are currently leveraging react-heatmap-grid to display a custom component with separate swim lane "heat maps." Is there a way to implement tooltips in cellRender? I wonder if there's an issue with static conversion for HTML. Is something like this possible?

<HeatMap
    background="#0598dc"
    xLabels={authenticationXLabels}
    yLabels={authenticationYLabels}
    xLabelsVisibility={authenticationXLabelsVisibility}
    yLabelWidth={120}
    data={authenticationData}
    cellStyle={this.getCellStyle}
    cellRender={() => {
        return <p className="w3-tooltip">YO<span className="w3-text w3-tag w3-small">YO!</span></p>
    }}
/>
arunghosh commented 4 years ago

@bucky-badger-gesmer I am not sure if I got your question correctly. For displaying tooltip use title attribute:

    cellRender={() => {
        return <p className="w3-tooltip" title="Yo! Yo!!">YO<span className="w3-text w3-tag w3-small">YO!</span></p>
    }}

If this is not answering your question, can you provide more details?