diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js
index 8f3ddb2d6..cb7d761d7 100644
--- a/dist/leaflet.distortableimage.js
+++ b/dist/leaflet.distortableimage.js
@@ -464,7 +464,9 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     edgeMinWidth: 50,
     editable: true,
     mode: 'distort',
-    selected: false
+    selected: false,
+    interactive: true,
+    tooltipText: ''
   },
   initialize: function initialize(url, options) {
     L.setOptions(this, options);
@@ -474,6 +476,8 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     this._selected = this.options.selected;
     this._url = url;
     this.rotation = {};
+    this.interactive = this.options.interactive;
+    this.tooltipText = this.options.tooltipText;
   },
   onAdd: function onAdd(map) {
     var _this = this;
@@ -555,6 +559,8 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     }
 
     this.fire('add');
+    L.DomEvent.on(this.getElement(), 'mousemove', this.activateTooltip, this);
+    L.DomEvent.on(this.getElement(), 'mouseout', this.closeTooltip, this);
   },
   onRemove: function onRemove(map) {
     L.DomEvent.off(this.getElement(), 'click', this.select, this);
@@ -571,6 +577,8 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
 
     this.fire('remove');
     L.ImageOverlay.prototype.onRemove.call(this, map);
+    L.DomEvent.on(this.getElement(), 'mouseout', this.closeTooltip, this);
+    L.DomEvent.off(this.getElement(), 'mousemove', this.deactivateTooltip, this);
   },
   _initImageDimensions: function _initImageDimensions() {
     var map = this._map;
@@ -698,6 +706,19 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
       return exceedsTop || exceedsBottom;
     }
   },
