From 7be85acf117de1f42dfe23fb9011de312523dffb Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Wed, 14 Nov 2018 10:36:14 +0100
Subject: [PATCH] mitigation of tooltip flicker by making tooltip smaller

---
 src/public/javascripts/services/tooltip.js |  1 -
 src/public/stylesheets/style.css           | 10 ++++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/public/javascripts/services/tooltip.js b/src/public/javascripts/services/tooltip.js
index d27a7dad0..36273e4cb 100644
--- a/src/public/javascripts/services/tooltip.js
+++ b/src/public/javascripts/services/tooltip.js
@@ -106,7 +106,6 @@ async function renderTooltip(note, attributes) {
     else if (note.type === 'image') {
         content += $("<img>")
             .prop("src", `/api/images/${note.noteId}/${note.title}`)
-            .prop("style", "max-width: 300px; max-height: 300px;")
             .prop('outerHTML');
     }
     // other types of notes don't have tooltip preview
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 08c262ffb..64184cd71 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -500,14 +500,20 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
 
 .tooltip-inner {
     background-color: #fbfbfb !important;
-    max-width: 600px;
-    max-height: 500px;
+    max-width: 400px;
+    /* height needs to stay small because tooltip has problem when it can't fit to either top or bottom of the cursor */
+    max-height: 300px;
     overflow: hidden;
     color: black;
     border: 1px solid #aaa;
     text-align: left;
 }
 
+.tooltip-inner img {
+    max-width: 250px;
+    max-height: 250px;
+}
+
 .tooltip.show {
     opacity: 1;
 }