Few enhancements

- Assets injection rework (Enable and Disable each plugin)
- Themes injection rework (Hard inject only the used ones)
- New tooltip option: interactive

README.md

@@ -16,7 +16,7 @@ composer require andcarpi/laravel-popper
 
 ## Setup
 
-When composer finish his job, add the Service Provider to your app.config in the config folder:
+When composer finish his job, add the Service Provider and the facade to your app.config in the config folder:
 
 > Skip this if you use Laravel 5.5 and above.
 
@@ -27,6 +27,15 @@ When composer finish his job, add the Service Provider to your app.config in the
     // ...
     andcarpi\Popper\PopperServiceProvider::class,
 ],
+
+'aliases' => [
+    // ...
+    // List of Facades Aliases...
+    // ...
+    'Popper' => andcarpi\Popper\Facades\Popper::class,
+],
+
+
 ```
 
 ## Usage
@@ -115,6 +124,11 @@ Each tooltip can be customized using functions. They can also be chained!
 {{ Popper::theme('light')->pop('Light Theming!');  }}
 ```
 
+- Enable Tooltip Interactivity
+```
+{{ Popper::interactive()->pop('Select this text!');  }}
+```
+
 - Options Chain!
 ```
 {{ Popper::arrow()->size('large')->distance(50)->position('bottom')->pop('Arrow, Large, Far and at Bottom!'); }}
@@ -126,7 +140,7 @@ This package is powered by [Pooper.js](https://popper.js.org/) and [Tippy.js](ht
 
 ## License
 
-Laravel Popper is open-sourced software licensed under the MIT License (MIT). Please see [License File](LICENSE.md) for more information.
+Laravel Popper is open-sourced software licensed under the MIT License (MIT). Please see [License File](LICENSE) for more information.
 
 #### Todo
 

config/popper.php

@@ -2,21 +2,39 @@
 
 return [
 
-    /**
-     * These files are needed, you can publish then and change the injection mode to asset
-     * or leave as they are, so the package will inject the CDN.
-     *
-     * If you are using themes that aren't the default, change themes to true.
-     *
-     * Don't forget to add the @include('popper') in your views.
-     */
-    'files' => [
+    /*
+    * These files are needed, you can publish then and change the injection mode to asset
+    * or leave as they are, so the package will inject the CDN.
+    *
+    * If another package or your front end is already injecting them, you can disable them.
+    *
+    * Don't forget to add the @include('popper::assets') in your views.
+    */
+    'popper' => [
+        'active' => true,
+        'mode' => 'cdn',
+        'cdn' => 'https://unpkg.com/popper.js@1',
+        'asset' => 'vendor/laravel-popper/popper.min.js',
+    ],
+    'tippy' => [
+        'active' => true,
         'mode' => 'cdn',
-        'themes' => false,
-        'asset_paths' => ['vendor/laravel-popper/popper.min.js','vendor/laravel-popper/index.all.min.js'],
-        'themes_path' => ['vendor/laravel-popper/themes.js'],
+        'cdn' => 'https://unpkg.com/tippy.js@4',
+        'asset' => 'vendor/laravel-popper/index.all.min.js',
     ],
 
+    /*
+     * Path location to the themes files.
+     * Popper will only inject the used themes.
+     */
+    'themes-path' => base_path() . '/vendor/andcarpi/laravel-popper/resources/css/',
+
+    /*
+     * If you have problems with small tooltips, you probably using bootstrap 3.
+     * Activate this configuration to inject some fixing css to your views.
+     */
+    'fix-bs3' => false,
+
     /*
      * Values to use for all the tooltips, change if you want
      * You can also use the class config helpers to customize them
@@ -101,5 +119,10 @@
             'show' => 0,
             'hide' => 20,
         ],
+
+        /*
+         * Enable the user to interact with the tooltip, to copy, or click elements.
+         */
+        'interactive' => false,
     ],
 ];

resources/css/danger.css

@@ -0,0 +1,52 @@
+.tippy-tooltip.danger-theme {
+    background-color: rgb(255, 102, 102);
+    padding: .25rem .4375rem;
+    font-size: .8125rem;
+    font-weight: 600
+}
+
+.tippy-tooltip.danger-theme[x-placement^=top] .tippy-arrow {
+    border-top: 8px solid rgb(255, 102, 102);
+    border-right: 8px solid transparent;
+    border-left: 8px solid transparent
+}
+
+.tippy-tooltip.danger-theme[x-placement^=bottom] .tippy-arrow {
+    border-bottom: 8px solid rgb(255, 102, 102);
+    border-right: 8px solid transparent;
+    border-left: 8px solid transparent
+}
+
+.tippy-tooltip.danger-theme[x-placement^=left] .tippy-arrow {
+    border-left: 8px solid rgb(255, 102, 102);
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent
+}
+
+.tippy-tooltip.danger-theme[x-placement^=right] .tippy-arrow {
+    border-right: 8px solid rgb(255, 102, 102);
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent
+}
+
+.tippy-tooltip.danger-theme .tippy-backdrop {
+    background-color: rgb(255, 102, 102)
+}
+
+.tippy-tooltip.danger-theme .tippy-roundarrow {
+    fill: rgb(255, 102, 102)
+}
+
+.tippy-tooltip.danger-theme[data-animatefill] {
+    background-color: initial
+}
+
+.tippy-tooltip.danger-theme[data-size=small] {
+    font-size: .75rem;
+    padding: .1875rem .375rem
+}
+
+.tippy-tooltip.danger-theme[data-size=large] {
+    font-size: 1rem;
+    padding: .375rem .75rem
+}