+  activateTooltip: function activateTooltip() {
+    if (!this._selected) {
+      this.bindTooltip(this.tooltipText, {
+        direction: 'top'
+      }).openTooltip();
+    }
+  },
+  closeToolTip: function closeToolTip() {
+    this.closeTooltip();
+  },
+  deactivateTooltip: function deactivateTooltip() {
+    this.unbindTooltip();
+  },
   setCorners: function setCorners(latlngObj) {
     var map = this._map;
     var zoom = map.getZoom();
@@ -1883,14 +1904,12 @@ L.DistortableImage.Edit = L.Handler.extend({
   _toggleOpacity: function _toggleOpacity() {
     var image = this._overlay.getElement();
 
-    var opacity;
-
     if (!this.hasTool(L.OpacityAction)) {
       return;
     }
 
     this._transparent = !this._transparent;
-    opacity = this._transparent ? this.options.opacity : 1;
+    var opacity = this._transparent ? this.options.opacity : 1;
     L.DomUtil.setOpacity(image, opacity);
     image.setAttribute('opacity', opacity);
 
@@ -1899,14 +1918,12 @@ L.DistortableImage.Edit = L.Handler.extend({
   _toggleBorder: function _toggleBorder() {
     var image = this._overlay.getElement();
 
-    var outline;
-
     if (!this.hasTool(L.BorderAction)) {
       return;
     }
 
     this._outlined = !this._outlined;
-    outline = this._outlined ? this.options.outline : 'none';
+    var outline = this._outlined ? this.options.outline : 'none';
     image.style.outline = outline;
 
     this._refresh();
@@ -7269,7 +7286,7 @@ module.exports.formatError = function (err) {
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "d06aea7ce8d056523b19"; }
+/******/ 		__webpack_require__.h = function() { return "1d513f6e6ef4497721d3"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
diff --git a/examples/archive.html b/examples/archive.html
index d27604f1c..c5a798a53 100644
--- a/examples/archive.html
+++ b/examples/archive.html
@@ -65,8 +65,8 @@ <h2 class="modal-title">Welcome to MapKnitter Lite</h2>
   <div class="offcanvas offcanvas-end" data-bs-backdrop="false" data-bs-keyboard="false" tabindex="1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
       <div class="offcanvas-header">
         <h3 id="offcanvasRightLabel">Images</h3>
-        <button type="button" id="restoreWelcomeModalBtn" class="btn btn-primary" data-bs-dismiss="offcanvas" aria-label="Close">Get Image</button>
-        <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas" aria-label="Close">View Map</button>
+        <button type="button" id="restoreWelcomeModalBtn" class="btn btn-primary btn-sm" data-bs-dismiss="offcanvas" aria-label="Close">Get Image</button>
+        <button type="button" class="btn btn-primary btn-sm" data-bs-dismiss="offcanvas" aria-label="Close">View Map</button>
       </div>
       <hr>
       <div class="offcanvas-body">
diff --git a/examples/js/archive.js b/examples/js/archive.js
index 2a6ddd04c..41d2671d0 100644
--- a/examples/js/archive.js
+++ b/examples/js/archive.js
@@ -47,7 +47,6 @@ function extractKey() {
   else if (input.value.includes('http://')) {
     getUrl = input.value.replace('http:', 'https:');
     input.value = getUrl;
-    console.log('input', input.value);
     showImages(getUrl);
   }
   else
@@ -60,7 +59,6 @@ function extractKey() {
 let imageCount = 0;
 let fetchedFrom;
 
-
 const renderImages = (fullResImages, url) => {
   fullResImages.forEach((file) => {
     const imageRow = document.createElement('div');
@@ -110,6 +108,11 @@ const renderThumbnails = (thumbnails = [], url, fullResImgs) => {
     placeButton.innerHTML = 'Place';
     placeButton.setAttribute('title', 'Place image on map');
 
+    // store the full-resolution image URL in a "data-original" attribute
+    image.setAttribute('data-original', `${url.replace('metadata', 'download')}/${thumbnails ? file.original : file.name}`);
+    image.src = `${url.replace('metadata', 'download')}/${file.name}`;
+    imageRow.classList.add('col-4', 'd-flex', 'flex-column', 'p-2', 'align-items-center');
+    imageRow.append(image, placeButton, fileName);
     // store the full-resolution image URL in a "data-original" attribute
     image.setAttribute('data-original', `${url.replace('metadata', 'download')}/${thumbnails ? file.original : file.name}`);
     image.src = `${url.replace('metadata', 'download')}/${file.name}`;
@@ -117,6 +120,7 @@ const renderThumbnails = (thumbnails = [], url, fullResImgs) => {
     imageRow.append(image, placeButton, fileName);
     imageContainer.appendChild(imageRow);
     imageContainer.setAttribute('class', 'row');
+    imageContainer.setAttribute('class', 'row');
     imageCount++;
   });
 };
@@ -172,10 +176,23 @@ tileMap.addEventListener('click', (event) => {
   bootstrap.Offcanvas.getInstance(sidebar).hide();
 });
 
+function getImageName(imageURL) {
+  startIndex = imageURL.lastIndexOf('/') + 1;
+  endIndex = imageURL.lastIndexOf('.');
+  const imageName = imageURL.substring(startIndex, endIndex);
+
+  return imageName;
+}
+
 document.addEventListener('click', (event) => {
   if (event.target.classList.contains('place-button')) {
-    const imageURL = event.target.previousElementSibling.dataset.original;
-    const image = L.distortableImageOverlay(imageURL);
+    const imageURL = event.target.previousElementSibling.src;
+    const imageTooltipText = getImageName(imageURL);
+
+    const image = L.distortableImageOverlay(
+        imageURL,
+        {tooltipText: imageTooltipText}
+    );
     map.imgGroup.addLayer(image);
   }
 });
diff --git a/src/DistortableCollection.js b/src/DistortableCollection.js
index 75d43026b..bce3b9116 100644
--- a/src/DistortableCollection.js
+++ b/src/DistortableCollection.js
@@ -34,7 +34,6 @@ L.DistortableCollection = L.FeatureGroup.extend({
 
   onRemove() {
     if (this.editing) { this.editing.disable(); }
-
     this.off('layeradd', this._addEvents, this);
     this.off('layerremove', this._removeEvents, this);
   },
diff --git a/src/DistortableImageOverlay.js b/src/DistortableImageOverlay.js
index dc79e03d7..29b3f9d71 100644
--- a/src/DistortableImageOverlay.js
+++ b/src/DistortableImageOverlay.js
@@ -8,6 +8,8 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     editable: true,
     mode: 'distort',
     selected: false,
+    interactive: true,
+    tooltipText: '',
   },
 
   initialize(url, options) {
@@ -19,6 +21,9 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     this._selected = this.options.selected;
     this._url = url;
     this.rotation = {};
+
+    this.interactive = this.options.interactive;
+    this.tooltipText = this.options.tooltipText;
   },
 
   onAdd(map) {
@@ -81,6 +86,9 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     }
 
     this.fire('add');
+
+    L.DomEvent.on(this.getElement(), 'mousemove', this.activateTooltip, this);
+    L.DomEvent.on(this.getElement(), 'mouseout', this.closeTooltip, this);
   },
 
   onRemove(map) {
@@ -96,6 +104,9 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     this.fire('remove');
 
     L.ImageOverlay.prototype.onRemove.call(this, map);
+
+    L.DomEvent.on(this.getElement(), 'mouseout', this.closeTooltip, this);
+    L.DomEvent.off(this.getElement(), 'mousemove', this.deactivateTooltip, this);
   },
 
   _initImageDimensions() {
@@ -227,6 +238,20 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     }
   },
 
+  activateTooltip() {
+    if (!this._selected) {
+      this.bindTooltip(this.tooltipText, {direction: 'top'}).openTooltip();
+    }
+  },
+
+  closeToolTip() {
+    this.closeTooltip();
+  },
+
+  deactivateTooltip() {
+    this.unbindTooltip();
+  },
+
   setCorners(latlngObj) {
     const map = this._map;
     const zoom = map.getZoom();