使用现有的DIV作为弹出窗口？ （需要纯CSS还是JS？）

Question

我有一个由侧边栏和主要内容区域组成的页面。侧边栏有几个<div> s，其中包含图像，公式化程序和其他解释的唯一ID，以帮助用户取消主要内容的文本。

<aside>
    <div id="expl1" class="explaination">
        latin for "I think, therefore I am"
    </div>
    <div id="expl2" class="explaination">
        <img src="images/bellcurve.png"> Bell Curve.
    </div>
</aside>
<main>
    <p>
        some text.
    </p>
    <p>
        some more text <span class="hint explain1"> with explaination available</span> in the sidebar.
    </p>
    <p>
        even more text user <span class="hint explain2">can hover over</span> for information.
    </p>
</main>

有没有办法“复制/移动”相关的解释div（整个事情是一个flexbox布局，没有浮点数）所以它出现在正文中标记区域的旁边？理想情况下，弹出框应该通过单击标记的文本来“切换”打开/关闭，并且在激活时，弹出框应该滚动文本 - 就好像你在文本上放了一个便利贴。

这可行吗？如果它是可行的，你需要JavaScript还是只能使用纯HTML / CSS？