@creativebulma/bulma-tooltip - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

package.json

 {
 	"name": "@creativebulma/bulma-tooltip",
 	"description": "Display a tooltip attached to any kind of element, in different position.",
-	"version": "1.0.2",
+	"version": "1.1.0",
 	"homepage": "https://github.com/CreativeBulma/bulma-tooltip",
@@ -6,0 +6,0 @@ "author": {

README.md

@@ -17,6 +17,6 @@ # Introduction
 ```
-Full installation steps can be found here: [installation steps](https://demo.creativebulma.net/components/tooltip/1.0/get-started)
+Full installation steps can be found here: [installation steps](https://demo.creativebulma.net/components/tooltip/1.1/get-started)
 
 ## Documentation & Demo
-Full documentation and demo are available [here](https://demo.creativebulma.net/components/tooltip/1.0/get-started)
+Full documentation and demo are available [here](https://demo.creativebulma.net/components/tooltip/1.1/get-started)
 
@@ -23,0 +23,0 @@ ## About the project

src/docs/content/get-started.md

@@ -10,3 +10,2 @@ ---
 # Get started
-Although {{% link text="Bulma" href="https://bulma.io" target="_blank" %}} is a pure CSS Framework, modern Website and application use JavaScript to provide a friendlier experience. BulmaBoilerplate has been designed with that in mind and provides a clean structured project with modularity.
 
@@ -71,2 +70,39 @@ **You only need 1 CSS file to use BulmaTooltip**
 <p>Lorem ipsum <span class="has-tooltip-arrow has-tooltip-info" data-tooltip="Info tooltip content">dolor</span> sit amet, <span class="has-tooltip-arrow has-tooltip-warning" data-tooltip="Warning tooltip content">consectetur adipisicing elit</span>. Ipsa fugit <span class="has-tooltip-arrow has-tooltip-right has-tooltip-success" data-tooltip="Success tooltip content">dolores</span> earum quod distinctio ducimus non dignissimos <span class="has-tooltip-arrow has-tooltip-bottom has-tooltip-primary" data-tooltip="Primary tooltip content">molestias</span> amet corrupti voluptatum assumenda impedit beatae <span class="has-tooltip-arrow has-tooltip-left has-tooltip-danger" data-tooltip="Danger tooltip content">veritatis</span> nemo veniam error, hic cumque.</p>
-{{< /preview >}}
+{{< /preview >}}
+
+### Always active
+You can set tooltip to be always visible by adding `has-tooltip-active` class on the element.
+{{< preview id="active" lang="html" >}}
+<p>Lorem ipsum dolor sit amet, <span class="has-tooltip-active" data-tooltip="Tooltip content">consectetur adipisicing elit</span>. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.</p>
+{{< /preview >}}
+
+### Responsiveness
+#### Position
+Tooltip position can be based on responsiveness breakpoints by adding one of the following classes to the HTML element containing the tooltip:
+* `has-tooltip-#{$direction}-mobile`
+* `has-tooltip-#{$direction}-tablet`
+* `has-tooltip-#{$direction}-tablet-only`
+* `has-tooltip-#{$direction}-touch`
+* `has-tooltip-#{$direction}-desktop`
+* `has-tooltip-#{$direction}-desktop-only`
+* `has-tooltip-#{$direction}-until-widescreen`
+* `has-tooltip-#{$direction}-widescreen`
+* `has-tooltip-#{$direction}-widescreen-only`
+* `has-tooltip-#{$direction}-until-fullhd`
+* `has-tooltip-#{$direction}-fullhd`
+
+Don't forget to replace `#${direction}` by one of the avaiblable direction: `top`, `right`, `bottom`, `left`.
+
+
+#### Hide tooltip
+|Class|Mobile|Tablet|Desktop|Widescreen|FullHD|
+|--- |--- |--- |--- |--- |--- |
+|has-tooltip-hidden-mobile|{{< tag danger "hidden" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|
+|has-tooltip-hidden-tablet-only|{{< tag success "visible" >}}|{{< tag danger "hidden" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|
+|has-tooltip-hidden-desktop-only|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag danger "hidden" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|
+|has-tooltip-hidden-widescreen-only|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag danger "hidden" >}}|{{< tag success "visible" >}}|
+|has-tooltip-hidden-touch|{{< tag danger "hidden" >}}|{{< tag danger "hidden" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|
+|has-tooltip-hidden-tablet|{{< tag success "visible" >}}|{{< tag danger "hidden" >}}|{{< tag danger "hidden" >}}|{{< tag danger "hidden" >}}|{{< tag danger "hidden" >}}|
+|has-tooltip-hidden-desktop|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag danger "hidden" >}}|{{< tag danger "hidden" >}}|{{< tag danger "hidden" >}}|
+|has-tooltip-hidden-widescreen|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag danger "hidden" >}}|{{< tag danger "hidden" >}}|
+|has-tooltip-hidden-fullhd|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag danger "hidden" >}}|

src/docs/data/social.json

@@ -5,3 +5,3 @@ [
         "title" : "Github repository",
-        "url": "https://github.com"
+        "url": "https://github.com/CreativeBulma/bulma-tooltip"
     },
@@ -11,4 +11,4 @@ {
         "title" : "Follow us on Twitter",
-        "url": "https://twitter.com"
+        "url": "https://twitter.com/CreativeBulma"
     }
 ]

No alert changes

Improved metrics

Total package byte prevSize

416894

increased by1.42%

Number of package files

57

increased by7.55%

Worsened metrics

Lines of code

3948

decreased by-22.75%

No dependency changes