diff --git a/CHANGELOG.md b/CHANGELOG.md index ece7b2c..a857adb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ + +## [1.0.5](https://github.com/Wikiki/bulma-tooltip/compare/1.0.4...1.0.5) (2018-05-12) + + +### Bug Fixes + +* [#20](https://github.com/Wikiki/bulma-tooltip/issues/20) Multiline problem with few text ([eb00d1b](https://github.com/Wikiki/bulma-tooltip/commit/eb00d1b)) + + + ## [1.0.4](https://github.com/Wikiki/bulma-tooltip/compare/1.0.3...1.0.4) (2018-03-29) diff --git a/bower.json b/bower.json index ee73d39..8c7cde5 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "bulma-tooltip", "description": "Display a tooltip attached to any kind of element, in different position.", - "version": "1.0.4", + "version": "1.0.5", "main": "tooltip.sass", "version": "0.1.3", "authors": [ diff --git a/dist/bulma-tooltip.min.css b/dist/bulma-tooltip.min.css index f0e8704..d04fc3b 100644 --- a/dist/bulma-tooltip.min.css +++ b/dist/bulma-tooltip.min.css @@ -1 +1 @@ -@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.tooltip{position:relative}.tooltip.is-tooltip-active:not(.is-loading)::after,.tooltip:hover:not(.is-loading)::after{z-index:99999;position:absolute;display:inline-block;pointer-events:none}.tooltip.is-tooltip-active::before,.tooltip:hover::before{z-index:99999;position:absolute;display:inline-block;pointer-events:none}.tooltip.is-tooltip-active:not(.is-loading)::after,.tooltip:hover:not(.is-loading)::after{content:"";border-style:solid;border-width:.5rem}.tooltip.is-tooltip-active::before,.tooltip:hover::before{opacity:0;content:attr(data-tooltip);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;padding:.4rem .8rem;-webkit-transform:translate(-50%,1rem);transform:translate(-50%,1rem);background:rgba(74,74,74,.9);border-radius:3px;color:#fff;max-width:24rem}.tooltip.is-tooltip-active:not(.is-loading)::after,.tooltip:focus:not(.is-loading)::after,.tooltip:hover:not(.is-loading)::after{top:0;bottom:auto;left:50%;opacity:1;margin-left:-.5rem;margin-top:-.5rem;border-color:rgba(74,74,74,.9) transparent transparent transparent}.tooltip.is-tooltip-active::before,.tooltip:focus::before,.tooltip:hover::before{top:auto;bottom:100%;left:50%;opacity:1;-webkit-transform:translate(-50%,-.5rem);transform:translate(-50%,-.5rem)}.tooltip.is-tooltip-right::before{top:auto;bottom:50%;left:100%;right:auto;-webkit-transform:translate(-1rem,50%);transform:translate(-1rem,50%)}.tooltip.is-tooltip-right.is-tooltip-active:not(.is-loading)::after,.tooltip.is-tooltip-right:focus:not(.is-loading)::after,.tooltip.is-tooltip-right:hover:not(.is-loading)::after{top:50%;left:100%;right:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.tooltip.is-tooltip-right.is-tooltip-active::before,.tooltip.is-tooltip-right:focus::before,.tooltip.is-tooltip-right:hover::before{-webkit-transform:translate(.5rem,50%);transform:translate(.5rem,50%)}.tooltip.is-tooltip-bottom::before{top:100%;bottom:auto;left:50%;right:auto;-webkit-transform:translate(-50%,-1rem);transform:translate(-50%,-1rem)}.tooltip.is-tooltip-bottom.is-tooltip-active:not(.is-loading)::after,.tooltip.is-tooltip-bottom:focus:not(.is-loading)::after,.tooltip.is-tooltip-bottom:hover:not(.is-loading)::after{top:100%;bottom:auto;left:50%;right:auto;border-color:transparent transparent rgba(74,74,74,.9) transparent}.tooltip.is-tooltip-bottom.is-tooltip-active::before,.tooltip.is-tooltip-bottom:focus::before,.tooltip.is-tooltip-bottom:hover::before{-webkit-transform:translate(-50%,.5rem);transform:translate(-50%,.5rem)}.tooltip.is-tooltip-left::before{top:auto;bottom:50%;left:auto;right:100%;-webkit-transform:translate(1rem,50%);transform:translate(1rem,50%)}.tooltip.is-tooltip-left.is-tooltip-active:not(.is-loading)::after,.tooltip.is-tooltip-left:focus:not(.is-loading)::after,.tooltip.is-tooltip-left:hover:not(.is-loading)::after{top:50%;left:auto;right:calc(100% - .5rem);border-color:transparent transparent transparent rgba(74,74,74,.9)}.tooltip.is-tooltip-left.is-tooltip-active::before,.tooltip.is-tooltip-left:focus::before,.tooltip.is-tooltip-left:hover::before{-webkit-transform:translate(-.5rem,50%);transform:translate(-.5rem,50%)}.tooltip.is-tooltip-multiline::before{min-width:24rem;text-overflow:clip;white-space:normal;word-break:break-word}.tooltip.is-tooltip-white:not(.is-loading)::after{border-color:rgba(255,255,255,.9) transparent transparent transparent}.tooltip.is-tooltip-white.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(255,255,255,.9) transparent transparent}.tooltip.is-tooltip-white.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(255,255,255,.9) transparent}.tooltip.is-tooltip-white.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(255,255,255,.9)}.tooltip.is-tooltip-white::before{background:rgba(255,255,255,.9);color:#0a0a0a}.tooltip.is-tooltip-black:not(.is-loading)::after{border-color:rgba(10,10,10,.9) transparent transparent transparent}.tooltip.is-tooltip-black.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(10,10,10,.9) transparent transparent}.tooltip.is-tooltip-black.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(10,10,10,.9) transparent}.tooltip.is-tooltip-black.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(10,10,10,.9)}.tooltip.is-tooltip-black::before{background:rgba(10,10,10,.9);color:#fff}.tooltip.is-tooltip-light:not(.is-loading)::after{border-color:rgba(245,245,245,.9) transparent transparent transparent}.tooltip.is-tooltip-light.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(245,245,245,.9) transparent transparent}.tooltip.is-tooltip-light.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(245,245,245,.9) transparent}.tooltip.is-tooltip-light.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(245,245,245,.9)}.tooltip.is-tooltip-light::before{background:rgba(245,245,245,.9);color:#363636}.tooltip.is-tooltip-dark:not(.is-loading)::after{border-color:rgba(54,54,54,.9) transparent transparent transparent}.tooltip.is-tooltip-dark.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(54,54,54,.9) transparent transparent}.tooltip.is-tooltip-dark.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(54,54,54,.9) transparent}.tooltip.is-tooltip-dark.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(54,54,54,.9)}.tooltip.is-tooltip-dark::before{background:rgba(54,54,54,.9);color:#f5f5f5}.tooltip.is-tooltip-primary:not(.is-loading)::after{border-color:rgba(0,209,178,.9) transparent transparent transparent}.tooltip.is-tooltip-primary.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(0,209,178,.9) transparent transparent}.tooltip.is-tooltip-primary.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(0,209,178,.9) transparent}.tooltip.is-tooltip-primary.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(0,209,178,.9)}.tooltip.is-tooltip-primary::before{background:rgba(0,209,178,.9);color:#fff}.tooltip.is-tooltip-link:not(.is-loading)::after{border-color:rgba(50,115,220,.9) transparent transparent transparent}.tooltip.is-tooltip-link.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(50,115,220,.9) transparent transparent}.tooltip.is-tooltip-link.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(50,115,220,.9) transparent}.tooltip.is-tooltip-link.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(50,115,220,.9)}.tooltip.is-tooltip-link::before{background:rgba(50,115,220,.9);color:#fff}.tooltip.is-tooltip-info:not(.is-loading)::after{border-color:rgba(32,156,238,.9) transparent transparent transparent}.tooltip.is-tooltip-info.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(32,156,238,.9) transparent transparent}.tooltip.is-tooltip-info.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(32,156,238,.9) transparent}.tooltip.is-tooltip-info.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(32,156,238,.9)}.tooltip.is-tooltip-info::before{background:rgba(32,156,238,.9);color:#fff}.tooltip.is-tooltip-success:not(.is-loading)::after{border-color:rgba(35,209,96,.9) transparent transparent transparent}.tooltip.is-tooltip-success.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(35,209,96,.9) transparent transparent}.tooltip.is-tooltip-success.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(35,209,96,.9) transparent}.tooltip.is-tooltip-success.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(35,209,96,.9)}.tooltip.is-tooltip-success::before{background:rgba(35,209,96,.9);color:#fff}.tooltip.is-tooltip-warning:not(.is-loading)::after{border-color:rgba(255,221,87,.9) transparent transparent transparent}.tooltip.is-tooltip-warning.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(255,221,87,.9) transparent transparent}.tooltip.is-tooltip-warning.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(255,221,87,.9) transparent}.tooltip.is-tooltip-warning.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(255,221,87,.9)}.tooltip.is-tooltip-warning::before{background:rgba(255,221,87,.9);color:rgba(0,0,0,.7)}.tooltip.is-tooltip-danger:not(.is-loading)::after{border-color:rgba(255,56,96,.9) transparent transparent transparent}.tooltip.is-tooltip-danger.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(255,56,96,.9) transparent transparent}.tooltip.is-tooltip-danger.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(255,56,96,.9) transparent}.tooltip.is-tooltip-danger.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(255,56,96,.9)}.tooltip.is-tooltip-danger::before{background:rgba(255,56,96,.9);color:#fff} \ No newline at end of file +@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.tooltip{position:relative}.tooltip.is-tooltip-active:not(.is-loading)::after,.tooltip:hover:not(.is-loading)::after{z-index:99999;position:absolute;display:inline-block;pointer-events:none}.tooltip.is-tooltip-active::before,.tooltip:hover::before{z-index:99999;position:absolute;display:inline-block;pointer-events:none}.tooltip.is-tooltip-active:not(.is-loading)::after,.tooltip:hover:not(.is-loading)::after{content:"";border-style:solid;border-width:.5rem}.tooltip.is-tooltip-active::before,.tooltip:hover::before{opacity:0;content:attr(data-tooltip);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;padding:.4rem .8rem;-webkit-transform:translate(-50%,1rem);transform:translate(-50%,1rem);background:rgba(74,74,74,.9);border-radius:3px;color:#fff;max-width:24rem}.tooltip.is-tooltip-active:not(.is-loading)::after,.tooltip:focus:not(.is-loading)::after,.tooltip:hover:not(.is-loading)::after{top:0;bottom:auto;left:50%;opacity:1;margin-left:-.5rem;margin-top:-.5rem;border-color:rgba(74,74,74,.9) transparent transparent transparent}.tooltip.is-tooltip-active::before,.tooltip:focus::before,.tooltip:hover::before{top:auto;bottom:100%;left:50%;opacity:1;-webkit-transform:translate(-50%,-.5rem);transform:translate(-50%,-.5rem)}.tooltip.is-tooltip-right::before{top:auto;bottom:50%;left:100%;right:auto;-webkit-transform:translate(-1rem,50%);transform:translate(-1rem,50%)}.tooltip.is-tooltip-right.is-tooltip-active:not(.is-loading)::after,.tooltip.is-tooltip-right:focus:not(.is-loading)::after,.tooltip.is-tooltip-right:hover:not(.is-loading)::after{top:50%;left:100%;right:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.tooltip.is-tooltip-right.is-tooltip-active::before,.tooltip.is-tooltip-right:focus::before,.tooltip.is-tooltip-right:hover::before{-webkit-transform:translate(.5rem,50%);transform:translate(.5rem,50%)}.tooltip.is-tooltip-bottom::before{top:100%;bottom:auto;left:50%;right:auto;-webkit-transform:translate(-50%,-1rem);transform:translate(-50%,-1rem)}.tooltip.is-tooltip-bottom.is-tooltip-active:not(.is-loading)::after,.tooltip.is-tooltip-bottom:focus:not(.is-loading)::after,.tooltip.is-tooltip-bottom:hover:not(.is-loading)::after{top:100%;bottom:auto;left:50%;right:auto;border-color:transparent transparent rgba(74,74,74,.9) transparent}.tooltip.is-tooltip-bottom.is-tooltip-active::before,.tooltip.is-tooltip-bottom:focus::before,.tooltip.is-tooltip-bottom:hover::before{-webkit-transform:translate(-50%,.5rem);transform:translate(-50%,.5rem)}.tooltip.is-tooltip-left::before{top:auto;bottom:50%;left:auto;right:100%;-webkit-transform:translate(1rem,50%);transform:translate(1rem,50%)}.tooltip.is-tooltip-left.is-tooltip-active:not(.is-loading)::after,.tooltip.is-tooltip-left:focus:not(.is-loading)::after,.tooltip.is-tooltip-left:hover:not(.is-loading)::after{top:50%;left:auto;right:calc(100% - .5rem);border-color:transparent transparent transparent rgba(74,74,74,.9)}.tooltip.is-tooltip-left.is-tooltip-active::before,.tooltip.is-tooltip-left:focus::before,.tooltip.is-tooltip-left:hover::before{-webkit-transform:translate(-.5rem,50%);transform:translate(-.5rem,50%)}.tooltip.is-tooltip-multiline::before{text-overflow:clip;white-space:normal;word-break:keep-all}.tooltip.is-tooltip-white:not(.is-loading)::after{border-color:rgba(255,255,255,.9) transparent transparent transparent}.tooltip.is-tooltip-white.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(255,255,255,.9) transparent transparent}.tooltip.is-tooltip-white.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(255,255,255,.9) transparent}.tooltip.is-tooltip-white.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(255,255,255,.9)}.tooltip.is-tooltip-white::before{background:rgba(255,255,255,.9);color:#0a0a0a}.tooltip.is-tooltip-black:not(.is-loading)::after{border-color:rgba(10,10,10,.9) transparent transparent transparent}.tooltip.is-tooltip-black.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(10,10,10,.9) transparent transparent}.tooltip.is-tooltip-black.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(10,10,10,.9) transparent}.tooltip.is-tooltip-black.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(10,10,10,.9)}.tooltip.is-tooltip-black::before{background:rgba(10,10,10,.9);color:#fff}.tooltip.is-tooltip-light:not(.is-loading)::after{border-color:rgba(245,245,245,.9) transparent transparent transparent}.tooltip.is-tooltip-light.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(245,245,245,.9) transparent transparent}.tooltip.is-tooltip-light.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(245,245,245,.9) transparent}.tooltip.is-tooltip-light.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(245,245,245,.9)}.tooltip.is-tooltip-light::before{background:rgba(245,245,245,.9);color:#363636}.tooltip.is-tooltip-dark:not(.is-loading)::after{border-color:rgba(54,54,54,.9) transparent transparent transparent}.tooltip.is-tooltip-dark.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(54,54,54,.9) transparent transparent}.tooltip.is-tooltip-dark.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(54,54,54,.9) transparent}.tooltip.is-tooltip-dark.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(54,54,54,.9)}.tooltip.is-tooltip-dark::before{background:rgba(54,54,54,.9);color:#f5f5f5}.tooltip.is-tooltip-primary:not(.is-loading)::after{border-color:rgba(0,209,178,.9) transparent transparent transparent}.tooltip.is-tooltip-primary.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(0,209,178,.9) transparent transparent}.tooltip.is-tooltip-primary.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(0,209,178,.9) transparent}.tooltip.is-tooltip-primary.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(0,209,178,.9)}.tooltip.is-tooltip-primary::before{background:rgba(0,209,178,.9);color:#fff}.tooltip.is-tooltip-link:not(.is-loading)::after{border-color:rgba(50,115,220,.9) transparent transparent transparent}.tooltip.is-tooltip-link.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(50,115,220,.9) transparent transparent}.tooltip.is-tooltip-link.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(50,115,220,.9) transparent}.tooltip.is-tooltip-link.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(50,115,220,.9)}.tooltip.is-tooltip-link::before{background:rgba(50,115,220,.9);color:#fff}.tooltip.is-tooltip-info:not(.is-loading)::after{border-color:rgba(32,156,238,.9) transparent transparent transparent}.tooltip.is-tooltip-info.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(32,156,238,.9) transparent transparent}.tooltip.is-tooltip-info.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(32,156,238,.9) transparent}.tooltip.is-tooltip-info.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(32,156,238,.9)}.tooltip.is-tooltip-info::before{background:rgba(32,156,238,.9);color:#fff}.tooltip.is-tooltip-success:not(.is-loading)::after{border-color:rgba(35,209,96,.9) transparent transparent transparent}.tooltip.is-tooltip-success.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(35,209,96,.9) transparent transparent}.tooltip.is-tooltip-success.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(35,209,96,.9) transparent}.tooltip.is-tooltip-success.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(35,209,96,.9)}.tooltip.is-tooltip-success::before{background:rgba(35,209,96,.9);color:#fff}.tooltip.is-tooltip-warning:not(.is-loading)::after{border-color:rgba(255,221,87,.9) transparent transparent transparent}.tooltip.is-tooltip-warning.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(255,221,87,.9) transparent transparent}.tooltip.is-tooltip-warning.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(255,221,87,.9) transparent}.tooltip.is-tooltip-warning.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(255,221,87,.9)}.tooltip.is-tooltip-warning::before{background:rgba(255,221,87,.9);color:rgba(0,0,0,.7)}.tooltip.is-tooltip-danger:not(.is-loading)::after{border-color:rgba(255,56,96,.9) transparent transparent transparent}.tooltip.is-tooltip-danger.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(255,56,96,.9) transparent transparent}.tooltip.is-tooltip-danger.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(255,56,96,.9) transparent}.tooltip.is-tooltip-danger.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(255,56,96,.9)}.tooltip.is-tooltip-danger::before{background:rgba(255,56,96,.9);color:#fff} \ No newline at end of file diff --git a/dist/bulma-tooltip.sass b/dist/bulma-tooltip.sass index 4cdd347..935feaa 100644 --- a/dist/bulma-tooltip.sass +++ b/dist/bulma-tooltip.sass @@ -114,10 +114,10 @@ $tooltip-max-width: 24rem !default &.is-tooltip-multiline &::before - min-width: $tooltip-max-width + //min-width: $tooltip-max-width text-overflow: clip white-space: normal - word-break: break-word + word-break: keep-all @each $name, $pair in $colors $color: nth($pair, 1) diff --git a/package.json b/package.json index 1b9a0bf..76b724d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bulma-tooltip", - "version": "1.0.4", + "version": "1.0.5", "description": "Display a tooltip attached to any kind of element, in different position.", "main": "dist/bulma-tooltip.sass", "scripts": {