tooltip

update

src/Color.php

@@ -103,11 +103,11 @@ class Color
         'white50' => 'hsla(0,0%,100%,.5)',
 
          // 其他蓝色
-        'blue-1' => '#007ee5',
-        'blue-2' => '#4199de',
+        'blue1' => '#007ee5',
+        'blue2' => '#4199de',
 
         // 淡黄色
-        'orange-1' => '#ffcc80',
+        'orange1' => '#ffcc80',
 
         'indigo-darker' => '#495abf',
         'red-darker'    => '#bd4147',

src/Grid/Column/HasHeader.php

@@ -121,7 +121,7 @@ trait HasHeader
      *
      * @return $this
      */
-    public function help($message, ?string $style = null, ?string $placement = 'top')
+    public function help($message, ?string $style = null, ?string $placement = null)
     {
         return $this->addHeader(new Help($message, $style, $placement));
     }

src/Grid/Column/Help.php

@@ -28,7 +28,7 @@ class Help implements Renderable
      *
      * @param string $message
      */
-    public function __construct($message = '', ?string $style = null, ?string $placement = 'bottom')
+    public function __construct($message = '', ?string $style = null, ?string $placement = null)
     {
         $this->message = value($message);
         $this->style = $style;
@@ -54,10 +54,8 @@ class Help implements Renderable
             $tooltip->{$this->placement}();
         }
 
-        $tooltip->title($this->message);
-
         return <<<HELP
-&nbsp;<a href="javascript:void(0);" class="{$class} feather icon-alert-circle" ></a>
+&nbsp;<a href="javascript:void(0);" class="{$class} feather icon-alert-circle" data-title="{$this->message}"></a>
 HELP;
     }
 }

src/Grid/ComplexHeader.php

@@ -102,7 +102,7 @@ class ComplexHeader extends Widget
      *
      * @return $this
      */
-    public function help($message, ?string $style = null, ?string $placement = 'bottom')
+    public function help($message, ?string $style = null, ?string $placement = null)
     {
         return $this->append((new Help($message, $style, $placement))->render());
     }

src/Widgets/Tooltip.php

@@ -11,15 +11,13 @@ class Tooltip extends Widget
 
     protected $selector;
 
+    protected $title;
+
     protected $background;
 
-    protected $maxWidth;
+    protected $maxWidth = 210;
 
-    protected $options = [
-        'title'     => '',
-        'html'      => true,
-        'placement' => 'top',
-    ];
+    protected $placement = 1;
 
     protected $built;
 
@@ -37,7 +35,7 @@ class Tooltip extends Widget
         return $this;
     }
 
-    public function maxWidth(string $width)
+    public function maxWidth(int $width)
     {
         $this->maxWidth = $width;
 
@@ -51,7 +49,7 @@ class Tooltip extends Widget
      */
     public function title($content)
     {
-        $this->options['title'] = $this->toString($content);
+        $this->title = $this->toString($content);
 
         return $this;
     }
@@ -103,26 +101,43 @@ class Tooltip extends Widget
         return $this->placement('bottom');
     }
 
-    public function placement(string $val = 'left')
+    public function placement(string $placement = 'auto')
     {
-        $this->options['placement'] = $val;
+        $map = [
+            'top'    => 1,
+            'right'  => 2,
+            'bottom' => 3,
+            'left'   => 4,
+        ];
 
-        return $this;
-    }
+        $this->placement = $map[$placement] ?? 1;
 
-    protected function setupStyle()
-    {
-        Admin::style(static::$style);
-        if ($this->maxWidth) {
-            Admin::style(".tooltip-inner{max-width:{$this->maxWidth}}");
-        }
+        return $this;
     }
 
     protected function setupScript()
     {
-        $opts = json_encode($this->options, JSON_UNESCAPED_UNICODE);
-
-        Admin::script("$('{$this->selector}').tooltip({$opts});");
+        $background = $this->background ?: Admin::color()->blue2(-5);
+        $title = $this->title;
+
+        Admin::script(
+            <<<JS
+$('{$this->selector}').on('mouseover', function () {
+    var title = '{$title}' || $(this).data('title');
+    var idx = layer.tips(title, this, {
+      tips: ['{$this->placement}', '{$background}'],
+      time: 0,
+      maxWidth: {$this->maxWidth},
+    });
+    
+    $(this).attr('layer-idx', idx);
+}).on('mouseleave', function () {
+    layer.close($(this).attr('layer-idx'));
+    
+    $(this).attr('layer-idx', '');
+});
+JS
+        );
     }
 
     public function render()
@@ -132,15 +147,6 @@ class Tooltip extends Widget
         }
         $this->built = true;
 
-        $background = $this->background ?: Admin::color()->primary();
-
-        $this->defaultHtmlAttribute('class', 'tooltip-inner');
-        $this->style('background:'.$background, true);
-
-        $this->options['template'] =
-            "<div class='tooltip' role='tooltip'><div class='tooltip-arrow' style='border-{$this->options['placement']}-color:{$background}'></div><div {$this->formatHtmlAttributes()}></div></div>";
-
-        $this->setupStyle();
         $this->setupScript();
     }
 }