README

此包提供了一种在Laravel blade视图中添加工具提示的简单方法。由Popper.js和Tippy.js提供支持。有了这个，你将不会在完成它们上浪费时间。安装并使用，无需配置。

安装

首先，使用composer安装包

composer require andcarpi/laravel-popper

设置

当composer完成工作后，将服务提供者和外观添加到config文件夹中的app.config

如果你使用Laravel 5.5及以上版本，请跳过此步骤。

'providers' => [
    // ...
    // List of Service Providers...
    // ...
    andcarpi\Popper\PopperServiceProvider::class,
],

'aliases' => [
    // ...
    // List of Facades Aliases...
    // ...
    'Popper' => andcarpi\Popper\Facades\Popper::class,
],

使用方法

要使用Popper在你的视图中，你需要注入所需的资产！在需要工具提示的视图中使用 @include('popper::assets')，在body关闭标签之前。

ps：如果你有一个主视图，请在该视图中添加资产 :)

   @include('popper::assets')
</body>

现在，是时候使用了。要生成一个简单的工具提示，只需在HTML元素内部使用Popper外观即可。

<button {{ Popper::pop('Tooltip!') }}>Click Me!</button

Blade指令

另一个使用示例是使用 @popper blade指令！

<span @popper(Span Tooltip!)> I'm a Span </span>

配置

自定义工具提示选项

你可以通过发布和编辑配置文件来更改工具提示默认选项。

php artisan vendor:publish --provider="andcarpi\Popper\PopperServiceProvider" --tag=config

文件将放置在你的配置文件夹中。

每个选项都是自我解释的，你可以修改你生成的所有工具提示的默认行为。

单个工具提示选项

每个工具提示都可以使用函数进行自定义。它们也可以被链接！

在工具提示中启用箭头

{{ Popper::arrow()->pop('Tooltip with arrow!'); }}
{{ Popper::arrow('round')->pop('Tooltip with a rounded arrow!'); }}

修改工具提示位置

{{ Popper::placement('bottom', 'start')->pop('Bottom Tooltip!'); //position, alignment }}
{{ Popper::position('left')->pop('Left Tooltip!'); // top, right, bottom, left }}
{{ Popper::alignment('end')->pop('Tooltip with end alignment!'); // start, center, end }}

修改工具提示与元素的距离

//Use integers!
{{ Popper::distance(50)->pop('Tooltip far away!'); }}

修改工具提示大小

{{ Popper::size('small')->pop('Small tooltip!'); // 'small', 'regular', 'large' }}

修改工具提示触发器（什么会使工具提示出现）

// 1st param is mouseenter, 2nd is focus, 3rd is click
{{ Popper::trigger(true, true, false)->pop('This tooltip appears onmouseover and onfocus!'); }}

修改工具提示显示和隐藏延迟

// Use integer values! 
{{ Popper::delay(500,0)->pop('500ms to appear, but vanishes instantly!');  }}

修改工具提示主题

// 'light', 'lightborder', 'google', 'translucent', 'success', 'danger', 'warning', 'info'
// For the success, danger, warning, info, you can also use the Helpers (see next info)
// If you are using themes, enable themes at the config file! 
{{ Popper::theme('light')->pop('Light Theming!');  }}

简单的成功、危险、警告、信息弹出助手

{{ Popper::success('Success Message!") }}
{{ Popper::danger('Danger Message!") }}
{{ Popper::warning('Warning Message!") }}
{{ Popper::info('Info Message!") }}

启用工具提示交互性

{{ Popper::interactive()->pop('Select this text!');  }}

选项链！

{{ Popper::arrow()->size('large')->distance(50)->position('bottom')->pop('Arrow, Large, Far and at Bottom!'); }}

此包由 Pooper.js 和 Tippy.js 支持

许可证

Laravel Popper 是开源软件，许可协议为MIT。请参阅许可证文件以获取更多信息。

待办事项

[x] 危险/警告/成功等弹出

[] 自定义主题

andcarpi / laravel-popper

维护者

详细信息