I am following this example of adding tooltip to HTML. It works in a standalone HTML file, but when I try to embed it into Jupyter, I see no "Hower over me" text.
This is my notebook code:
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>
""")
And here is the css file:
/* 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 displays:
Move the mouse over the text below:
Blah blah blah
Changing class="tooltip"
to class="ttooltip"
(as well as resepective CSS class names) fixed it. I am guessing Jupyter has a tooltip
class already, which conflicted with a newly created class.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.