Add title here

by Imri Paloja

HTML

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>

<div class="container">

<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

<script>
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
</script>
  

  <div id="editor" class="" spellcheck="false" contenteditable="true">
    <h1>Notes From Underground By Fyodor Dostoyevsky</h1>

    <p>
      A man living alone in St. Petersburg writes memoirs describing his
      alienation from modern society.
    </p>
    <hr />
    <p>
      44,336 words (2 hours 42 minutes) with a reading ease of 69.92 (fairly
      easy)
    </p>
    <p>Translated by Constance Garnett.</p>
    <p>Fiction</p>
    <hr />
    <p>
      Notes from Underground is a fictional collection of memoirs written by a
      civil servant living alone in St. Petersburg. The man is never named and
      is generally referred to as the Underground Man. The “underground” in the
      book refers to the narrator’s isolation, which he described in chapter 11
      as “listening through a crack under the floor.”
    </p>
    <p>
      It is considered to be one of the first existentialist novels. With this
      book, Dostoevsky challenged the ideologies of his time, like nihilism and
      utopianism. The Underground Man shows how idealized rationality in utopias
      is inherently flawed, because it doesn’t account for the irrational side
      of humanity.
    </p>
    <p>
      This novel has had a big impact on many different works of literature and
      philosophy. It has influenced writers like Franz Kafka and Friedrich
      Nietzsche. A similar character is also found in Martin Scorsese’s Taxi
      Driver.
   ...

CSS

<style>
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

JavaScript

// Source - https://stackoverflow.com/a
// Posted by Jarek Milewski, modified by community. See post 'Timeline' for change history
// Retrieved 2026-01-03, License - CC BY-SA 4.0

function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}