|
@@ -3,14 +3,15 @@
|
|
|
namespace Dcat\Admin\Widgets;
|
|
|
|
|
|
use Dcat\Admin\Admin;
|
|
|
+use Illuminate\Contracts\Support\Renderable;
|
|
|
|
|
|
class Tooltip extends Widget
|
|
|
{
|
|
|
- public static $style = '.tooltip-inner{padding:7px 13px;border-radius:2px;font-size:13px;max-width:250px}';
|
|
|
+ protected static $style = '.tooltip-inner{padding:7px 13px;border-radius:2px;font-size:13px;max-width:250px}';
|
|
|
|
|
|
protected $selector;
|
|
|
|
|
|
- protected $bg;
|
|
|
+ protected $background;
|
|
|
|
|
|
protected $maxWidth;
|
|
|
|
|
@@ -20,32 +21,22 @@ class Tooltip extends Widget
|
|
|
'placement' => 'top',
|
|
|
];
|
|
|
|
|
|
- public function __construct($selector = null)
|
|
|
+ protected $built;
|
|
|
+
|
|
|
+ public function __construct(string $selector = '')
|
|
|
{
|
|
|
$this->selector($selector);
|
|
|
|
|
|
$this->autoRender();
|
|
|
}
|
|
|
|
|
|
- /**
|
|
|
- * @param $selector
|
|
|
- *
|
|
|
- * @return $this
|
|
|
- */
|
|
|
- public function selector($selector)
|
|
|
+ public function selector(string $selector)
|
|
|
{
|
|
|
$this->selector = $selector;
|
|
|
|
|
|
return $this;
|
|
|
}
|
|
|
|
|
|
- /**
|
|
|
- * Set max width for tooltip.
|
|
|
- *
|
|
|
- * @param string $width
|
|
|
- *
|
|
|
- * @return $this
|
|
|
- */
|
|
|
public function maxWidth(string $width)
|
|
|
{
|
|
|
$this->maxWidth = $width;
|
|
@@ -54,29 +45,20 @@ class Tooltip extends Widget
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * Set tooltip content.
|
|
|
- *
|
|
|
- * @param $content
|
|
|
+ * @param string|Renderable|\Closure $content
|
|
|
*
|
|
|
* @return $this
|
|
|
*/
|
|
|
- public function content($content)
|
|
|
+ public function title($content)
|
|
|
{
|
|
|
$this->options['title'] = $this->toString($content);
|
|
|
|
|
|
return $this;
|
|
|
}
|
|
|
|
|
|
- /**
|
|
|
- * Set the backgroud of tooltip.
|
|
|
- *
|
|
|
- * @param string $color
|
|
|
- *
|
|
|
- * @return $this
|
|
|
- */
|
|
|
public function background(string $color)
|
|
|
{
|
|
|
- $this->bg = $color;
|
|
|
+ $this->background = $color;
|
|
|
|
|
|
return $this;
|
|
|
}
|
|
@@ -101,53 +83,26 @@ class Tooltip extends Widget
|
|
|
return $this->background(Color::purple());
|
|
|
}
|
|
|
|
|
|
- /**
|
|
|
- * Tooltip on left.
|
|
|
- *
|
|
|
- * @return $this
|
|
|
- */
|
|
|
public function left()
|
|
|
{
|
|
|
return $this->placement('left');
|
|
|
}
|
|
|
|
|
|
- /**
|
|
|
- * Tooltip on right.
|
|
|
- *
|
|
|
- * @return $this
|
|
|
- */
|
|
|
public function right()
|
|
|
{
|
|
|
return $this->placement('right');
|
|
|
}
|
|
|
|
|
|
- /**
|
|
|
- * Tooltip on top.
|
|
|
- *
|
|
|
- * @return $this
|
|
|
- */
|
|
|
public function top()
|
|
|
{
|
|
|
return $this->placement('top');
|
|
|
}
|
|
|
|
|
|
- /**
|
|
|
- * Tooltip on bottom.
|
|
|
- *
|
|
|
- * @return $this
|
|
|
- */
|
|
|
public function bottom()
|
|
|
{
|
|
|
return $this->placement('bottom');
|
|
|
}
|
|
|
|
|
|
- /**
|
|
|
- * How to position the tooltip - top | bottom | left | right.
|
|
|
- *
|
|
|
- * @param string $val
|
|
|
- *
|
|
|
- * @return $this
|
|
|
- */
|
|
|
public function placement(string $val = 'left')
|
|
|
{
|
|
|
$this->options['placement'] = $val;
|
|
@@ -155,26 +110,37 @@ class Tooltip extends Widget
|
|
|
return $this;
|
|
|
}
|
|
|
|
|
|
- public function render()
|
|
|
+ protected function setupStyle()
|
|
|
{
|
|
|
- if ($style = static::$style) {
|
|
|
- static::$style = '';
|
|
|
-
|
|
|
- Admin::style($style);
|
|
|
- }
|
|
|
+ Admin::style(static::$style);
|
|
|
if ($this->maxWidth) {
|
|
|
Admin::style(".tooltip-inner{max-width:{$this->maxWidth}}");
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- $background = $this->bg ?: Color::primary();
|
|
|
+ protected function setupScript()
|
|
|
+ {
|
|
|
+ $opts = json_encode($this->options, JSON_UNESCAPED_UNICODE);
|
|
|
+
|
|
|
+ Admin::script("$('{$this->selector}').tooltip({$opts});");
|
|
|
+ }
|
|
|
+
|
|
|
+ public function render()
|
|
|
+ {
|
|
|
+ if ($this->built) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ $this->built = true;
|
|
|
+
|
|
|
+ $background = $this->background ?: 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->options['template'] =
|
|
|
+ "<div class='tooltip' role='tooltip'><div class='tooltip-arrow' style='border-{$this->options['placement']}-color:{$background}'></div><div {$this->formatHtmlAttributes()}></div></div>";
|
|
|
|
|
|
- $opts = json_encode($this->options, JSON_UNESCAPED_UNICODE);
|
|
|
-
|
|
|
- Admin::script("$('{$this->selector}').tooltip({$opts});");
|
|
|
+ $this->setupStyle();
|
|
|
+ $this->setupScript();
|
|
|
}
|
|
|
}
|