diff --git a/packages/widget/index.html b/packages/widget/index.html
index f76649bc..23675f78 100644
--- a/packages/widget/index.html
+++ b/packages/widget/index.html
@@ -26,197 +26,220 @@
 <script>
   customElements.whenDefined('docmaps-widget').then(() => {
     const exampleDocmap = {
-      '@context': 'https://w3id.org/docmaps/context.jsonld',
-      'type': 'docmap',
-      'id': 'https://data-hub-api.elifesciences.org/enhanced-preprints/docmaps/v1/get-by-doi?preprint_doi=10.1101%2F2022.11.08.000001',
-      'created': '2022-11-28T11:30:05+00:00',
-      'updated': '2022-11-28T11:30:05+00:00',
-      'publisher': {
-        'account': {
-          'id': 'https://sciety.org/groups/elife',
-          'service': 'https://sciety.org',
+      "@context": "https://w3id.org/docmaps/context.jsonld",
+      "type": "docmap",
+      "id": "https://data-hub-api.elifesciences.org/enhanced-preprints/docmaps/v1/get-by-doi?preprint_doi=10.1101%2F2022.11.08.000002",
+      "created": "2022-11-28T11:30:05+00:00",
+      "updated": "2022-11-28T11:30:05+00:00",
+      "publisher": {
+        "account": {
+          "id": "https://sciety.org/groups/elife",
+          "service": "https://sciety.org"
         },
-        'homepage': 'https://elifesciences.org/',
-        'id': 'https://elifesciences.org/',
-        'logo': 'https://sciety.org/static/groups/elife--b560187e-f2fb-4ff9-a861-a204f3fc0fb0.png',
-        'name': 'eLife',
+        "homepage": "https://elifesciences.org/",
+        "id": "https://elifesciences.org/",
+        "logo": "https://sciety.org/static/groups/elife--b560187e-f2fb-4ff9-a861-a204f3fc0fb0.png",
+        "name": "eLife"
       },
-      'first-step': '_:b0',
-      'steps': {
-        '_:b0': {
-          'actions': [
+      "first-step": "_:b0",
+      "steps": {
+        "_:b0": {
+          "actions": [
             {
-              'participants': [],
-              'outputs': [
+              "participants": [
                 {
-                  'type': 'preprint',
-                  'doi': '10.1101/2022.11.08.000001',
-                  'url': 'https://www.biorxiv.org/content/10.1101/2022.11.08.000001v2',
-                  'published': '2022-11-22',
-                  'versionIdentifier': '2',
+                  "actor": {
+                    "name": "eve",
+                    "type": "person"
+                  },
+                  "role": "spaceship-builder"
                 },
+                {
+                  "actor": {
+                    "name": "Andrew Edstrom",
+                    "type": "person"
+                  },
+                  "role": "gun-for-hire"
+                }
               ],
-            },
+              "outputs": [
+                {
+                  "type": "preprint",
+                  "doi": "10.1101/2022.11.08.000002",
+                  "id": "sick-preprint-bro",
+                  "url": "https://example.com/sick-preprint-yo",
+                  "published": "1993-10-20",
+                  "versionIdentifier": "2",
+                  "content": [
+                    {
+                      "type": "web-page",
+                      "url": "https://example.com/fake-journal/article/3003.png"
+                    },
+                    {
+                      "type": "web-page",
+                      "url": "https://example.com/fake-journal/article/3003.heic"
+                    }
+                  ]
+                }
+              ]
+            }
           ],
-          'assertions': [
+          "assertions": [
             {
-              'item': {
-                'type': 'preprint',
-                'doi': '10.1101/2022.11.08.000001',
-                'versionIdentifier': '2',
+              "item": {
+                "type": "preprint",
+                "doi": "10.1101/2022.11.08.000002",
+                "versionIdentifier": "2"
               },
-              'status': 'manuscript-published',
-            },
+              "status": "manuscript-published"
+            }
           ],
-          'inputs': [],
-          'next-step': '_:b1',
+          "inputs": [],
+          "next-step": "_:b1"
         },
-        '_:b1': {
-          'actions': [
+        "_:b1": {
+          "actions": [
             {
-              'participants': [],
-              'outputs': [
+              "participants": [],
+              "outputs": [
                 {
-                  'identifier': '85111',
-                  'versionIdentifier': '',
-                  'type': 'preprint',
-                  'doi': '10.7554/eLife.00001',
-                },
-              ],
-            },
+                  "identifier": "85111",
+                  "versionIdentifier": "",
+                  "type": "review-article",
+                  "doi": "10.7554/eLife.00002"
+                }
+              ]
+            }
           ],
-          'assertions': [
+          "assertions": [
             {
-              'item': {
-                'type': 'preprint',
-                'doi': '10.1101/2022.11.08.000001',
-                'versionIdentifier': '2',
+              "item": {
+                "type": "preprint",
+                "doi": "10.1101/2022.11.08.000002",
+                "versionIdentifier": "2"
               },
-              'status': 'under-review',
-              'happened': '2022-11-28T11:30:05+00:00',
-            },
-            {
-              'item': {
-                'type': 'preprint',
-                'doi': '10.7554/eLife.00001',
-                'versionIdentifier': '',
-              },
-              'status': 'draft',
-            },
+              "status": "under-review",
+              "happened": "2022-11-28T11:30:05+00:00"
+            }
           ],
-          'inputs': [
+          "inputs": [
             {
-              'type': 'preprint',
-              'doi': '10.1101/2022.11.08.000001',
-              'url': 'https://www.biorxiv.org/content/10.1101/2022.11.08.000001v2',
-              'versionIdentifier': '2',
-            },
+              "type": "preprint",
+              "doi": "10.1101/2022.11.08.000002",
+              "url": "https://example.com/sick-preprint-yo",
+              "versionIdentifier": "2"
+            }
           ],
-          'next-step': '_:b2',
-          'previous-step': '_:b0',
+          "next-step": "_:b2",
+          "previous-step": "_:b0"
         },
-        '_:b2': {
-          'actions': [
+        "_:b2": {
+          "actions": [
             {
-              'participants': [
+              "participants": [
                 {
-                  'actor': {
-                    'name': 'anonymous',
-                    'type': 'person',
+                  "actor": {
+                    "name": "anonymous",
+                    "type": "person"
                   },
-                  'role': 'peer-reviewer',
-                },
+                  "role": "peer-reviewer"
+                }
               ],
-              'outputs': [
+              "outputs": [
                 {
-                  'type': 'review-article',
-                  'published': '2023-01-23T14:34:44.369019+00:00',
-                  'content': [
+                  "type": "review-article",
+                  "published": "2023-01-23T14:34:43.676466+00:00",
+                  "content": [
                     {
-                      'type': 'web-page',
-                      'url': 'https://hypothes.is/a/FD5EmpsrEe28RaOWOszMEw',
+                      "type": "web-page",
+                      "url": "https://hypothes.is/a/E9MOvpsrEe2w6nds1t6xxQ"
                     },
                     {
-                      'type': 'web-page',
-                      'url': 'https://sciety.org/articles/activity/10.1101/2022.11.08.000001#hypothesis:FD5EmpsrEe28RaOWOszMEw',
+                      "type": "web-page",
+                      "url": "https://sciety.org/articles/activity/10.1101/2022.11.08.000002#hypothesis:E9MOvpsrEe2w6nds1t6xxQ"
                     },
                     {
-                      'type': 'web-page',
-                      'url': 'https://sciety.org/evaluations/hypothesis:FD5EmpsrEe28RaOWOszMEw/content',
-                    },
-                  ],
-                },
-              ],
+                      "type": "web-page",
+                      "url": "https://sciety.org/evaluations/hypothesis:E9MOvpsrEe2w6nds1t6xxQ/content"
+                    }
+                  ]
+                }
+              ]
             },
             {
-              'participants': [
+              "participants": [
                 {
-                  'actor': {
-                    'name': 'Andrew Edstrom',
-                    'type': 'person',
+                  "actor": {
+                    "name": "anonymous",
+                    "type": "person"
                   },
-                  'role': 'editor',
-                },
+                  "role": "peer-reviewer"
+                }
               ],
-              'outputs': [
-                {
-                  'type': 'journal-article',
-                  'published': '2023-01-23T14:34:45.299Z',
-                  'url': 'https://example.com/fake-journal/article/3003',
-                },
+              "outputs": [
                 {
-                  'type': 'review',
-                  'published': '2023-01-23T14:34:45.299Z',
-                  'url': 'https://example.com/fake/review/3003',
-                },
-                {
-                  'type': 'reply',
-                  'published': '2023-01-23T14:34:45.299Z',
-                  'url': 'https://example.com/fake/reply/3003',
-                },
-                {
-                  'type': 'comment',
-                  'published': '2023-01-23T14:34:45.299Z',
-                  'url': 'https://example.com/fake/comment/3003',
-                },
+                  "type": "review-article",
+                  "published": "2023-01-23T14:34:44.369019+00:00"
+                }
+              ]
+            },
+            {
+              "participants": [
                 {
-                  'type': 'editorial',
-                  'published': '2023-01-23T14:34:45.299Z',
-                  'url': 'https://example.com/fake/editorial/3003',
-                },
+                  "actor": {
+                    "name": "Emily",
+                    "type": "person"
+                  },
+                  "role": "Product Manager"
+                }
+              ],
+              "outputs": [
                 {
-                  'type': 'evaluation-summary',
-                  'published': '2023-01-23T14:34:45.299Z',
-                  'url': 'https://example.com/fake-evaluation/summary/3003',
+                  "published": "2023-01-23T14:34:45.299Z",
+                  "url": "https://example.com/fake-journal/summary/3000",
                 },
                 {
-                  'published': '2023-01-23T14:34:45.299Z',
-                  'url': 'https://example.com/fake/review/3003',
-                },
-
-              ],
-            },
+                  "type": "journal-article",
+                  "published": "2023-01-23T14:34:45.299Z",
+                  "url": "https://example.com/fake-journal/article/3003",
+                  "content": [
+                    {
+                      "type": "web-page",
+                      "url": "https://example.com/fake-journal/article/3003.mp4"
+                    },
+                    {
+                      "type": "web-page",
+                      "url": "https://example.com/fake-journal/article/3003.pdf"
+                    },
+                    {
+                      "type": "web-page",
+                      "url": "https://example.com/fake-journal/article/3003.xml"
+                    }
+                  ]
+                }
+              ]
+            }
           ],
-          'assertions': [
+          "assertions": [
             {
-              'item': {
-                'type': 'preprint',
-                'doi': '10.1101/2022.11.08.000001',
-                'versionIdentifier': '2',
+              "item": {
+                "type": "preprint",
+                "doi": "10.1101/2022.11.08.000002",
+                "versionIdentifier": "2"
               },
-              'status': 'peer-reviewed',
-            },
+              "status": "peer-reviewed"
+            }
           ],
-          'inputs': [
+          "inputs": [
             {
-              'type': 'preprint',
-              'doi': '10.7554/eLife.00001',
-            },
+              "type": "review-article",
+              "doi": "10.7554/eLife.00002"
+            }
           ],
-          'previous-step': '_:b1',
-        },
-      },
-    };
+          "previous-step": "_:b1"
+        }
+      }
+    }
     const widgetElement = document.getElementById('my-widget');
     widgetElement.docmap = exampleDocmap;
   });
diff --git a/packages/widget/src/assets/copy-to-clipboard.ts b/packages/widget/src/assets/copy-to-clipboard.ts
new file mode 100644
index 00000000..83fce8e3
--- /dev/null
+++ b/packages/widget/src/assets/copy-to-clipboard.ts
@@ -0,0 +1,30 @@
+import { svg } from 'lit';
+
+export const copyToClipboardButton = (
+  textToCopy: string,
+  onCopy: (newText: string, x: number, y: number) => void,
+) => svg`
+  <svg @click='${(event: PointerEvent) => copyToClipboard(event, textToCopy, onCopy)}' 
+    class='copy-to-clipboard-button clickable' width='12' height='14' viewBox='0 0 12 14' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path class='copy-to-clipboard-button-path' fill='#989898' fill-rule='evenodd' clip-rule='evenodd' d='M7 3H2C1.44772 3 1 3.44772 1 4V12C1 12.5523 1.44772 13 2 13H7C7.55228 13 8 12.5523 8 12V4C8 3.44772 7.55228 3 7 3ZM2 2C0.895431 2 0 2.89543 0 4V12C0 13.1046 0.89543 14 2 14H7C8.10457 14 9 13.1046 9 12V4C9 2.89543 8.10457 2 7 2H2ZM10 1H5C4.44772 1 4 1.44772 4 2V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V2C11 1.44772 10.5523 1 10 1ZM5 0C3.89543 0 3 0.895431 3 2V10C3 11.1046 3.89543 12 5 12H10C11.1046 12 12 11.1046 12 10V2C12 0.895431 11.1046 0 10 0H5Z'/>
+  </svg>
+`;
+
+// Be aware: the copy-to-clipboard functionality is not tested. Sadly, it is basically impossible to test clipboard
+// functionality in Playwright.
+const copyToClipboard = (
+  event: PointerEvent,
+  textToCopy: string,
+  onCopy: (newText: string, x: number, y: number) => void,
+) => {
+  navigator.clipboard
+    .writeText(textToCopy)
+    .then(() => {
+      const x: number = event.pageX;
+      const y: number = event.pageY;
+      onCopy('Copied!', x, y);
+    })
+    .catch((err) => {
+      console.log('Failed to copy to clipboard\n\n', err);
+    });
+};
diff --git a/packages/widget/src/assets/index.ts b/packages/widget/src/assets/index.ts
index 947fd7af..9c1dba2f 100644
--- a/packages/widget/src/assets/index.ts
+++ b/packages/widget/src/assets/index.ts
@@ -1,4 +1,5 @@
 // All files which will be accessible when the widget is installed via npm are declared here
+export * from './copy-to-clipboard';
 export * from './close-details-button';
 export * from './logo-small';
 export * from './logo-large';
diff --git a/packages/widget/src/detail-navigation-header.ts b/packages/widget/src/detail-navigation-header.ts
index c3d6b4a8..4b05c149 100644
--- a/packages/widget/src/detail-navigation-header.ts
+++ b/packages/widget/src/detail-navigation-header.ts
@@ -17,7 +17,7 @@ const backButton = (
     <svg class='docmaps-timeline-back clickable' width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'
         @click='${() => updateSelectedNode(previousNode)}'>
       <circle cx='17.5' cy='17.5' r='17' stroke='#474747'/>
-      <path transform='scale(-1,1) translate(-35,0)' d='M22.5 17.134C23.1667 17.5189 23.1667 18.4811 22.5 18.866L10.5 25.7942C9.83333 26.1791 9 25.698 9 24.9282L9 11.0718C9 10.302 9.83333 9.82087 10.5 10.2058L22.5 17.134Z' fill='#474747'/>
+      <path fill='#474747' transform='scale(-1,1) translate(-35,0)' d='M22.5 17.134C23.1667 17.5189 23.1667 18.4811 22.5 18.866L10.5 25.7942C9.83333 26.1791 9 25.698 9 24.9282L9 11.0718C9 10.302 9.83333 9.82087 10.5 10.2058L22.5 17.134Z'/>
       <path transform='scale(-1,1) translate(-35,0)'  d='M24 10L24 26' stroke='#474747' stroke-width='2' stroke-linecap='round'/>
     </svg>`;
 };
diff --git a/packages/widget/src/detail-view.ts b/packages/widget/src/detail-view.ts
index 197b227f..4b40317d 100644
--- a/packages/widget/src/detail-view.ts
+++ b/packages/widget/src/detail-view.ts
@@ -6,7 +6,7 @@ import {
   TYPE_DISPLAY_OPTIONS,
 } from './display-object.ts';
 import { renderDetailNavigationHeader } from './detail-navigation-header';
-import { closeDetailsButton } from './assets';
+import { closeDetailsButton, copyToClipboardButton } from './assets';
 
 type MetadataKey = string;
 type MetadataValue = string | string[];
@@ -17,6 +17,7 @@ export function renderDetailsView(
   allNodes: DisplayObject[],
   updateSelectedNode: (node: DisplayObject) => void,
   closeDetailsView: () => void,
+  updateDetailTooltip: (newText: string, x: number, y: number) => void,
 ): HTMLTemplateResult {
   const opts = TYPE_DISPLAY_OPTIONS[selectedNode.type];
   const backgroundColor = opts.detailViewBackgroundColor || opts.backgroundColor;
@@ -24,7 +25,9 @@ export function renderDetailsView(
 
   const fieldsToDisplay: MetadataTuple[] = getMetadataFieldsToDisplay(selectedNode);
   const detailBody: HTMLTemplateResult =
-    fieldsToDisplay.length > 0 ? createMetadataGrid(fieldsToDisplay) : emptyMetadataMessage();
+    fieldsToDisplay.length > 0
+      ? renderMetadataGrid(fieldsToDisplay, updateDetailTooltip)
+      : emptyMetadataMessage();
 
   return html`
     <div class="detail-timeline no-select">
@@ -42,16 +45,20 @@ export function renderDetailsView(
   `;
 }
 
-const createMetadataGrid = (
+// Renders the metadata grid, which is a 2-column grid of key-value pairs.
+// The key is displayed in the left column, and the value is displayed in the right column. If the value is an array, it
+// is displayed as multiple rows, with the key cell spanning all those rows.
+const renderMetadataGrid = (
   metadataEntries: [MetadataKey, MetadataValue][],
+  updateDetailTooltip: (newText: string, x: number, y: number) => void,
 ): HTMLTemplateResult => {
   const gridItems: HTMLTemplateResult[] = metadataEntries.map(([key, value], index) =>
-    createGridItem(key, value, index),
+    createGridItem(key, value, index, updateDetailTooltip),
   );
   return html` <div class="metadata-grid">${gridItems}</div>`;
 };
 
-function displayMetadataKey(
+function renderMetadataKey(
   key: MetadataKey,
   value: MetadataValue,
   index: number,
@@ -70,45 +77,50 @@ function displayMetadataKey(
   return html` <div class="metadata-grid-item key">${key}</div>`;
 }
 
-function displayMetadataValue(key: MetadataKey, value: MetadataValue): HTMLTemplateResult {
-  if (key === 'url') {
+function displayMetadataValue(
+  key: MetadataKey,
+  value: MetadataValue,
+  updateDetailTooltip: (newText: string, x: number, y: number) => void,
+): HTMLTemplateResult {
+  if (key === 'url' && typeof value === 'string') {
     // display as clickable link
-    return html` <a href="${value}" target="_blank" class="metadata-grid-item value metadata-link">
-      ${value}
-    </a>`;
-  }
-
-  if (key === 'content' && Array.isArray(value)) {
-    // display as list of clickable links
-    return html` ${value.map(
-      (val) =>
-        html` <a
-          href="${val}"
-          target="_blank"
-          class="metadata-grid-item value content metadata-link"
-        >
-          ${val}
-        </a>`,
-    )}`;
+    const template = html` <a href="${value}" target="_blank" class="metadata-link">${value}</a>`;
+    return copyableMetadataValue(template, value, updateDetailTooltip);
   }
 
   if (Array.isArray(value)) {
-    // display as list
-    return html`${value.map(
-      (val) => html` <div class="metadata-grid-item value content">${val}</div>`,
-    )}`;
+    // Display as a list of clickable links.
+    return html` ${value.map((val) => {
+      const template = html` <a href="${val}" target="_blank" class="content metadata-link"
+        >${val}</a
+      >`;
+      return copyableMetadataValue(template, val, updateDetailTooltip);
+    })}`;
   }
 
   // Display as single value
-  return html` <div class="metadata-grid-item value">${value}</div>`;
+  return copyableMetadataValue(html` <span>${value}</span>`, value, updateDetailTooltip);
+}
+
+function copyableMetadataValue(
+  template: HTMLTemplateResult,
+  value: string,
+  onCopy: (newText: string, x: number, y: number) => void,
+): HTMLTemplateResult {
+  return html`
+    <div class="metadata-grid-item value">${template} ${copyToClipboardButton(value, onCopy)}</div>
+  `;
 }
 
 const createGridItem = (
   key: MetadataKey,
   value: MetadataValue,
   index: number,
+  updateDetailTooltip: (newText: string, x: number, y: number) => void,
 ): HTMLTemplateResult => {
-  return html` ${displayMetadataKey(key, value, index)} ${displayMetadataValue(key, value)} `;
+  return html`
+    ${renderMetadataKey(key, value, index)} ${displayMetadataValue(key, value, updateDetailTooltip)}
+  `;
 };
 
 const emptyMetadataMessage = (): HTMLTemplateResult => {
@@ -124,10 +136,15 @@ const getMetadataFieldsToDisplay = (node: DisplayObject): MetadataTuple[] => {
   // then keep only the fields that should be displayed:
   return Object.entries(normalizedNode)
     .filter(([key, value]) => isDisplayObjectMetadataField(key) && value)
-    .filter(isMetadataTuple);
+    .filter(valueIsAStringOrStringArray);
 };
 
-const isMetadataTuple = (tuple: [string, any]): tuple is MetadataTuple => {
+// This type guard asserts that the tuple's value is a string or string array. We need to narrow this down so that we
+// can handle "content" differently from other fields, making its key cell span multiple rows.
+//
+// It's worth noting that if we ever add a non-string or non-string-array field to DisplayObjectMetadata, this method
+// will need to be updated, because right now it will filter those fields out and keep them from being displayed.
+const valueIsAStringOrStringArray = (tuple: [string, any]): tuple is MetadataTuple => {
   const [_, value] = tuple;
 
   const isString = typeof value === 'string';
diff --git a/packages/widget/src/display-object.ts b/packages/widget/src/display-object.ts
index b739f24a..ee48f7c7 100644
--- a/packages/widget/src/display-object.ts
+++ b/packages/widget/src/display-object.ts
@@ -15,16 +15,16 @@ export interface DisplayObjectMetadata {
   actors?: string;
 }
 
-// DisplayObjects are the widget's internal representation of a node from the graph view.
-// They roughly correspond to a ThingT in the Docmap spec, but with only the fields that we want to display.
+// A DisplayObject is the widget's internal representation of a node in the graph view.
+// This type roughly corresponds to ThingT in the @docmaps/sdk, but with only the fields that we want to display.
 export interface DisplayObject extends DisplayObjectMetadata {
   nodeId: string; // Used internally to construct graph relationships, never rendered
   type: string;
 }
 
-// The following 3 statements allow us to use FieldsToDisplay both as a type and as something we can
-// check against at runtime. We could also use io-ts for this, but that felt like overkill since this
-// is the only place in the widget where we do something like this.
+// The following 3 statements allow us to use FieldsToDisplay both as a type and as something we can check against at
+// runtime. We could use io-ts for this, but that felt like overkill since this is the only place in the widget where we
+// do something like this.
 export type DisplayObjectMetadataField = keyof DisplayObjectMetadata;
 const DisplayObjectMetadataPrototype: { [K in DisplayObjectMetadataField]: null } = {
   doi: null,
@@ -39,8 +39,8 @@ export function isDisplayObjectMetadataField(key: string): key is DisplayObjectM
   return key in DisplayObjectMetadataPrototype;
 }
 
-// Returns a new DisplayObject which has no fields set to the value undefined,
-// meaning the new Display Object can be merged with another DisplayObject via destructuring.
+// Returns a new DisplayObject which has no fields set to the value undefined, meaning the new Display Object can be
+// merged with another DisplayObject via destructuring.
 //
 // Also puts the fields in the order in which they should be displayed.
 export function normalizeDisplayObject(displayObject: DisplayObject): DisplayObject {
@@ -57,6 +57,8 @@ export function normalizeDisplayObject(displayObject: DisplayObject): DisplayObj
   };
 }
 
+// Lets you combine two display objects into one, with the fields of the second object taking precedence.
+// only the first object can be undefined.
 export function mergeDisplayObjects(a: DisplayObject | undefined, b: DisplayObject): DisplayObject {
   return {
     ...(a && normalizeDisplayObject(a)),
@@ -64,7 +66,7 @@ export function mergeDisplayObjects(a: DisplayObject | undefined, b: DisplayObje
   };
 }
 
-// DisplayObjectEdges are the widget's internal representation of an edge connecting two DisplayObjects.
+// DisplayObjectEdges are the widget's internal representation of a connection between two DisplayObjects.
 export type DisplayObjectEdge = {
   sourceId: string;
   targetId: string;
@@ -75,16 +77,23 @@ export type DisplayObjectGraph = {
   edges: DisplayObjectEdge[];
 };
 
-// The appearance of a DisplayObject in the graph view and in the detail view is determined by its 'type' field.
-// The following constants define the possible values of the 'type' field and the appearance that corresponds with each value.
+// The appearance of a DisplayObject in the graph view and in the detail view is determined by its 'type' field. The
+// following constants define the possible values of the 'type' field and the styling that corresponds with each value.
 export type TypeDisplayOption = {
+  // Abbreviation representing the type, e.g. 'R' for 'Review'
   shortLabel: string;
+  // Full, human-readable name of the type, e.g. 'Review'
   longLabel: string;
+  // Background color of the node in the graph view
   backgroundColor: string;
+  // Text color of the node in the graph view
   textColor: string;
-  dottedBorder?: boolean; // whether the node should be rendered with a dotted border
-  detailViewBackgroundColor?: string; // if this is not set, backgroundColor will be used
-  detailViewTextColor?: string; // if this is not set, textColor will be used
+  // whether the node should be rendered with a dotted border in the graph view
+  dottedBorder?: boolean;
+  // Background color of the detail view header. if this is not set, backgroundColor will be used
+  detailViewBackgroundColor?: string;
+  // Text color of the detail view header. if this is not set, textColor will be used
+  detailViewTextColor?: string;
 };
 
 export const TYPE_DISPLAY_OPTIONS: {
diff --git a/packages/widget/src/docmaps-widget.ts b/packages/widget/src/docmaps-widget.ts
index 7c6e1ec8..8c63c6ed 100644
--- a/packages/widget/src/docmaps-widget.ts
+++ b/packages/widget/src/docmaps-widget.ts
@@ -24,6 +24,13 @@ export class DocmapsWidget extends LitElement {
   @state()
   graph?: DisplayObjectGraph;
 
+  @state()
+  detailTooltip: { text: string; x: number; y: number } = {
+    text: '',
+    x: 0,
+    y: 0,
+  };
+
   // We keep track of this because we have to render once before drawing the graph
   // so that D3 has a canvas to draw into.
   #hasRenderedOnce: boolean = false;
@@ -50,9 +57,21 @@ export class DocmapsWidget extends LitElement {
   };
 
   // Method to clear the selected node and go back to the graph view
-  private closeDetailView() {
+  private closeDetailView = () => {
     this.selectedNode = undefined;
-  }
+  };
+
+  private updateDetailTooltip = (newText: string, x: number, y: number) => {
+    // Show the tooltip with the provided text and position
+    this.detailTooltip = {
+      text: newText,
+      x: x,
+      y: y,
+    };
+
+    // Set a timeout to hide the tooltip after 3 seconds
+    setTimeout(() => (this.detailTooltip = { ...this.detailTooltip, text: '' }), 2000);
+  };
 
   render(): HTMLTemplateResult {
     const d3Canvas: HTMLTemplateResult = html` <div id="${GRAPH_CANVAS_ID}"></div>`;
@@ -65,6 +84,23 @@ export class DocmapsWidget extends LitElement {
           <span>DOCMAP</span>
         </div>
         ${d3Canvas} ${content}
+        <div id="graph-tooltip" class="tooltip" style="opacity:0;"></div>
+        ${this.renderDetailTooltip()}
+      </div>
+    `;
+  }
+
+  private renderDetailTooltip() {
+    const { text, x, y } = this.detailTooltip;
+    return html`
+      <div
+        id="detail-tooltip"
+        class="tooltip"
+        style="opacity: ${text ? 1 : 0}; left: ${x}px; top: ${y}px; visibility: ${text
+          ? 'visible'
+          : 'hidden'}"
+      >
+        ${text}
       </div>
     `;
   }
@@ -87,8 +123,6 @@ export class DocmapsWidget extends LitElement {
   };
 
   private graphView() {
-    const tooltip = html` <div id="tooltip" class="tooltip" style="opacity:0;"></div>`;
-
     if (this.graph) {
       if (this.#hasRenderedOnce) {
         // There is a canvas for D3 to draw in! We can render the graph now
@@ -98,11 +132,10 @@ export class DocmapsWidget extends LitElement {
       return html` ${this.#docmapFetchingTask?.render({
         complete: this.onFetchComplete,
         error: (e) => noDocmapFoundScreen(e, this.doi),
-      })}
-      ${tooltip}`;
+      })}`;
     }
 
-    return tooltip;
+    return nothing;
   }
 
   private detailView() {
@@ -120,6 +153,7 @@ export class DocmapsWidget extends LitElement {
       this.graph.nodes,
       this.showDetailViewForNode,
       this.closeDetailView,
+      this.updateDetailTooltip,
     );
   }
 }
diff --git a/packages/widget/src/graph-view.ts b/packages/widget/src/graph-view.ts
index 47667119..e64c8b74 100644
--- a/packages/widget/src/graph-view.ts
+++ b/packages/widget/src/graph-view.ts
@@ -276,6 +276,7 @@ export const clearGraph = (shadowRoot: ShadowRoot | null) => {
 
 const getNodeX = (d: D3Node) => d.x ?? 0;
 const getNodeY = (d: D3Node) => d.y ?? 0;
+
 export const setUpTooltips = (
   selection: d3.Selection<any, D3Node, SVGGElement, unknown>,
   shadowRoot: ShadowRoot | null,
@@ -284,7 +285,7 @@ export const setUpTooltips = (
     return;
   }
 
-  const tooltip = d3.select(shadowRoot.querySelector('#tooltip'));
+  const tooltip = d3.select(shadowRoot.querySelector('#graph-tooltip'));
 
   selection
     .on('mouseover', function (event, d) {
@@ -292,7 +293,7 @@ export const setUpTooltips = (
         .html(() => TYPE_DISPLAY_OPTIONS[d.type].longLabel)
         .style('visibility', 'visible')
         .style('opacity', 1)
-        .style('left', `${event.pageX + 5}px`) // Position the tooltip at the mouse location
+        .style('left', `${event.pageX}px`) // Position the tooltip at the mouse location
         .style('top', `${event.pageY - 28}px`);
     })
     .on('mouseout', () => {
@@ -306,8 +307,27 @@ export const setupInteractivity = (
   shadowRoot: ShadowRoot | null,
   onNodeClick: (node: DisplayObject) => void,
 ) => {
-  nodeElements.on('click', (_event, d: D3Node) => onNodeClick(d));
-  labels.on('click', (_event, d: D3Node) => onNodeClick(d));
+  if (!shadowRoot) {
+    return;
+  }
+
+  const tooltip = d3.select(shadowRoot.querySelector('#graph-tooltip'));
+
+  nodeElements.on('click', (_event, d: D3Node) => {
+    // Hide the tooltip first
+    tooltip.style('visibility', 'hidden').style('opacity', 0);
+
+    // Then handle the node click
+    onNodeClick(d);
+  });
+
+  labels.on('click', (_event, d: D3Node) => {
+    // Hide the tooltip first
+    tooltip.style('visibility', 'hidden').style('opacity', 0);
+
+    // Then handle the node click
+    onNodeClick(d);
+  });
 
   setUpTooltips(nodeElements, shadowRoot);
   setUpTooltips(labels, shadowRoot);
diff --git a/packages/widget/src/styles.ts b/packages/widget/src/styles.ts
index d14de27e..779a6d99 100644
--- a/packages/widget/src/styles.ts
+++ b/packages/widget/src/styles.ts
@@ -22,7 +22,7 @@ export const customCss: CSSResult = css`
         -ms-user-select: none; /* IE10+/Edge */
         user-select: none; /* Standard */
     }
-    
+
     .not-found-message {
         margin-top: 121px;
         font-family: 'IBM Plex Mono', monospace;
@@ -31,7 +31,7 @@ export const customCss: CSSResult = css`
         text-align: center;
         color: #777777;
     }
-    
+
     .not-found-message p {
         margin: 0;
     }
@@ -115,15 +115,17 @@ export const customCss: CSSResult = css`
 
     .metadata-grid {
         max-height: 100%;
+        max-width: 100%;
         display: grid;
-        grid-template-columns: 131px 369px;
+        grid-template-columns: 131px auto;
         grid-gap: 0;
         overflow-y: scroll;
+        overflow-x: hidden;
     }
 
     .metadata-grid-item {
         min-height: 47px;
-        max-width: 369px;
+        max-width: 100%;
         display: flex;
         align-items: center;
         justify-content: flex-start;
@@ -142,11 +144,14 @@ export const customCss: CSSResult = css`
 
     .metadata-grid-item.value {
         font-weight: 300;
-        max-width: 369px;
-        padding-right: 46px;
+        padding-right: 25px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
     }
 
-    .metadata-grid-item.value.content {
+    .metadata-grid-item.value .content {
         font-size: 12px;
         font-style: italic;
         font-weight: 300;
@@ -156,6 +161,7 @@ export const customCss: CSSResult = css`
     }
 
     .metadata-link {
+        max-width: 89%;
         color: inherit;
         text-decoration: underline;
         cursor: pointer;
@@ -165,6 +171,11 @@ export const customCss: CSSResult = css`
         color: #C1C1C1;
     }
 
+
+    .copy-to-clipboard-button:hover .copy-to-clipboard-button-path {
+        fill: #474747;
+    }
+
     .detail-header .close-button {
         margin-right: 25px;
         display: flex;
@@ -186,7 +197,7 @@ export const customCss: CSSResult = css`
         display: inline-block;
         margin: 7px 13px 6px 11px
     }
-    
+
     .not-found-screen {
         display: flex;
         flex-direction: column;
diff --git a/packages/widget/test/integration/docmaps-widget.test.ts b/packages/widget/test/integration/docmaps-widget.test.ts
index a2fba0ff..23f46ffe 100644
--- a/packages/widget/test/integration/docmaps-widget.test.ts
+++ b/packages/widget/test/integration/docmaps-widget.test.ts
@@ -90,15 +90,21 @@ test('Tooltips appear on mouseover', async ({ page, browserName }) => {
     docmapWithMultipleSteps,
   );
 
-  await assertTooltipAppearsOnHover(widget, widget.locator('.node').first(), 'Preprint');
-  await assertTooltipAppearsOnHover(widget, widget.locator('.node').nth(3), 'Reply');
+  await assertGraphTooltipAppearsOnHover(widget, widget.locator('.node').first(), 'Preprint');
+  await assertGraphTooltipAppearsOnHover(widget, widget.locator('.node').nth(3), 'Reply');
 
   if (browserName !== 'webkit') {
     // TODO for some reason this test fails on webkit even though the functionality does work on Safari.
     // This behavior is not important enough to spend time debugging right now.
-    await assertTooltipAppearsOnHover(widget, widget.locator('.label').first(), 'Preprint');
-    await assertTooltipAppearsOnHover(widget, widget.locator('.label').nth(3), 'Reply');
+    await assertGraphTooltipAppearsOnHover(widget, widget.locator('.label').first(), 'Preprint');
+    await assertGraphTooltipAppearsOnHover(widget, widget.locator('.label').nth(3), 'Reply');
   }
+
+  // tooltips should still appear after the details pane is opened and then closed
+  const nodeToClick = widget.locator('.node').first();
+  await nodeToClick.click({ force: true });
+  await widget.locator('.close-button').click({ force: true });
+  await assertGraphTooltipAppearsOnHover(widget, widget.locator('.node').nth(3), 'Reply');
 });
 
 test(`Can display details view for a Preprint with every field`, async ({ page }) => {
@@ -363,14 +369,14 @@ test('When the docmap cannot be found, the empty screen is shown', async ({ page
   await expect(widget).toContainText('No data found for DOI unknown-doi');
 });
 
-async function assertTooltipAppearsOnHover(
+async function assertGraphTooltipAppearsOnHover(
   widget: Locator,
   thingToHoverOver: Locator,
   expectedTooltipText: string,
 ) {
   await thingToHoverOver.hover({ trial: false, force: true });
 
-  const tooltip = widget.locator('#tooltip');
+  const tooltip = widget.locator('#graph-tooltip');
   await expect(tooltip).toBeVisible();
   await expect(tooltip).toHaveText(expectedTooltipText);