I want to have a dynamic tooltip inside my chart with buttons inside it. Look like what i want is to create a custom tooltip. Once created, i try to hover over i but i can't. At first i thought it was impossible so i decided to create my very own custom tooltip which didn't turn out well. I created my own html component and a function to show this component, the function was fired when i hovered over a dot in the chart. The result was awful, the tooltip was blinking all the time so I headed back to the custom tooltip option chart.js provides. However i haven't found a way to keep the custom tooltip open when hovering over it.
The code i am using:
tooltips: {
enabled : false,
custom : function(tooltipModel){
var tooltipEl = document.getElementById('custom-tooltip')
//if tooltip component doesn't exist yet
if(!tooltipEl){
tooltipEl = document.createElement('div')
tooltipEl.id = 'custom-tooltip'
tooltipEl.innerHTML = '<table></table>'
document.body.appendChild(tooltipEl)
}
//making component opacity the same as in model
if(tooltipModel.opacity === 0){
tooltipEl.style.opacity = 0;
return;
}
tooltipEl.classList.remove('above','below','no-transform',)
if(tooltipModel.yAlign){
tooltipEl.classList.add(tooltipModel.yAlign)
}else{
tooltipEl.classList.add('no-tranform')
}
function getBody(bodyItem){
return bodyItem.lines
}
//adding information inside component
if(tooltipModel.body){
var titleLines = tooltipModel.title || []
var bodyLines = tooltipModel.body.map(getBody)
var innerHTML = '<thead>'
titleLines.forEach(function(title){
innerHTML += '<tr><th>' + title + '</th></tr>'
})
innerHTML += '</thead><tdboy>'
bodyLines.forEach(function(body,i){
var colors = tooltipModel.labelColors[i]
var style = `
background : ${colors.backgroundColor};
border-color : ${colors.borderColor};
border-width : 2px;
`
var span = '<span style="'+style+'"></span>'
innerHTML += '<tr><td>' + span + body + '</td></tr>'
})
innerHTML += '</tbody>'
innerHTML += '<button>button inside tooltip</button>'
var tableRoot = tooltipEl.querySelector('table')
tableRoot.innerHTML = innerHTML
}
var position = this._chart.canvas.getBoundingClientRect()
tooltipEl.classList.add('custom-tooltip')
tooltipEl.style.opacity = 1
tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px'
tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px'
// tooltipEl.style.pointerEvents = 'none'
}
I have a working custom tooltip on: https://jsfiddle.net/wL179b2p/
I only need something that prevents the tooltip from closing when not hovering over it.
Don't use like html string use document.createElement.So can add event to the element dynamically
var d1 = document.createElement('div'); var node = document.createTextNode("paragraph 2"); d1.appendChild(node); var d3 = document.createElement('div'); var button = document.createElement('button'); button.setAttribute('onclick', 'GetTableValues()'); //here GetTableValues is the javascript funtion called d3.appendChild(button); d1.appendChild(d3);
The solution i found is to create event listeners:
customTooltip.addEventListener('mouseout',()=>{
customTooltip.style.opacity = 0
})
customTooltip.addEventListener('mouseover',()=>{
customTooltip.style.opacity = tooltipOpacity
})
This helps me keep the tooltip open when i am hovering over it
I use the events: ['click']
config in options:
window.onload = function(){
var ctx = document.getElementById('chart').getContext('2d')
var chart = new Chart(ctx,{
type : 'line',
data : {
labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets : [
{
label : 'My first dataset',
data : [0, 10, 5, 2, 20, 30, 45]
}
]
},
options : {
events: ['click'],
tooltips: {
enabled : false,
For details, read further here... https://www.chartjs.org/docs/latest/configuration/interactions.html#event-option
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.