[英]HTML tooltip is not displayed in Jupyter notebook
我正在关注这个向 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"
(以及class="ttooltip"
CSS 类名称)修复了它。 我猜 Jupyter 已经有一个tooltip
类,它与新创建的类冲突。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.