feat: make datatips look like the linter tooltips

Author: aminya

lib/datatip-manager.ts

@@ -425,7 +425,10 @@ export class DataTipManager {
     position: Point,
     view: ViewContainer
   ): CompositeDisposable | null {
-    const element = view.element as HTMLElement
+    const element = document.createElement("div")
+    element.className = "datatip-border"
+
+    element.appendChild(view.element as HTMLElement)
 
     // TODO do we need this?
     if (!element) {

styles/atom-ide-datatips.less

@@ -1,7 +1,17 @@
 @import "ui-variables";
 @import "syntax-variables";
 
+// .datatip-overlay {
+// }
+
+.datatip-border {
+  background: @overlay-background-color;
+  padding: 10px;
+}
+
 .datatip-element {
+  .datatip-responsive-effect();
+
   overflow: auto; // prevents the long text to come out of the datatip
   color: @syntax-text-color;
   white-space: nowrap;
@@ -38,15 +48,16 @@
   width: auto;
 }
 
-.datatip-overlay {
+.datatip-responsive-effect() {
+  margin-left: 5px;
   // info border
-  border-bottom: 5px solid @background-color-highlight;
+  border-left: 5px solid @background-color-highlight;
   border-radius: 3px;
 
   // info bar glow
-  transition: border-bottom-color 0.15s ease;
+  transition: border-left-color 0.15s ease;
   &:hover {
-    border-bottom-color: lighten(@background-color-highlight, 10%);
+    border-left-color: lighten(@background-color-highlight, 10%);
   }
 }