Having tooltip `appendTo` to parent causes it to be trimmed by
the size of parent container if the parent doesn't have enough
size to include the tooltip. To fix this, we append tooltip
to `document.body`.
Since both the original button svg's have their own individual height
and width, this commit tweaks it to values height=20 and width=16 which
works well for both buttons.
The base class will contain common styling which is used by both
copy_codeblock and copy_message buttons. This sets us up nicely
for following commit(s) which aims to unify the two button styling.
Clicking on the copy-to-clipboard button triggers the clipboard.js
API to dynamically set the text to be copied. This text is the
actual code content from the sibling <code> element (extracted
though jQuery text() method).
The html structure would now look like:
<div class="codehilite">
<pre>
<button> The copy button </button>
<span></span>
<code>......</code>
</pre>
</div>
Additionally, this preserves the original code formatting of
the codeblock during copy-paste.
Tests amended.
Fixes: #15208
Aman Agrawal
Tim Abbott
Sumanth V Rao