如何允许访问者使用Bootstrap在图表上放置标记？

<div id="chartContainer"></div>

var ctx = document.getElementById('chartContainer').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['标签1', '标签2', '标签3'],
        datasets: [{
            label: '数据集',
            data: [10, 20, 30]
        }]
    },
    options: {
        // 图表配置选项
    }
});

// 监听图表上的点击事件
chart.canvas.addEventListener('click', function(event) {
    // 获取点击位置的数据索引
    var activePoints = chart.getElementsAtEvent(event);
    var index = activePoints[0]._index;

    // 获取点击位置的坐标
    var position = chart.tooltip._chart.canvas.getBoundingClientRect();
    var x = position.left + window.pageXOffset + activePoints[0]._model.x;
    var y = position.top + window.pageYOffset + activePoints[0]._model.y;

    // 创建标记元素
    var marker = document.createElement('div');
    marker.className = 'popover bs-popover-top';
    marker.style.position = 'absolute';
    marker.style.left = x + 'px';
    marker.style.top = y + 'px';
    marker.innerHTML = '<div class="arrow"></div><h3 class="popover-header">标记标题</h3><div class="popover-body">标记内容</div>';

    // 将标记元素添加到图表容器中
    document.getElementById('chartContainer').appendChild(marker);
});