为什么我的Bokeh DataTable工具提示没有显示在其他元素上?

时间:2020-05-24 01:00:40

标签: python css bokeh

我已经创建了一个散景数据表,并且希望将鼠标悬停在单元格上时包括工具提示:

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元素(受行高限制)中变得可见,并使它看起来好像完全没有任何内容就被渲染:

a bokeh datatable not behaving as expected

为什么工具提示的行为不符合预期,我该如何解决?

0 个答案:

没有答案
相关问题