我已经创建了一个散景数据表,并且希望将鼠标悬停在单元格上时包括工具提示:
from random import randint, choice
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import (DataTable, DateFormatter, TableColumn,
HTMLTemplateFormatter)
from bokeh.io import output_file, show
output_file('data_table.html')
data = dict(idx=[randint(0, 100) for i in range(10)],
values=[randint(0, 100) for i in range(10)],
aux=[randint(0, 100) for i in range(10)])
formats = '<div class="tooltip-parent">\
<div class="tooltipped"><%= value %></div>\
<div class="tooltip-text"><%= value %></div></div>'
templates = HTMLTemplateFormatter(template=formats)
source = ColumnDataSource(data)
columns = [TableColumn(field='idx', title='Index', formatter=templates),
TableColumn(field='values', title='Values', formatter=templates),
TableColumn(field='aux', title='Aux', formatter=templates)]
data_table = DataTable(source=source, columns=columns, width=400, height=280)
show(data_table)
在CSS样式表上,我们具有显示工具提示所需的设置:
.tooltip-parent {
width: 100%;
}
.tooltipped {
overflow: hidden;
width: 100%;
}
.tooltip-text {
visibility: hidden;
width: 250px;
background-color: rgb(0, 0, 0);
color: #ffffff;
text-align: center;
border-radius: 6px;
padding: 5px 5px;
position: relative;
z-index: 1;
top: 100%;
left: 0%;
white-space: initial;
text-align: left;
}
.tooltipped:hover + .tooltip-text {
visibility: visible;
}
div.bk-slick-cell {
overflow: visible !important;
z-index: auto !important;
}
这些配置在另一个问题上反映了Ferrard's suggestion,但是由于某些原因,我的工具提示在DataTable上不可见。相反,它们在自己的父div
元素(受行高限制)中变得可见,并使它看起来好像完全没有任何内容就被渲染:
为什么工具提示的行为不符合预期,我该如何解决?