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

Question

我在 Bokeh 中有一个应用程序显示了一张包含不同圆圈集的地图。我希望能够使用 TapTool 在点击一个圆圈时显示一个小显示，类似于使用 HoverTool、运行 JS 代码和使用自定义 HTML 模板显示的显示。我在 Fixed HoverTool TOOLTIPS when taping an element of a Bokeh plot, whose output is below

的答案中找到了解决方案

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

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

Answer 1

问题是 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)

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

Bokeh TapTool running custom JS and tooltips

python

bokeh

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

Bokeh TapTool running custom JS and tooltips

python

bokeh

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