makes tooltip work with DOM element as an inpput

src/app/files/fileManager.js

@@ -149,7 +149,13 @@ class FileManager extends FileSystemApi {
         }}>Save As Copy</button>
         </div>`
       }
-      await toaster(yo`<div><i class="fas fa-exclamation-triangle text-info mr-1"></i><span class="text-primary">${this.currentRequest.from}</span> is modyfing <span class="text-primary">${path}</span></div>`, actions, { time: 4000 })
+      await toaster(yo`
+        <div>
+          <i class="fas fa-exclamation-triangle text-danger mr-1"></i>
+          <span>
+            ${this.currentRequest.from}<span class="text-warning"> is modyfing </span>${path}
+          </span>
+        </div>`, actions, { time: 4000 })
       if (reject) throw new Error(`set file operation on ${path} aborted by user.`)
       if (savedAsAnotherFile) return
     }

src/app/ui/tooltip.js

@@ -24,33 +24,38 @@ class Toaster {
   }
   render (tooltipText, action, opts) {
     opts = defaultOptions(opts)
-
+    let canShorten = true
-    if (typeof tooltipText === 'object') {
+    if (tooltipText instanceof Element)
-      if (tooltipText.message) {
+    {
-        tooltipText = tooltipText.message
+      canShorten = false
-      } else {
+    } else {
-        try {
+      if (typeof tooltipText === 'object') {
-          tooltipText = JSON.stringify(tooltipText)
+        if (tooltipText.message) {
-        } catch (e) {
+          tooltipText = tooltipText.message
+        } else {
+          try {
+            tooltipText = JSON.stringify(tooltipText)
+          } catch (e) {
+          }
         }
       }
     }
 
     return new Promise((resolve, reject) => {
-      const shortTooltipText = tooltipText.length > 201 ? tooltipText.substring(0, 200) + '...' : tooltipText
+      const shortTooltipText = (canShorten && tooltipText.length > 201) ? tooltipText.substring(0, 200) + '...' : tooltipText
 
       let button = tooltipText.length > 201 ? yo`
       <button class="btn btn-secondary btn-sm" onclick=${() => { modal.alert(tooltipText) }}>show full message</button>
       ` : ``
 
       this.tooltip = yo`
-    <div class="${css.tooltip} alert alert-info" onmouseenter=${() => { over() }} onmouseleave=${() => { out() }}>
+        <div class="${css.tooltip} alert alert-info" onmouseenter=${() => { over() }} onmouseleave=${() => { out() }}>
-      <span>
+          <span>
-        ${shortTooltipText}
+            ${shortTooltipText}
-        ${button}
+            ${button}
-      </span>
+          </span>
-      ${action}
+          ${action}
-    </div>`
+        </div>`
       let timeOut = () => {
         return setTimeout(() => {
           if (this.id) {