Add option to create popups
It would be helpful to allow the creation of popups that would show some additional tips to the user (reference).
Here is an example:
<div markdown="1" class="hover"> :material-eye-plus:{ .animate }
<div class="popup">
```python
print("asd")
```
</div>
</div>
.hover {
position: relative;
width: fit-content;
}
.popup {
opacity: 0;
position: absolute;
top: 25px;
left: -10px;
border: 1px solid transparent;
border-radius: 6px;
height: 0;
padding: 0 12px;
overflow: hidden;
-webkit-transition: all 500ms;
transition: all 500ms;
background-color: var(--md-default-fg-color);
font-size: 14px;
color: var(--md-default-bg-color);
box-shadow: var(--md-shadow-z3);
}
.hover:hover .popup {
padding: 12px 12px;
height: auto;
opacity: 1;
}
@keyframes pulsate {
0%, 30%, 70%, 100% {
transform: scale(1);
}
15%, 45% {
transform: scale(1.15);
}
}
.animate {
animation: pulsate 2000ms infinite;
color: blue;
}
Additional changes to mkdocs.yml:
markdown_extensions:
- attr_list
- pymdownx.emoji:
emoji_index: !!python/name:materialx.emoji.twemoji
emoji_generator: !!python/name:materialx.emoji.to_svg
- pymdownx.extra
extra_css:
- extra/extra.css