Bokeh TapTool运行自定义JS和工具提示

Question

我在Bokeh有一个应用程序，它显示了一张带有不同圆集的地图。我希望能够使用TapTool在点击圆时显示一个小的显示，类似于使用HoverTool显示的，运行JS代码并使用自定义HTML模板。我在Fixed HoverTool TOOLTIPS when taping an element of a Bokeh plot的答案中找到了一个解决方案，其输出低于

然而，它的行为并不像预期的那样。不像HoverTool那样，使用TapTool将信息显示在选定圆的旁边，而是将信息显示在绘图的右侧，如图所示

我知道有一个很好的解释，比如正在使用的Bokeh版本（我尝试了1.0.4、1.4.0和2.0.0，使用相同的输出）或其他一些配置问题，但我找不到它。我也尝试过不同的浏览器，以防万一，但输出是一样的

Answer 1

问题是Div最终被另一个div包装起来，该div被向右移动，因为它与主图属于同一个Row

以下是适用于Bokeh 2.0.0的更新代码段：

div = Div(text='<div id="tooltip"></div>')

code = '''  if (cb_data.source.selected.indices.length > 0){
                const selected_index = cb_data.source.selected.indices[0];
                const tooltip = document.getElementById("tooltip");

                const tooltip_wrapper = tooltip.parentElement.parentElement;
                if (tooltip_wrapper.className !== 'bk')
                    throw new Error('Unable to find the correct tooltip wrapper element');
                tooltip_wrapper.style.left = Number(cb_data.geometries.sx) + Number(20) + 'px';
                tooltip_wrapper.style.top = Number(cb_data.geometries.sy) - Number(20) + 'px';

                tooltip.style.display = 'block';
                tp = tp.replace('@imgs', cb_data.source.data.imgs[selected_index]);
                tp = tp.replace('@desc', cb_data.source.data.desc[selected_index]);
                tp = tp.replace('@fonts{safe}', cb_data.source.data.fonts[selected_index]);
                tp = tp.replace('$index', selected_index);
                tp = tp.replace('$x', Math.round(cb_data.geometries.x));
                tp = tp.replace('$y', Math.round(cb_data.geometries.y));
                tooltip.innerHTML = tp;
          } '''
p.select(TapTool).callback = CustomJS(args={'circles': circles, 'tp': TOOLTIPS}, code=code)