diff --git a/src/public/app/widgets/button_widget.js b/src/public/app/widgets/button_widget.js
index 6c567cc37..83ac19f41 100644
--- a/src/public/app/widgets/button_widget.js
+++ b/src/public/app/widgets/button_widget.js
@@ -2,6 +2,8 @@ import BasicWidget from "./basic_widget.js";
 
 const TPL = `
 <span class="button-widget" 
+      data-toggle="tooltip"
+      data-placement="right"
       title="">
     <span class="bx"></span>
 </span>
@@ -20,6 +22,11 @@ export default class ButtonWidget extends BasicWidget {
 
         this.$widget.on("click", () => this.triggerCommand(this.settings.command));
 
+        this.$widget.tooltip({
+            html: true,
+            title: () => this.settings.title
+        });
+
         super.doRender();
     }
 
diff --git a/src/public/app/widgets/sync_status.js b/src/public/app/widgets/sync_status.js
index a0313b95c..feaa6cbd9 100644
--- a/src/public/app/widgets/sync_status.js
+++ b/src/public/app/widgets/sync_status.js
@@ -42,28 +42,34 @@ const TPL = `
     <div class="sync-status">
         <span class="sync-status-icon sync-status-unknown bx bx-time" 
               data-toggle="tooltip" 
+              data-placement="right"
               title="<p>Sync status will be known once the next sync attempt starts.</p><p>Click to trigger sync now.</p>">
         </span>
         <span class="sync-status-icon sync-status-connected-with-changes bx-wifi"
               data-toggle="tooltip" 
+              data-placement="right"
               title="<p>Connected to the sync server. <br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>">
             <span class="bx bxs-star sync-status-sub-icon"></span>
         </span>
         <span class="sync-status-icon sync-status-connected-no-changes bx bx-wifi" 
               data-toggle="tooltip" 
+              data-placement="right"
               title="<p>Connected to the sync server.<br>All changes have been already synced.</p><p>Click to trigger sync.</p>">
         </span>
         <span class="sync-status-icon sync-status-disconnected-with-changes bx bx-wifi-off"
               data-toggle="tooltip" 
+              data-placement="right"
               title="<p>Establishing the connection to the sync server was unsuccessful.<br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>">
             <span class="bx bxs-star sync-status-sub-icon"></span>
         </span>
         <span class="sync-status-icon sync-status-disconnected-no-changes bx bx-wifi-off" 
               data-toggle="tooltip"
+              data-placement="right"
               title="<p>Establishing the connection to the sync server was unsuccessful.<br>All known changes have been synced.</p><p>Click to trigger sync.</p>">
         </span>
         <span class="sync-status-icon sync-status-in-progress bx bx-analyse bx-spin" 
               data-toggle="tooltip"
+              data-placement="right"
               title="Sync with the server is in progress.">
         </span>
     </div>
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 9572534b4..5bafbcf3c 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -848,7 +848,7 @@ body {
     background-color: inherit;
 }
 
-[data-toggle="tooltip"] span {
+[data-toggle="tooltip"]:not(.button-widget) span {
     padding-bottom: 0;
     border-bottom: 1px dotted;
 }