diff --git a/dist/vue-custom-tooltip.cjs.js b/dist/vue-custom-tooltip.cjs.js index 7dd57e9..de3bc79 100644 --- a/dist/vue-custom-tooltip.cjs.js +++ b/dist/vue-custom-tooltip.cjs.js @@ -105,7 +105,7 @@ function styleInject(css, ref) { } } -var css_248z = ".vue-custom-tooltip{position:relative;display:inline-block;text-decoration-line:none!important}.vue-custom-tooltip.is-top:after,.vue-custom-tooltip.is-top:before{top:auto;right:auto;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%)}.vue-custom-tooltip.is-top:before{border-top:5px solid #000;border-top:5px solid var(--vue-custom-tooltip-background,#000);border-right:5px solid transparent;border-left:5px solid transparent;bottom:calc(100% + 2px)}.vue-custom-tooltip.is-top.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-top.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-top.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-right:after,.vue-custom-tooltip.is-right:before{top:50%;right:auto;bottom:auto;left:calc(100% + 7px);transform:translateY(-50%)}.vue-custom-tooltip.is-right:before{border-top:5px solid transparent;border-right:5px solid #000;border-right:5px solid var(--vue-custom-tooltip-background,#000);border-bottom:5px solid transparent;left:calc(100% + 3px)}.vue-custom-tooltip.is-right.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-right.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-right.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-bottom:after,.vue-custom-tooltip.is-bottom:before{top:calc(100% + 7px);right:auto;bottom:auto;left:50%;transform:translateX(-50%)}.vue-custom-tooltip.is-bottom:before{border-right:5px solid transparent;border-bottom:5px solid #000;border-bottom:5px solid var(--vue-custom-tooltip-background,#000);border-left:5px solid transparent;top:calc(100% + 2px)}.vue-custom-tooltip.is-bottom.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-bottom.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-bottom.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-left:after,.vue-custom-tooltip.is-left:before{top:50%;right:calc(100% + 7px);bottom:auto;left:auto;transform:translateY(-50%)}.vue-custom-tooltip.is-left:before{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000;border-left:5px solid var(--vue-custom-tooltip-background,#000);right:calc(100% + 3px)}.vue-custom-tooltip.is-left.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-left.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-left.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-underlined{border-bottom:1px dotted #000;border-bottom:1px dotted var(--vue-custom-tooltip-background,#000);line-height:1.2}.vue-custom-tooltip:after,.vue-custom-tooltip:before{position:absolute;content:\"\";opacity:0;visibility:hidden;pointer-events:none;transition:opacity 86ms ease-out,visibility 86ms ease-out}.vue-custom-tooltip:before{z-index:889}.vue-custom-tooltip:after{content:attr(data-label);color:#fff;color:var(--vue-custom-tooltip-color,#fff);background:#000;background:var(--vue-custom-tooltip-background,#000);width:auto;padding:.45rem .75rem;border-radius:12px;border-radius:var(--vue-custom-tooltip-border-radius,100px);font-size:.85rem!important;font-weight:400;font-weight:var(--vue-custom-tooltip-font-weight,400);line-height:1.3;letter-spacing:normal!important;text-transform:none;box-shadow:0 1px 2px 1px rgba(0,1,0,.2);z-index:888;white-space:nowrap}.vue-custom-tooltip:not([data-label=\"\"]):hover:after,.vue-custom-tooltip:not([data-label=\"\"]):hover:before{opacity:1;visibility:visible}:disabled .vue-custom-tooltip{pointer-events:none}.vue-custom-tooltip:not([data-label=\"\"]).is-sticky:after,.vue-custom-tooltip:not([data-label=\"\"]).is-sticky:before{opacity:1;visibility:visible}.vue-custom-tooltip.has-multiline:after{display:flex-block;padding:.5rem .75rem .65rem;text-align:center;line-height:1.4;white-space:pre-wrap}"; +var css_248z = ".vue-custom-tooltip{position:relative;display:inline-block;text-decoration-line:none!important}.vue-custom-tooltip.is-top:after,.vue-custom-tooltip.is-top:before{top:auto;right:auto;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%)}.vue-custom-tooltip.is-top:before{border-top:5px solid #000;border-top:5px solid var(--vue-custom-tooltip-background,#000);border-right:5px solid transparent;border-left:5px solid transparent;bottom:calc(100% + 2px)}.vue-custom-tooltip.is-top.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-top.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-top.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-right:after,.vue-custom-tooltip.is-right:before{top:50%;right:auto;bottom:auto;left:calc(100% + 7px);transform:translateY(-50%)}.vue-custom-tooltip.is-right:before{border-top:5px solid transparent;border-right:5px solid #000;border-right:5px solid var(--vue-custom-tooltip-background,#000);border-bottom:5px solid transparent;left:calc(100% + 3px)}.vue-custom-tooltip.is-right.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-right.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-right.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-bottom:after,.vue-custom-tooltip.is-bottom:before{top:calc(100% + 7px);right:auto;bottom:auto;left:50%;transform:translateX(-50%)}.vue-custom-tooltip.is-bottom:before{border-right:5px solid transparent;border-bottom:5px solid #000;border-bottom:5px solid var(--vue-custom-tooltip-background,#000);border-left:5px solid transparent;top:calc(100% + 2px)}.vue-custom-tooltip.is-bottom.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-bottom.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-bottom.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-left:after,.vue-custom-tooltip.is-left:before{top:50%;right:calc(100% + 7px);bottom:auto;left:auto;transform:translateY(-50%)}.vue-custom-tooltip.is-left:before{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000;border-left:5px solid var(--vue-custom-tooltip-background,#000);right:calc(100% + 3px)}.vue-custom-tooltip.is-left.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-left.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-left.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-underlined{border-bottom:1px dotted #000;border-bottom:1px dotted var(--vue-custom-tooltip-background,#000);line-height:1.2}.vue-custom-tooltip:after,.vue-custom-tooltip:before{position:absolute;content:\"\";opacity:0;visibility:hidden;pointer-events:none;transition:opacity 86ms ease-out,visibility 86ms ease-out}.vue-custom-tooltip:before{z-index:889}.vue-custom-tooltip:after{content:attr(data-label);color:#fff;color:var(--vue-custom-tooltip-color,#fff);background:#000;background:var(--vue-custom-tooltip-background,#000);width:auto;padding:.45rem .75rem;border-radius:100px;border-radius:var(--vue-custom-tooltip-border-radius,100px);font-size:.85rem!important;font-weight:400;font-weight:var(--vue-custom-tooltip-font-weight,400);line-height:1.3;letter-spacing:normal!important;text-transform:none;box-shadow:0 1px 2px 1px rgba(0,1,0,.2);z-index:888;white-space:nowrap}.vue-custom-tooltip:not([data-label=\"\"]):hover:after,.vue-custom-tooltip:not([data-label=\"\"]):hover:before{opacity:1;visibility:visible}:disabled .vue-custom-tooltip{pointer-events:none}.vue-custom-tooltip:not([data-label=\"\"]).is-sticky:after,.vue-custom-tooltip:not([data-label=\"\"]).is-sticky:before{opacity:1;visibility:visible}.vue-custom-tooltip.has-multiline:after{display:block;padding:.5rem .75rem .65rem;text-align:center;line-height:1.4;white-space:pre-wrap}"; styleInject(css_248z); var index = { diff --git a/dist/vue-custom-tooltip.esm.js b/dist/vue-custom-tooltip.esm.js index 366f061..04799a2 100644 --- a/dist/vue-custom-tooltip.esm.js +++ b/dist/vue-custom-tooltip.esm.js @@ -103,7 +103,7 @@ function styleInject(css, ref) { } } -var css_248z = ".vue-custom-tooltip{position:relative;display:inline-block;text-decoration-line:none!important}.vue-custom-tooltip.is-top:after,.vue-custom-tooltip.is-top:before{top:auto;right:auto;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%)}.vue-custom-tooltip.is-top:before{border-top:5px solid #000;border-top:5px solid var(--vue-custom-tooltip-background,#000);border-right:5px solid transparent;border-left:5px solid transparent;bottom:calc(100% + 2px)}.vue-custom-tooltip.is-top.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-top.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-top.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-right:after,.vue-custom-tooltip.is-right:before{top:50%;right:auto;bottom:auto;left:calc(100% + 7px);transform:translateY(-50%)}.vue-custom-tooltip.is-right:before{border-top:5px solid transparent;border-right:5px solid #000;border-right:5px solid var(--vue-custom-tooltip-background,#000);border-bottom:5px solid transparent;left:calc(100% + 3px)}.vue-custom-tooltip.is-right.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-right.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-right.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-bottom:after,.vue-custom-tooltip.is-bottom:before{top:calc(100% + 7px);right:auto;bottom:auto;left:50%;transform:translateX(-50%)}.vue-custom-tooltip.is-bottom:before{border-right:5px solid transparent;border-bottom:5px solid #000;border-bottom:5px solid var(--vue-custom-tooltip-background,#000);border-left:5px solid transparent;top:calc(100% + 2px)}.vue-custom-tooltip.is-bottom.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-bottom.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-bottom.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-left:after,.vue-custom-tooltip.is-left:before{top:50%;right:calc(100% + 7px);bottom:auto;left:auto;transform:translateY(-50%)}.vue-custom-tooltip.is-left:before{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000;border-left:5px solid var(--vue-custom-tooltip-background,#000);right:calc(100% + 3px)}.vue-custom-tooltip.is-left.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-left.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-left.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-underlined{border-bottom:1px dotted #000;border-bottom:1px dotted var(--vue-custom-tooltip-background,#000);line-height:1.2}.vue-custom-tooltip:after,.vue-custom-tooltip:before{position:absolute;content:\"\";opacity:0;visibility:hidden;pointer-events:none;transition:opacity 86ms ease-out,visibility 86ms ease-out}.vue-custom-tooltip:before{z-index:889}.vue-custom-tooltip:after{content:attr(data-label);color:#fff;color:var(--vue-custom-tooltip-color,#fff);background:#000;background:var(--vue-custom-tooltip-background,#000);width:auto;padding:.45rem .75rem;border-radius:12px;border-radius:var(--vue-custom-tooltip-border-radius,100px);font-size:.85rem!important;font-weight:400;font-weight:var(--vue-custom-tooltip-font-weight,400);line-height:1.3;letter-spacing:normal!important;text-transform:none;box-shadow:0 1px 2px 1px rgba(0,1,0,.2);z-index:888;white-space:nowrap}.vue-custom-tooltip:not([data-label=\"\"]):hover:after,.vue-custom-tooltip:not([data-label=\"\"]):hover:before{opacity:1;visibility:visible}:disabled .vue-custom-tooltip{pointer-events:none}.vue-custom-tooltip:not([data-label=\"\"]).is-sticky:after,.vue-custom-tooltip:not([data-label=\"\"]).is-sticky:before{opacity:1;visibility:visible}.vue-custom-tooltip.has-multiline:after{display:flex-block;padding:.5rem .75rem .65rem;text-align:center;line-height:1.4;white-space:pre-wrap}"; +var css_248z = ".vue-custom-tooltip{position:relative;display:inline-block;text-decoration-line:none!important}.vue-custom-tooltip.is-top:after,.vue-custom-tooltip.is-top:before{top:auto;right:auto;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%)}.vue-custom-tooltip.is-top:before{border-top:5px solid #000;border-top:5px solid var(--vue-custom-tooltip-background,#000);border-right:5px solid transparent;border-left:5px solid transparent;bottom:calc(100% + 2px)}.vue-custom-tooltip.is-top.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-top.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-top.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-right:after,.vue-custom-tooltip.is-right:before{top:50%;right:auto;bottom:auto;left:calc(100% + 7px);transform:translateY(-50%)}.vue-custom-tooltip.is-right:before{border-top:5px solid transparent;border-right:5px solid #000;border-right:5px solid var(--vue-custom-tooltip-background,#000);border-bottom:5px solid transparent;left:calc(100% + 3px)}.vue-custom-tooltip.is-right.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-right.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-right.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-bottom:after,.vue-custom-tooltip.is-bottom:before{top:calc(100% + 7px);right:auto;bottom:auto;left:50%;transform:translateX(-50%)}.vue-custom-tooltip.is-bottom:before{border-right:5px solid transparent;border-bottom:5px solid #000;border-bottom:5px solid var(--vue-custom-tooltip-background,#000);border-left:5px solid transparent;top:calc(100% + 2px)}.vue-custom-tooltip.is-bottom.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-bottom.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-bottom.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-left:after,.vue-custom-tooltip.is-left:before{top:50%;right:calc(100% + 7px);bottom:auto;left:auto;transform:translateY(-50%)}.vue-custom-tooltip.is-left:before{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000;border-left:5px solid var(--vue-custom-tooltip-background,#000);right:calc(100% + 3px)}.vue-custom-tooltip.is-left.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-left.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-left.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-underlined{border-bottom:1px dotted #000;border-bottom:1px dotted var(--vue-custom-tooltip-background,#000);line-height:1.2}.vue-custom-tooltip:after,.vue-custom-tooltip:before{position:absolute;content:\"\";opacity:0;visibility:hidden;pointer-events:none;transition:opacity 86ms ease-out,visibility 86ms ease-out}.vue-custom-tooltip:before{z-index:889}.vue-custom-tooltip:after{content:attr(data-label);color:#fff;color:var(--vue-custom-tooltip-color,#fff);background:#000;background:var(--vue-custom-tooltip-background,#000);width:auto;padding:.45rem .75rem;border-radius:100px;border-radius:var(--vue-custom-tooltip-border-radius,100px);font-size:.85rem!important;font-weight:400;font-weight:var(--vue-custom-tooltip-font-weight,400);line-height:1.3;letter-spacing:normal!important;text-transform:none;box-shadow:0 1px 2px 1px rgba(0,1,0,.2);z-index:888;white-space:nowrap}.vue-custom-tooltip:not([data-label=\"\"]):hover:after,.vue-custom-tooltip:not([data-label=\"\"]):hover:before{opacity:1;visibility:visible}:disabled .vue-custom-tooltip{pointer-events:none}.vue-custom-tooltip:not([data-label=\"\"]).is-sticky:after,.vue-custom-tooltip:not([data-label=\"\"]).is-sticky:before{opacity:1;visibility:visible}.vue-custom-tooltip.has-multiline:after{display:block;padding:.5rem .75rem .65rem;text-align:center;line-height:1.4;white-space:pre-wrap}"; styleInject(css_248z); var index = { diff --git a/dist/vue-custom-tooltip.min.js b/dist/vue-custom-tooltip.min.js index 6fe65d0..877950f 100644 --- a/dist/vue-custom-tooltip.min.js +++ b/dist/vue-custom-tooltip.min.js @@ -1 +1 @@ -var VueCustomTooltip=function(t){"use strict";var o={name:"VueCustomTooltip",color:"#fff",background:"#000",borderRadius:100,fontWeight:400},e=t.defineComponent({name:"VueCustomTooltip",props:{label:String,active:{type:Boolean,default:!0},sticky:Boolean,multiline:Boolean,underlined:Boolean,abbreviation:Boolean,position:{type:String,default:"is-top",validator:function(t){return["is-top","is-bottom","is-left","is-right"].indexOf(t)>-1}},size:{type:String,default:"is-medium",validator:function(t){return["is-small","is-medium","is-large"].indexOf(t)>-1}}},setup:function(e,i){var r=i.slots,l=i.attrs,s=t.inject("vue-custom-tooltip",o);return t.onMounted((function(){var t=document&&document.documentElement?document.documentElement:null;t&&(t.style.setProperty("--vue-custom-tooltip-color",s.color),t.style.setProperty("--vue-custom-tooltip-background",s.background),t.style.setProperty("--vue-custom-tooltip-border-radius",s.borderRadius+"px"),t.style.setProperty("--vue-custom-tooltip-font-weight",s.fontWeight.toString()))})),function(){return[t.h(e.abbreviation?"abbr":"span",Object.assign({},l,{class:[e.position,e.multiline?"is-large":e.size,{"vue-custom-tooltip":e.active&&e.label,"is-sticky":e.sticky,"has-multiline":e.multiline,"is-underlined":e.underlined||e.abbreviation}],"data-label":e.label,"aria-label":e.label,role:"tooltip",style:[{cursor:e.abbreviation?"help":"pointer"}]}),r)]}}});e.__file="src/VueCustomTooltip.vue";return function(t,o){void 0===o&&(o={});var e=o.insertAt;if(t&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===e&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}('.vue-custom-tooltip{position:relative;display:inline-block;text-decoration-line:none!important}.vue-custom-tooltip.is-top:after,.vue-custom-tooltip.is-top:before{top:auto;right:auto;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%)}.vue-custom-tooltip.is-top:before{border-top:5px solid #000;border-top:5px solid var(--vue-custom-tooltip-background,#000);border-right:5px solid transparent;border-left:5px solid transparent;bottom:calc(100% + 2px)}.vue-custom-tooltip.is-top.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-top.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-top.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-right:after,.vue-custom-tooltip.is-right:before{top:50%;right:auto;bottom:auto;left:calc(100% + 7px);transform:translateY(-50%)}.vue-custom-tooltip.is-right:before{border-top:5px solid transparent;border-right:5px solid #000;border-right:5px solid var(--vue-custom-tooltip-background,#000);border-bottom:5px solid transparent;left:calc(100% + 3px)}.vue-custom-tooltip.is-right.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-right.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-right.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-bottom:after,.vue-custom-tooltip.is-bottom:before{top:calc(100% + 7px);right:auto;bottom:auto;left:50%;transform:translateX(-50%)}.vue-custom-tooltip.is-bottom:before{border-right:5px solid transparent;border-bottom:5px solid #000;border-bottom:5px solid var(--vue-custom-tooltip-background,#000);border-left:5px solid transparent;top:calc(100% + 2px)}.vue-custom-tooltip.is-bottom.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-bottom.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-bottom.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-left:after,.vue-custom-tooltip.is-left:before{top:50%;right:calc(100% + 7px);bottom:auto;left:auto;transform:translateY(-50%)}.vue-custom-tooltip.is-left:before{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000;border-left:5px solid var(--vue-custom-tooltip-background,#000);right:calc(100% + 3px)}.vue-custom-tooltip.is-left.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-left.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-left.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-underlined{border-bottom:1px dotted #000;border-bottom:1px dotted var(--vue-custom-tooltip-background,#000);line-height:1.2}.vue-custom-tooltip:after,.vue-custom-tooltip:before{position:absolute;content:"";opacity:0;visibility:hidden;pointer-events:none;transition:opacity 86ms ease-out,visibility 86ms ease-out}.vue-custom-tooltip:before{z-index:889}.vue-custom-tooltip:after{content:attr(data-label);color:#fff;color:var(--vue-custom-tooltip-color,#fff);background:#000;background:var(--vue-custom-tooltip-background,#000);width:auto;padding:.45rem .75rem;border-radius:12px;border-radius:var(--vue-custom-tooltip-border-radius,100px);font-size:.85rem!important;font-weight:400;font-weight:var(--vue-custom-tooltip-font-weight,400);line-height:1.3;letter-spacing:normal!important;text-transform:none;box-shadow:0 1px 2px 1px rgba(0,1,0,.2);z-index:888;white-space:nowrap}.vue-custom-tooltip:not([data-label=""]):hover:after,.vue-custom-tooltip:not([data-label=""]):hover:before{opacity:1;visibility:visible}:disabled .vue-custom-tooltip{pointer-events:none}.vue-custom-tooltip:not([data-label=""]).is-sticky:after,.vue-custom-tooltip:not([data-label=""]).is-sticky:before{opacity:1;visibility:visible}.vue-custom-tooltip.has-multiline:after{display:flex-block;padding:.5rem .75rem .65rem;text-align:center;line-height:1.4;white-space:pre-wrap}'),{install:function(t,i){var r=Object.assign({},i),l=/^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;r&&r.color&&!l.test(r.color)&&delete r.color,r&&r.background&&!l.test(r.background)&&delete r.background;r&&r.borderRadius&&!/^[0-9]+$/.test(r.borderRadius.toString())&&delete r.borderRadius;r&&r.fontWeight&&!/^[1-9]{1}00$/.test(r.fontWeight.toString())&&delete r.fontWeight;var s=Object.assign({},o,r);t.provide("vue-custom-tooltip",s),t.component(s.name,e)}}}(Vue); +var VueCustomTooltip=function(t){"use strict";var o={name:"VueCustomTooltip",color:"#fff",background:"#000",borderRadius:100,fontWeight:400},e=t.defineComponent({name:"VueCustomTooltip",props:{label:String,active:{type:Boolean,default:!0},sticky:Boolean,multiline:Boolean,underlined:Boolean,abbreviation:Boolean,position:{type:String,default:"is-top",validator:function(t){return["is-top","is-bottom","is-left","is-right"].indexOf(t)>-1}},size:{type:String,default:"is-medium",validator:function(t){return["is-small","is-medium","is-large"].indexOf(t)>-1}}},setup:function(e,i){var r=i.slots,l=i.attrs,s=t.inject("vue-custom-tooltip",o);return t.onMounted((function(){var t=document&&document.documentElement?document.documentElement:null;t&&(t.style.setProperty("--vue-custom-tooltip-color",s.color),t.style.setProperty("--vue-custom-tooltip-background",s.background),t.style.setProperty("--vue-custom-tooltip-border-radius",s.borderRadius+"px"),t.style.setProperty("--vue-custom-tooltip-font-weight",s.fontWeight.toString()))})),function(){return[t.h(e.abbreviation?"abbr":"span",Object.assign({},l,{class:[e.position,e.multiline?"is-large":e.size,{"vue-custom-tooltip":e.active&&e.label,"is-sticky":e.sticky,"has-multiline":e.multiline,"is-underlined":e.underlined||e.abbreviation}],"data-label":e.label,"aria-label":e.label,role:"tooltip",style:[{cursor:e.abbreviation?"help":"pointer"}]}),r)]}}});e.__file="src/VueCustomTooltip.vue";return function(t,o){void 0===o&&(o={});var e=o.insertAt;if(t&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===e&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}('.vue-custom-tooltip{position:relative;display:inline-block;text-decoration-line:none!important}.vue-custom-tooltip.is-top:after,.vue-custom-tooltip.is-top:before{top:auto;right:auto;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%)}.vue-custom-tooltip.is-top:before{border-top:5px solid #000;border-top:5px solid var(--vue-custom-tooltip-background,#000);border-right:5px solid transparent;border-left:5px solid transparent;bottom:calc(100% + 2px)}.vue-custom-tooltip.is-top.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-top.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-top.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-right:after,.vue-custom-tooltip.is-right:before{top:50%;right:auto;bottom:auto;left:calc(100% + 7px);transform:translateY(-50%)}.vue-custom-tooltip.is-right:before{border-top:5px solid transparent;border-right:5px solid #000;border-right:5px solid var(--vue-custom-tooltip-background,#000);border-bottom:5px solid transparent;left:calc(100% + 3px)}.vue-custom-tooltip.is-right.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-right.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-right.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-bottom:after,.vue-custom-tooltip.is-bottom:before{top:calc(100% + 7px);right:auto;bottom:auto;left:50%;transform:translateX(-50%)}.vue-custom-tooltip.is-bottom:before{border-right:5px solid transparent;border-bottom:5px solid #000;border-bottom:5px solid var(--vue-custom-tooltip-background,#000);border-left:5px solid transparent;top:calc(100% + 2px)}.vue-custom-tooltip.is-bottom.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-bottom.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-bottom.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-left:after,.vue-custom-tooltip.is-left:before{top:50%;right:calc(100% + 7px);bottom:auto;left:auto;transform:translateY(-50%)}.vue-custom-tooltip.is-left:before{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000;border-left:5px solid var(--vue-custom-tooltip-background,#000);right:calc(100% + 3px)}.vue-custom-tooltip.is-left.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-left.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-left.has-multiline.is-large:after{width:340px;padding:.5rem 1rem .65rem}.vue-custom-tooltip.is-underlined{border-bottom:1px dotted #000;border-bottom:1px dotted var(--vue-custom-tooltip-background,#000);line-height:1.2}.vue-custom-tooltip:after,.vue-custom-tooltip:before{position:absolute;content:"";opacity:0;visibility:hidden;pointer-events:none;transition:opacity 86ms ease-out,visibility 86ms ease-out}.vue-custom-tooltip:before{z-index:889}.vue-custom-tooltip:after{content:attr(data-label);color:#fff;color:var(--vue-custom-tooltip-color,#fff);background:#000;background:var(--vue-custom-tooltip-background,#000);width:auto;padding:.45rem .75rem;border-radius:100px;border-radius:var(--vue-custom-tooltip-border-radius,100px);font-size:.85rem!important;font-weight:400;font-weight:var(--vue-custom-tooltip-font-weight,400);line-height:1.3;letter-spacing:normal!important;text-transform:none;box-shadow:0 1px 2px 1px rgba(0,1,0,.2);z-index:888;white-space:nowrap}.vue-custom-tooltip:not([data-label=""]):hover:after,.vue-custom-tooltip:not([data-label=""]):hover:before{opacity:1;visibility:visible}:disabled .vue-custom-tooltip{pointer-events:none}.vue-custom-tooltip:not([data-label=""]).is-sticky:after,.vue-custom-tooltip:not([data-label=""]).is-sticky:before{opacity:1;visibility:visible}.vue-custom-tooltip.has-multiline:after{display:block;padding:.5rem .75rem .65rem;text-align:center;line-height:1.4;white-space:pre-wrap}'),{install:function(t,i){var r=Object.assign({},i),l=/^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;r&&r.color&&!l.test(r.color)&&delete r.color,r&&r.background&&!l.test(r.background)&&delete r.background;r&&r.borderRadius&&!/^[0-9]+$/.test(r.borderRadius.toString())&&delete r.borderRadius;r&&r.fontWeight&&!/^[1-9]{1}00$/.test(r.fontWeight.toString())&&delete r.fontWeight;var s=Object.assign({},o,r);t.provide("vue-custom-tooltip",s),t.component(s.name,e)}}}(Vue); diff --git a/package-lock.json b/package-lock.json index fab761c..950a0ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@adamdehaven/vue-custom-tooltip", - "version": "2.0.0-beta.0", + "version": "2.0.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@adamdehaven/vue-custom-tooltip", - "version": "2.0.0-beta.0", + "version": "2.0.1", "license": "MIT", "dependencies": { "core-js": "^3.6.5" diff --git a/package.json b/package.json index 8353bf0..420b2d0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@adamdehaven/vue-custom-tooltip", - "version": "2.0.0", + "version": "2.0.1", "description": "A customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.", "keywords": [ "Vue", diff --git a/src/tooltip.scss b/src/tooltip.scss index ed7bb37..e5ff748 100644 --- a/src/tooltip.scss +++ b/src/tooltip.scss @@ -122,7 +122,7 @@ $easing: ease-out; background: $tooltip-background; width: auto; padding: 0.45rem 0.75rem 0.45rem; - border-radius: 12px; // default for IE + border-radius: 100px; // default for IE border-radius: $tooltip-radius; font-size: 0.85rem !important; font-weight: 400; // default for IE @@ -156,7 +156,7 @@ $easing: ease-out; &.has-multiline { &:after { - display: flex-block; + display: block; padding: 0.5rem 0.75rem 0.65rem; text-align: center; line-height: 1.4;