Problem description
I am using VChart for programming data lake visualization and have encountered some issues. I want to add some custom content at the bottom of the tooltip card, especially a button.
However, I found that when using vChart.renderAsync ().then, it seems that we cannot obtain the tooltip of the className we defined, and we have to wait for a while to obtain it. I do not want to implement this function through custom tooltips because I want to maintain the original component style. So, I would like to ask, is there a better solution?
Solution
For this issue, it can be modified on the original DOM through the updateElement callback. Here is an example code:
tooltip: {
...
updateElement: el => {
el.style.width = 'auto';
el.style.height = 'auto';
el.style.minHeight = 'auto';
if (el.lastElementChild?.id !== 'test') {
el.innerHTML = '';
const div = document.createElement('div');
div.id = 'test';
div.style.width = '200px';
div.innerText = 'test';
div.style.color = 'red';
el.appendChild(div);
}
}
}
This code will be modified on the original DOM of the tooltip. You can choose to clear the tooltip content or keep the original content. However, it should be noted that the enterable support of the tooltip may not be ideal. When updating the tooltip location, the callback function will be executed every time.
After upgrading to vchart1.6.0 version, you can use the updateElement function.
The third parameter of updateElement can be taken to params.changePositionOnly. If it is true, it means that the default tooltip content has not changed. If the custom tooltip content needs to be updated synchronously with the default tooltip, you can consider filtering out the case where params.changePositionOnly is true.
Results show
After the above steps, I successfully added a button to the bottom of the tooltip card in vChart.
Top comments (0)