Python 带有Bokeh DataTable CSS样式的HTMLTemplateFormatter自定义模板

我正在尝试使用DataTable设置一个小的Bokeh应用程序，根据列的不同，它可能包含长文本。我希望有一个很好的工具提示工具，在相应单元格上方移动鼠标时显示完整的截断文本

我问了前面的一个问题，这个问题可能很好地完成了这项工作，但我无法得到正确的结果。 这是前一个问题：

我正在研究的解决方案是Ferrard提供的一个具有漂亮CSS样式的解决方案

不幸的是，我对CSS和html几乎一无所知

下面是我试图重现的代码

main.py

main.py：
从os.path导入目录名，加入
作为pd进口熊猫
从bokeh.io导入curdoc，显示
从bokeh.models导入ColumnDataSource，Div
从bokeh.models.widgets导入DataTable、TableColumn、HTMLTemplateFormatter
从bokeh.layouts导入布局
模板=“”
df=pd.DataFrame([
[“这是一个较长的文本，需要工具提示，否则我们看不到整个文本”，“这是一个短文本”]，
[“这是另一个需要工具提示的looooong文本”，“此处不多”]，
]，列=['a'，'b']）
columns=[TableColumn（field=c，title=c，width=20，formatter=HTMLTemplateFormatter（template=template））表示['a'，'b']中的c
表=数据表（源=列数据源（df），列=列）
l=布局（[[表]]）
curdoc（）.添加根目录（l）
表演（l）

desc.html

.工具提示父项{
宽度：100%；
}
.工具提示{
溢出：隐藏；
宽度：100%；
}
.工具提示文本{
可见性：隐藏；
宽度：250px；
背景色：rgba（0,0,0,1）；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充物：5px 5px；
位置：相对位置；
z指数：1；
最高：100%；
左：0%；
空白：首字母；
文本对齐：左对齐；
}
.tooltipped:悬停+工具提示文本{
能见度：可见；
}
分区bk-slick-cell{
溢出：可见！重要；
z索引：自动！重要；
}
工具提示演示

这是愚蠢的，但我真的不知道我应该把desc.html文件放在我的工作目录，这样bokeh服务器就可以调用它。。。我阅读了bokeh文档，并注意了bokeh的目录格式，但没有设法使用static或templates dir来实现正确的结果

这是我想要的最终结果 （声誉不足，无法链接图像）

我这边只有一个数据表，没有“工具提示演示”标题，也没有任何工具提示

---

这是我关于堆栈的第一个问题，希望一切正常：）

在目录样式的应用程序中，您可以制作具有以下结构的

模板/index.html

模板：

{% extends base %}

{% block title %}My Bokeh App{% endblock %}

{% block preamble %}
<style>
    /* your styles here */
</style>
{% endblock %}

{%extensedbase%}
{%block title%}我的博客应用程序{%endblock%}
{%block preamble%}
/*你的风格在这里*/
{%endblock%}

---

应用程序将使用包含样式表的

index.html

自动呈现自身。总的来说，有更简单的方法向Bokeh应用程序添加额外的样式表规范会更好。我鼓励你开一个会议开始讨论

嗨，谢谢你的回答。我尝试了您为index.html提供的css样式。这是一个很好的方法，但仍然有两个问题：-工具提示显示区域仅限于“活动”单元格。（参见囚禁在celle a0中的黑胡佛）-似乎我无法再更改DataTable的row_height属性。我如何纠正这些错误？另外，我现在应该编辑我的问题以使其更清晰吗？问题是如何注入自定义CSS，这就是我的答案。不过，我不知道你后续问题的答案。总的来说，最好保持单个问题尽可能集中，而不是在一个问题中从一个步骤转到另一个步骤。是的，我想我的问题有点混乱；-）谢谢你的帮助！我会听从你的建议，并将打开一个GitHub问题。