html("<style>
.floating-button {
    padding: 10px 20px;
    font-size: 14px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
[popover] {
    width: max-content;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s ease;
}
</style>
<button class='floating-button' popovertarget='popover' popovertargetaction='toggle'>Click me</button>
<div id='popover' popover>
    <h2>Text</h2>
    <textarea rows='6' cols='50' placeholder='I am a popover with a text area where you can type in your info. You can also use the draggable corner to resize the text area, which is handy for longer entries. Give me a try by writing something...'></textarea>
    <button class='floating-button' style='float: right; margin-top: 10px;' popovertarget='popover' popovertargetaction='hide' onclick='saveText();'>Add</button>
</div>
<script>
function saveText() {
    // add logic here
};
</script>")