HTML 工具提示不会显示在 Jupyter 笔记本中



我正在遵循这个将工具提示添加到HTML的示例。它可以在独立的HTML文件中工作,但是当我尝试将其嵌入Jupyter时,我没有看到"Hower over me"文本。

这是我的笔记本代码:

from IPython.core.display import HTML
def _set_css_style(css_file_path):
"""
Read the custom CSS file and load it into Jupyter.
Pass the file path to the CSS file.
"""
styles = open(css_file_path, "r").read()
st = '<style>%s</style>' % styles     
return HTML(st)
_set_css_style('styles.css')
HTML("""<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<p>Blah blah blah</p>
</body>
""")

这是 css 文件:

/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}

Jupyter 显示:

Move the mouse over the text below:
Blah blah blah

class="tooltip"更改为class="ttooltip"(以及有效的CSS类名(修复了它。我猜Jupyter已经有一个tooltip类,它与新创建的类冲突。

最新更新