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

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包裹，该Row与主图属于同一个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 2.0.0兼容的代码的更新段：

v1.10.0