diff --git a/src/assets/scss/_hint.scss b/src/assets/scss/_hint.scss
index d9fbbb8d9..58c12451f 100644
--- a/src/assets/scss/_hint.scss
+++ b/src/assets/scss/_hint.scss
@@ -25,8 +25,8 @@
   }
 
   button {
+    display: flex;
     color: var(--toolbar-icon-color);
-    display: block;
     padding: 3px 10px;
     border: 0;
     border-radius: 0;
diff --git a/src/assets/scss/_panel.scss b/src/assets/scss/_panel.scss
index 03f4e93cf..9f3d9fa4c 100644
--- a/src/assets/scss/_panel.scss
+++ b/src/assets/scss/_panel.scss
@@ -5,10 +5,21 @@
  * @version 1.0.0.0, Jan 22, 2020
  */
 
+@-webkit-keyframes scale-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @keyframes scale-in {
   0% {
     opacity: 0;
-    transform: scale(.5);
+    transform: scale(0.5);
   }
   100% {
     opacity: 1;
@@ -26,21 +37,33 @@
     z-index: 3;
     font-size: 14px;
     display: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     max-width: 320px;
     min-width: 80px;
-    animation-duration: .15s;
+    -webkit-animation-duration: 0.15s;
+    animation-duration: 0.15s;
+    -webkit-animation-name: scale-in;
     animation-name: scale-in;
-    animation-timing-function: cubic-bezier(.2, 0, .13, 1.5);
+    -webkit-animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
+    animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
     color: var(--toolbar-icon-color);
 
     &--none {
       padding: 0;
+      -webkit-animation: none;
       animation: none;
       min-width: auto;
       max-width: none;
       white-space: nowrap;
-      opacity: .86;
+      opacity: 0.86;
+    }
+
+    &--arrow {
+      display: none;
+      flex-direction: column;
     }
 
     &--arrow:before {
@@ -108,3 +131,11 @@
     }
   }
 }
+
+.vditor[dir="rtl"] {
+  &-panel {
+    &--arrow:before {
+      right: 5px !important;
+    }
+  }
+}
diff --git a/src/assets/scss/_toolbar.scss b/src/assets/scss/_toolbar.scss
index 708bdf017..1d3b152b9 100644
--- a/src/assets/scss/_toolbar.scss
+++ b/src/assets/scss/_toolbar.scss
@@ -1,5 +1,6 @@
 .vditor {
   &-toolbar {
+    display: flex;
     background-color: var(--toolbar-background-color);
     border-bottom: 1px solid var(--border-color);
     padding: 0 5px;
diff --git a/src/ts/toolbar/setToolbar.ts b/src/ts/toolbar/setToolbar.ts
index bd2bb34dd..4c6c0c5b8 100644
--- a/src/ts/toolbar/setToolbar.ts
+++ b/src/ts/toolbar/setToolbar.ts
@@ -66,7 +66,7 @@ export const showToolbar = (toolbar: { [key: string]: HTMLElement }, names: stri
             return;
         }
         if (toolbar[name]) {
-            toolbar[name].style.display = "block";
+            toolbar[name].style.display = "flex";
         }
     });
 };
@@ -102,14 +102,14 @@ export const toggleSubMenu = (vditor: IVditor, panelElement: HTMLElement, action
         vditor.toolbar.element.querySelectorAll(".vditor-hint--current").forEach((item) => {
             item.classList.remove("vditor-hint--current");
         });
-        if (panelElement.style.display === "block") {
+        if (panelElement.style.display === "flex") {
             panelElement.style.display = "none";
         } else {
             hidePanel(vditor, ["subToolbar", "hint", "popover"], actionBtn.parentElement.parentElement);
             if (!actionBtn.classList.contains("vditor-tooltipped")) {
                 actionBtn.classList.add("vditor-hint--current");
             }
-            panelElement.style.display = "block";
+            panelElement.style.display = "flex";
             if (vditor.toolbar.element.getBoundingClientRect().right - actionBtn.getBoundingClientRect().right < 250) {
                 panelElement.classList.add("vditor-panel--left");
             } else {