{"_id":"@adamdehaven/vue-custom-tooltip","_rev":"45-42f36729e69b9bedcbfa36a033d5694f","name":"@adamdehaven/vue-custom-tooltip","dist-tags":{"latest":"1.4.4","next":"2.6.0","beta":"2.1.0-beta.5"},"versions":{"1.0.0":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.0.0","description":"A reusable tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"npm run build:lib && npm run build:es && npm run delete:files","build:lib":"vue-cli-service build --target lib --name vue-custom-tooltip ./src/index.js --mode production","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","delete:files":"del-cli ./dist/demo.html"},"main":"dist/vue-custom-tooltip.umd.js","dependencies":{"core-js":"^3.6.5","vue":"^2.6.11"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^15.0.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-service":"~4.5.0","del-cli":"^3.0.1","rollup":"^2.26.4","rollup-plugin-vue":"^5.1.9","stylus":"^0.54.8","stylus-loader":"^3.0.2","vue-template-compiler":"^2.6.11"},"gitHead":"71a5d41ac0d4be1d3d66b853b2ae659f9ad3e946","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.0.0","_nodeVersion":"12.14.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-oIsR1WCDD5vWle2toXajVHULKicV6lioqx9IFUcZ4GLcpxeEBnvJQarJG5V8OHhPxBbe8wBAnSRM5fJeo2aJMA==","shasum":"cc504634e6e5f71f55e4c75b1b68767ca35e367f","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.0.0.tgz","fileCount":9,"unpackedSize":240765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvlHCRA9TVsSAnZWagAAHV0P/iQQEgEsaCyL48kl7tM2\n4GaMsYfervS1GXJt1z4kyZH32+pGOkOEkHPNV1q7I69GcIKlr3GaPOEDlrf2\n7t39FcqzusVw1zOU5vOpfwuzQb3zX9tt5nlX/wjEtNqvmgR0t+TGMq/Wj9dI\nB4clMscppCi1fTcU9ujWw9ErVIiml8ndrwrxZqI+kOWwTooXG2MIthDEGPHi\nWjGeNL7P2NHnopwfK0X8IB0yZtKl1g1gXpRsMrvQwjFqw7hkJBi0IQ92+4TS\nTFQ1t2y1Z5qAZjVhsyP6nU4Ptmy+37HxufodBTFOdfqoGMJhJ4PN2fIMpCdZ\noEfVB7yoM0KVx3E6wsv2RCIVKL5S2PdgaDyaOxe+IDXBII+QCPwWMWIciJnE\nKFx5DPwPJsIKYrwaNiiBFHLn42+O63Dx2bvofJtBi86dnwCPovi/hltgod+n\n218seuCKdX2EM/wPTGje/LHChPcWimuQpOg0Q0KkCUbqa/LJ/SI/AWIBRIdr\nmA0iIRMsOR1BXhVU5A8hJ/2ujd+iCpExg1ewUEeqchGXiMB8+wwEabwmMmxR\nES9GFqJLPsmcdlVGXLMOil9K6auG7Cn5HBcEG5g1hY5M2N3P67uCO8MSmT99\nSIHv+khuEhxzSEDwpV8Gd3HhaVGQbmLy02JTd66J7ZYNhIrGX4BGXqKvm0aw\noLdO\r\n=lO4+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHaLvnHMDI3dJNv6rIW1ILWtsfrnPOW0zlGJasUT2uxqAiEAw8piZWqepMiHE3qGwMzxqZFi41j5UNo4xkPJAqKs+Pw="}]},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.0.0_1597962566490_0.24674750721133476"},"_hasShrinkwrap":false,"deprecated":"Version no longer compatible with Vue or VuePress. Upgrade to @latest"},"1.0.1":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.0.1","description":"A reusable tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"npm run build:lib && npm run build:es && npm run delete:files","build:lib":"vue-cli-service build --target lib --name vue-custom-tooltip ./src/index.js --mode production","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","delete:files":"del-cli ./dist/demo.html"},"main":"dist/vue-custom-tooltip.umd.js","dependencies":{"core-js":"^3.6.5","vue":"^2.6.11"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^15.0.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-service":"~4.5.0","del-cli":"^3.0.1","rollup":"^2.26.4","rollup-plugin-vue":"^5.1.9","stylus":"^0.54.8","stylus-loader":"^3.0.2","vue-template-compiler":"^2.6.11"},"gitHead":"44cb40f1d635d1ab6c4352c3d46908f7e4eb970a","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.0.1","_nodeVersion":"12.14.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-RKB8Liu5zvivT1EvtQuWpenn5KdgvjLXhVUpXw7HwoML0EQYKF/LO/BJk19KKgeLbmIAUAmN6L0fkLrcttq2tQ==","shasum":"1d0bf4ec7ab11fd7267869cc49cf5c1e16860fbb","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.0.1.tgz","fileCount":10,"unpackedSize":242949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPyWhCRA9TVsSAnZWagAAZA8P/R4Rok6aBs2I4G9+Z+nK\nRnYNvDM5oOXIGvcvPlFjtPhDw3DOfrTfm7D4HF3aARjRp2HdkYWgQTLyYqnG\nTSytZwIzkQlcmgJhMCuYytnXRGMpYQYvyV8VKTLDac63XeNbRzXOsj/TtkgQ\n0TqzoY2/lzOfA97/ZvxT3nOix3MoTn+J6ipshDdcSWDdKHN9hzHmY8zvfQZo\nD4kWDfLU5FizLwZe4f8okRuuqveHE4KQOYxPQyweESUC7o1IPSkJgA8GY3ek\nZ9m/mF+PtTIiZ57DXBsJytl6K2xgthAzuxsfwt9PPUWxif0Urur02xEMARZf\nTTgVDvBwHKQ25c6/WSSNjP+84G7oT9Nv4MdbNw1ibwgnoPaXvsRPYUFHvnU1\nCrFh+YzKa3HOSTfHbS8+44oRJWR6T7Xh1hRBxe0qIxO1lEA8g4g6Ezi7Z2/q\nkBce3JV6TAf0ipnAROlvCnloJQCOLaZywv7Unl2YsQSiEBe1E2R4auciqezP\nlnVfC44JNzYpJ47H7xvtEpDZFt0oQ+RxqEpptWzg7gUW7lJPPvygrJtTYwi8\nKkrUalqBiBjXPTZqT/4DU/1MT1k7Xdcf/iBTTRT6W+fVxfqmRjRcV8QR8u+z\nPyTsS0EUw19aKl4ewik3NCiDKjZrqKwQowxdjhaGuLetualgmHYBNnUAQfcn\nqllh\r\n=VtrR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIADc5OT+/0fUsKI5Cp1QDZ3UuFPiIxMHJoqN0D3D4lSbAiEA6YoiNjq7WEig80T03FhFpgjUmzuRPVqPf8PdDZ+4z4U="}]},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.0.1_1597973921165_0.903133461768473"},"_hasShrinkwrap":false,"deprecated":"Version no longer compatible with Vue or VuePress. Upgrade to @latest"},"1.1.0":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.1.0","description":"A reusable tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"npm run build:ssr & npm run build:es & npm run build:unpkg","build:ssr":"rollup --config rollup.config.js --format cjs --file dist/vue-custom-tooltip.ssr.js","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-custom-tooltip.min.js","delete:files":"del-cli ./dist/demo.html"},"main":"dist/vue-custom-tooltip.ssr.js","browser":"dist/vue-custom-tooltip.esm.js","module":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","dependencies":{"core-js":"^3.6.5","vue":"^2.6.11"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-service":"~4.5.0","del-cli":"^3.0.1","rollup":"^2.26.4","rollup-plugin-buble":"^0.19.8","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-vue":"^5.1.9","stylus":"^0.54.8","stylus-loader":"^3.0.2","vue-template-compiler":"^2.6.11"},"gitHead":"22974e57491dc62ff203a9d31b31e71c6074669c","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.1.0","_nodeVersion":"12.14.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-1YuRPl6ed6OD47I6c8kkxm3xqGkTsEpTVa0hGhlLTi32mk7R6vPt1BF6Ioa7s+sjdyDXROh387Zri5oRjteSfg==","shasum":"fa7e65866409ab3ac92b5341f056ebfa60983bc9","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.1.0.tgz","fileCount":8,"unpackedSize":71592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPzWsCRA9TVsSAnZWagAAW2oQAJ0ZlWzpl3XWFmozpeYW\nnL+hRQTuL5eNQdnwEGZqB+TXR5kCE+VWR3QIjBsC3dLMLlussJRl2xxeityL\nKwC2d7tyrSzjkk3atBopoB4LWPsUYsyGgEet/pbExGR9yvp0c8HJ3mF59F7d\nqrgQd50hPrdY1LoFjLOKDNeiVykIXmnRvMi8Da9hb5HLPLXOZtDKuLlgkzCx\nbRTOAuwrT46u8xkNQEr95PiQUKaF+KV2NBai7MeKIdWJXOvUUlEGcL8PRrQ5\nIv8Bi7/NX4vkHwQviA7redmiQOcWMuG55EIKBIUCbzPYjBkQE8VETdhV7Yg0\nL09T0E/qHWkVzY9P9vbvxouHUcUh+IDsrMzlLWWmUb7QfAakg3NukHOfRSms\nFCPPq6todSDmfatXdkrVEc0+BOSOpOjKRufCDiQn5HBCP13WWTRO74yzaKHt\nCuCBkDxRTUkUAHxr2JqJ3RNAWOMedaaUaKatkPml07b/CLGyuTNpZvyKMLzO\nzxf6RzRkC8bgBmBKZlHlc74YIUZe2cDaas402pYht41XO0kVnsI4Kvz/AJTg\nKy6Gi5q6WeWhznL88vQk1xpiSdvfUa+b64aSho/MqNCZchQpZu1qFEgbuyaZ\n9Brp1lEya43zwk2Nm0aOHkHIz6q0D3BhtZreFsVsWNdaamnmLdWq/+A1Wr1e\nTOyM\r\n=UKKX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp26Vh4RzMrlzllx2H6bbdDA4nrUJb4Gzq+SnMB6t76AIhAKEU3xN2gnxGB744wtt/8UHz5owJAZ5Ik92a+kg9GrHg"}]},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.1.0_1597978028072_0.19044527081787987"},"_hasShrinkwrap":false},"1.1.1":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.1.1","description":"A reusable tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"npm run build:ssr & npm run build:es & npm run build:unpkg","build:ssr":"rollup --config rollup.config.js --format cjs --file dist/vue-custom-tooltip.ssr.js","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-custom-tooltip.min.js","delete:files":"del-cli ./dist/demo.html"},"main":"dist/vue-custom-tooltip.ssr.js","browser":"dist/vue-custom-tooltip.esm.js","module":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","dependencies":{"core-js":"^3.6.5","vue":"^2.6.11"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-service":"~4.5.0","del-cli":"^3.0.1","rollup":"^2.26.4","rollup-plugin-buble":"^0.19.8","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-vue":"^5.1.9","stylus":"^0.54.8","stylus-loader":"^3.0.2","vue-template-compiler":"^2.6.11"},"gitHead":"9a8f4d7deb0ea892310e3434c46182f28f4c1351","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.1.1","_nodeVersion":"12.14.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-0D3mGsH7k+QXBlthK6C17qKVZdyo+1UnD4QAGewEdDIlvRcMit8QEjA5LrW+bgcLUUn97i/TCHz4NQcjCROjug==","shasum":"7fa40db95c80ab485cab57d76d446d8c74848007","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.1.1.tgz","fileCount":8,"unpackedSize":72948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP7mzCRA9TVsSAnZWagAAqjUQAIWfQZVbNfOZCD9v2q5J\nzjW1Gsb/4S890ahRpLAFv4YoxCRHk/I+UhQnRPbKkWYqQJul1munEpdlI1uF\ncqXvjPL+hpw7LMXhGi7/zvuVKcrETUQXlqLgDCn4rperQ+Zvy/6KM4gKVvz8\n3qx7yWOA+7KButpRYIwOSnr0W5Yeq2Ra/0kvI1YESBHwqpex0FOFj2uCGvHb\nUG5zjmWClg1W65S5I/NPRS4bGVwyB5shUC2wOf/S0ePik7H9FKwcoC4B4hVb\nrtaiXewBdKxS5JeyussIs+zOifphRs3/i6h9tjQ6gFS0rL20A/8LMnuWtix5\ngwXIXopBgXmgotVRLFf1FGA/pmYsrZRrS5lxE6JTzNNBlEliBGtyQ6XCVbeP\nqjJLiCXDvc5M1r0f3RmXYFTYQ0xJpNk/CBfyf5iIuN2rbVhHqlfwobKtt0V2\nDr9V0Jci4vXxOADpRvUy0mbmCbRv/6oHL1dTGfHosGGWF44MkwIJBW/wo1BE\njVA4BY25yrODLYVjaeG+BFqcpT9hwQQddgOL7gxVL1h1PhlPmh0/ySNE/ts/\nmvI9PW8yDtZ4GUVldMsCKpA/PeSdR6iknH+1c9aIzHtIekvyiey6zCPRRFMy\nqICbc2zzh/wX5fB9PwCNLfF49UsNX9JrHuDsBSLBEt8D+HNENhoA/nGSMUI2\n6TXa\r\n=Y8Cj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFXi5BU+yUv0icIjh7/RPJUeH+BMRNEtEtDPLXL6XGK2AiBBJfhIwXGSi9IcNCoSsacuTD5bsPIowErQlr2tN4uIUQ=="}]},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.1.1_1598011827067_0.7780850486351505"},"_hasShrinkwrap":false},"1.1.2":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.1.2","description":"A reusable tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"npm run delete:dist && npm run build:ssr & npm run build:es & npm run build:unpkg","build:ssr":"rollup --config rollup.config.js --format cjs --file dist/vue-custom-tooltip.ssr.js","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-custom-tooltip.min.js","delete:dist":"del-cli ./dist/*","version":"npm run build && git add -A","postversion":"git push && git push --tags"},"main":"dist/vue-custom-tooltip.ssr.js","browser":"dist/vue-custom-tooltip.esm.js","module":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","dependencies":{"core-js":"^3.6.5","vue":"^2.6.11"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-service":"~4.5.0","del-cli":"^3.0.1","rollup":"^2.26.4","rollup-plugin-buble":"^0.19.8","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-vue":"^5.1.9","stylus":"^0.54.8","stylus-loader":"^3.0.2","vue-template-compiler":"^2.6.11"},"gitHead":"5a7f2ba4913ab0cff720be90c6a87f683cf64607","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.1.2","_nodeVersion":"10.15.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-FiUicgCVMqbH8GYbO8H6GEMmkzNVXBJw0Ls17tmZN52cKwddEjo11wiRgVIcInVRPvO4rmvD1tHHpET9fKI2MA==","shasum":"ab107efb10a71f7be32e20d5eb59b895c8dd6acc","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.1.2.tgz","fileCount":8,"unpackedSize":71906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+GYCRA9TVsSAnZWagAAqs8P/jLLjtQx3+cfk3XZJRIZ\nrWDCeUFQTlfBeOZg4sFFsaofbqQeVjuU1NZNrP0FB4ZdnSRxZ7RVHtqH8C2A\nQ+k3egpszM1Hyxhl8ZAcM2jhDh3ryEFYojoNsY7l8ypbqNR+ZYM47It4So8k\nFwXfRLBz5sKPuUX5LpoB1kt2Be60Mdy9sMwrT1cqnhVTYakWv/vB7CNW+ebe\nuKAgD8Yj4ilPLbN2GdezTGdMwkhw9BtKhMCIObkDa11mQMmilHMfXYNevdXC\nz6Lbc380/l9/coUsHwsgXcvb7/qkOkUhq2c0187unbtOQKii0aDVO4MdjvHU\n4BwNdve3LAbi3zZJ86595pXwy/DUHcWXDv0Gjy25dxuhAdRd1tKTS10gR0pt\n9w+feKrVVNAq9o7/m419T3QRHscgZes066iK11jpHPQ/c5H/594etvSDDYpv\nbeQThBFiu19hRH9AH8KZKCHS8AdEggib9o273hCw3JL9E2nPB+khSRq+FdUO\n09oLqH4iPtpeu08Bes4m2QdorJojyb5HCPD3Bm1lHyGId/Eyqr6xqFaDkbsd\nunQJusj6UgxOv4KRiKFh5vIeI5DaITDh2FLaeL8wPy2rUPZOuGemd0izGsSd\n6pOSMfWoV7BvfUZcl/k8PEvcErO980yszu/0rrdvu4zXk/F+SISY8ZXp1rAf\nXIAJ\r\n=l0uj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDx/GGa3B7Sk+XZa5EidpYzqMqnFFQcjeLfgb4mQCd/CQIhALT0QqbYunYENyNz30KOml/vIsP7ymoviW/oicDdFC2m"}]},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.1.2_1598022039964_0.32143783048882413"},"_hasShrinkwrap":false},"1.1.3":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.1.3","description":"A reusable tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"npm run delete:dist && npm run build:ssr & npm run build:es & npm run build:unpkg","build:ssr":"rollup --config rollup.config.js --format cjs --file dist/vue-custom-tooltip.ssr.js","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-custom-tooltip.min.js","delete:dist":"del-cli ./dist/*","version":"npm run build && git add -A","postversion":"git push && git push --tags"},"main":"dist/vue-custom-tooltip.ssr.js","browser":"dist/vue-custom-tooltip.esm.js","module":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","dependencies":{"core-js":"^3.6.5","vue":"^2.6.11"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-service":"~4.5.0","del-cli":"^3.0.1","rollup":"^2.26.4","rollup-plugin-buble":"^0.19.8","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-vue":"^5.1.9","stylus":"^0.54.8","stylus-loader":"^3.0.2","vue-template-compiler":"^2.6.11"},"gitHead":"8a0dbb4eacd458405495dbb25d43bec87a9ec4f9","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.1.3","_nodeVersion":"10.15.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-75H0bOoxnnwujQQ4apdZO+VuKdSLgMxIxdhKeUJtr7AJNx2j3iR0nUk7QnLysq0UwA3cD5ZGft8OCTOITMO8SQ==","shasum":"f38e2fd46d779d01275daa4e1f275804b5a3dc53","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.1.3.tgz","fileCount":8,"unpackedSize":72319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQEFsCRA9TVsSAnZWagAAmLIP/R8NZEWHvjU/GpNb6aLe\nN3HAElM3PuUT1gn7LOIXLvO2FRjvUudK0dux2tFKr0/VuhjKie1Hk0+NUYAE\nTLZpLkJ46RAcUkcdZIAMcCC6uy5QJUL/BqcAl5jJ6p3XpYGYiJmNZ+c/ZXoA\nxREOE1fTFFyK2+bgLtPfxk06flGQUb2vRYTOno8fG3DL5I26LrWBHc9gSgnB\nu5TN0HczcByVOWaxIoQo3j+Zv3qgTto0oa+07pjo83FBzcDIz8sOwvLAft4j\npZzEUGxaQa+3NHI8hZXDdfGfGjuwBaR2/oL90M5PNWg7zLyks1zpF41TZdBa\nfDoL9hrn2vb9+WIB5v3o9XMd3Ln5qV4pSDTbMdfQWYyOMKzOVFwAnA68iEnq\nxqVppF8XO5kGPTAz+6sMLgOiVNUbHXsmzcg9FYHAYOulxiGTpQG8NEqIj+rJ\nLFxvRHSrCXMI0wLe2He7LEE0MaBuv7yAPCTldjlm0zQZEo+0qaLp9X/IglAR\nGHigS+8zuVTHuVAk1/2fUlsz4GYuq1T3YxP1YmPySFrNKE8fZaH+OIeRYlTJ\n63vDEtS9p26iNFApuHQFZ9SFXfl1brV5BgUe3rrLoBTro7GZHuwY7mJeqZm/\nOzwM8sEflutz4IWo6NPpusOYJ3/i/xGTOP2xUi7E+agBSlPFLP4U+bHi759Y\nZ3Iz\r\n=DmBM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFodzwxX38BSV0Y7Web0XoEskkEC1t1GmZ6pDDqQzD+gIhAP8e8EozTBgWENSPUY2hU8svPhTYueXPydaPke1xOsNP"}]},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.1.3_1598046571459_0.03320559952053226"},"_hasShrinkwrap":false},"1.2.0":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.2.0","description":"A customizable, reusable, and reactive tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"build":"npm run delete:dist && npm run build:ssr & npm run build:es & npm run build:unpkg","build:ssr":"rollup --config rollup.config.js --format cjs --file dist/vue-custom-tooltip.ssr.js","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-custom-tooltip.min.js","delete:dist":"del-cli ./dist/*","version":"npm run build && git add -A","postversion":"git push && git push --tags"},"main":"dist/vue-custom-tooltip.ssr.js","browser":"dist/vue-custom-tooltip.esm.js","module":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","dependencies":{"core-js":"^3.6.5","vue":"^2.6.11"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-service":"~4.5.0","del-cli":"^3.0.1","rollup":"^2.26.4","rollup-plugin-buble":"^0.19.8","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-vue":"^5.1.9","stylus":"^0.54.8","stylus-loader":"^3.0.2","vue-template-compiler":"^2.6.11"},"gitHead":"b5e918df4ab5fe0b26c4bdbe1dab975bce2cb4a7","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.2.0","_nodeVersion":"12.14.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-Vm7iiC4NYk+uqRdTN+n7/WaFto3AV/sPzDRCQL/kLg3XHlxbkakzEk1pjq9P+Sn/aVq76hg23NUMrawBQ8LH2Q==","shasum":"f2b33f8152c42e817c4efb076d3af2a89fe2c13e","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.2.0.tgz","fileCount":8,"unpackedSize":73996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhuCCRA9TVsSAnZWagAA5WIP+waEq1zsSf2cqp1CqK3e\nWDKUjWPIl3xk/fyPJYZabI4Tmh1m7WGo/ckmq+0dwA57hSaZV8D/Pjp+Wl73\njwIHQyApxE6tmN/tzpkbsDwAWkPAlQ5cTU3Kt6KWxPlH62Ht9tj4ynX+05ty\nt6ozeptekUp/qVaQtLqSdIUmli5fCHl0RTH8cezk4xiEEFUvdExNIRMVVhkZ\nFlrj8/RdpHjJ6VlL2NOJcbRRk3u68wkNLu8PadRUJYRhrz343G7KIDUL07OQ\nZ8lXtRuRqY21ZivDAu1PDEHPfk+S9pDIYk2Bk0VUOeLzXGjRMQWFEAG3h7tw\nPlk9YkfsnjBLZlSGqrW851hB7zbfGiSDFNs6LmiR90ScEc22Umcd9eYfxSPD\nCQCHUJvSN+z0WcOsQUIZWVS0C49E/h82VsH5blfDFApKu7cp9S+WZt//qQhp\nKygoF6XODSIi1C9ysT+vlDR4XGDDloGieHWNnefCGkwRQs7s0wUFsc3dyBLX\nx1xKQMO6NKNEKXtN56h34S1BmDWVeP0XZN894k9xGVHXh6EzNukL3L4Coe77\n9Tl7XxePuYS8Tvfy5E1kVoFfMYVolmuu1FfEky9G6wP1X4uP42Rcdrs1kHij\njBlKRtg98drYtiv2QpG7j+bPpg3V3jfw69r4mgsjMQ32f2K2Hl8Zirkdqmrg\nmyZK\r\n=Qsx9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIByi9Oh62vgGlJZOTGAC/yxncxT1HsTmzmXCL7wGbThdAiAxbw9KduhVNVx3chpJej1ZS5Dv0zx3tQqSsdiPdlkvTA=="}]},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.2.0_1601051521345_0.8441356614641107"},"_hasShrinkwrap":false},"1.2.1":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.2.1","description":"A customizable, reusable, and reactive tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"build":"npm run prettier:fix && npm run delete:dist && npm run build:ssr & npm run build:es & npm run build:unpkg","build:ssr":"rollup --config rollup.config.js --format cjs --file dist/vue-custom-tooltip.ssr.js","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-custom-tooltip.min.js","delete:dist":"del-cli ./dist/*","version":"npm run build && git add -A","postversion":"git push && git push --tags","prettier":"prettier --check .","prettier:fix":"prettier --write ."},"main":"dist/vue-custom-tooltip.ssr.js","browser":"dist/vue-custom-tooltip.esm.js","module":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","dependencies":{"core-js":"^3.6.5","vue":"^2.6.11"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-service":"~4.5.0","del-cli":"^3.0.1","prettier":"2.1.2","rollup":"^2.26.4","rollup-plugin-buble":"^0.19.8","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-vue":"^5.1.9","stylus":"^0.54.8","stylus-loader":"^3.0.2","vue-template-compiler":"^2.6.11"},"gitHead":"c0c3acbb471ea7574792379403331d559f490465","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.2.1","_nodeVersion":"12.19.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-HyPXK4mL9kJt9CAZ1BhBlcrek2sbfTrtOV1hV3qOO77xueSinVMgL/VL5O7Y7L/4EqRScOjY+kJE5h+31ljKvQ==","shasum":"d9da42b0cf8cfc819baf93354d16e5e06ebb3e63","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.2.1.tgz","fileCount":8,"unpackedSize":71378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnHBeCRA9TVsSAnZWagAAIZ8P/2uD2q4uTZ83m4Cqz59R\noj2YZCiG58dC/S7LVX1EVQhArCoL1w80RrvLtP/RNDepAuw5PMGo/CrWyODc\nqeyEuI5P+rb0nDmx36KbnMKrFBTEU8dQKwZ0IPIx6EYllcoVowteXGBaNrBJ\n86RbpmOHoNatWYxC4uy+xnbavec8LIHRtbxclEsCVW91qyNkcXGNWIFmdv4a\nzCE3rX+Pxrfeig38Fx+CtFjKIEuvng0J7Zp/QGR//tMs1NNbuuVL3i9K/on3\n9gMjHB9GXU0PIcuKl3C3dr+2nj0RPO5tVl5YYK2DjTXL73jgov23epW0k4c4\nTageWP55ZrzLpQo+oYosjDUYHCFIBLkDMucclLxBcPZF7Kvl/d5UDzi/9a0y\nBzWbPWa1RFC4Dl0ZRe++/4fpB+30yiplGfZUBEupQYAlhZofE4s1/hhHEdFP\nmdFi6mB/+EwhGNsOD8kNRvAVARj6Yu7OTB6ReSjTXXghxFbGj1dYVGTM42dd\n08bhZdErUAwZLct6AwhasE9XmcsA9koz1l31ZqbYVbYn49MKLUGYLB0LsarY\nMgkNCg7cVkdz7+2JJirLwHZD3+zJchPEAU4siCnIE0FHP9vfaS4nRWAGyIEX\nX+bWBKba1NEmYuptrBZ51rSPYRSt86PATEYfuUFsBsP2eGYiVAb4yEeNXQVS\nueD2\r\n=rcaL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhUFzssopaUF1yE12nF9dg0SEgpfKrfuzgcEIIvbSg3AiEAxNNzxCnyBf8zLKxOTvMjZD2VFg1v+IuFlQOSx0wHj30="}]},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.2.1_1604087901492_0.7220773203162092"},"_hasShrinkwrap":false},"1.3.0":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.3.0","description":"A customizable, reusable, and reactive tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"build":"npm run prettier:fix && npm run delete:dist && npm run build:ssr & npm run build:es & npm run build:unpkg","build:ssr":"rollup --config rollup.config.js --format cjs --file dist/vue-custom-tooltip.ssr.js","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-custom-tooltip.min.js","delete:dist":"del-cli ./dist/*","version":"npm run build && git add -A","postversion":"git push && git push --tags","prettier":"prettier --check .","prettier:fix":"prettier --write ."},"main":"dist/vue-custom-tooltip.ssr.js","browser":"dist/vue-custom-tooltip.esm.js","module":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","dependencies":{"core-js":"^3.6.5","vue":"^2.6.11"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-service":"~4.5.0","del-cli":"^3.0.1","prettier":"2.1.2","rollup":"^2.26.4","rollup-plugin-buble":"^0.19.8","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-vue":"^5.1.9","stylus":"^0.54.8","stylus-loader":"^3.0.2","vue-template-compiler":"^2.6.11"},"gitHead":"5e0e935dda08f9a254765eac1b8eca5dccb7c4a6","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.3.0","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-85c37fOp/7lKxA9cwhdSiCfViz+jQp9UrbSbt5Q9lNeAWQAkPY/ydgSJZHYNbUqwf8Qm9m82KaUK44ksLwqq9w==","shasum":"e7f3d27cbb1836e0acd59f00bb9e9b12100446fe","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.3.0.tgz","fileCount":8,"unpackedSize":72708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQUICRA9TVsSAnZWagAAz94P/jFZlFk7hVv+US/VpeSp\nqjTCejB5AfVKXcPQhaAO2RHr0I1JKN2eSaasdLi+UU2IC2SDaMIcmfsdw1Ef\nilzyC7hg+dgadVpJgClrXdjuWRmBuAEFY5W9BGzgmkrKoChXBQ9PRT0RcaPe\nQ0vBynAqsKwiQdnbCuHqWJp6jqtUXncIS9LtMze3pddQ+d8rpFIwHAyWCC7Q\neqb+vxhfMqX0FaH1AWYZIadbJ5M9Kw1HerLFtQ7To/HrV6Riy0DmkFf7GBpC\nyPIs2VUEFNzzUBk8+xWJkZhJKgfLdEiuGsBqs2g5zo+LvpvvyLXgCbGODoSy\nNCXzJWyvtKBSLGpru5C7yF7uHxl6EcTc8mr+K6zTaCFXNKFzLDEDYPISz/8o\n7P2hQMZxhXgSuuPr5koAgqK9A1Hktmujqd2WLL8YDZ03t/H3PuZD9ZEOfar7\n3+KxKsvrIkXBi0tRtegwbTxSq0E7CSh/j4F5WAY/cuWoJ5Er/t3HIm6T2JhV\neIpm9+VzB9lfOPkI3y+L0Vp3bwXRL9mAsvDZ2JWHbHY6DWDSAd4YEHpTWGS9\n8jsWQt6isjxshK7KHqd6LlwEwi6qK8lK/1oUWNzofWdPh/k7cvCL/IWP9y3u\ndZxbkZ/psuO0hh04Tzu32d7f3lHITBWO/S/U59H7PJlvsrKRs/qazD1YRmFP\nhJ9/\r\n=6NmY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC1ZtG/Z9+pKV/qo7BmocOIo+9BTgiINuS4XyBwFWTBhAiABGFkBx4a0sTm/pIxAQU08NX4TnLkcw+U7Divzfw6Rvw=="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.3.0_1607009543505_0.2806147158507073"},"_hasShrinkwrap":false},"1.3.1":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.3.1","description":"A customizable, reusable, and reactive tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"build":"npm run prettier:fix && npm run delete:dist && npm run build:ssr & npm run build:es & npm run build:unpkg","build:ssr":"rollup --config rollup.config.js --format cjs --file dist/vue-custom-tooltip.ssr.js","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-custom-tooltip.min.js","delete:dist":"del-cli ./dist/*","version":"npm run build && git add -A","postversion":"git push && git push --tags","prettier":"prettier --check .","prettier:fix":"prettier --write ."},"main":"dist/vue-custom-tooltip.ssr.js","browser":"dist/vue-custom-tooltip.esm.js","module":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","dependencies":{"core-js":"^3.8.3","vue":"^2.6.12"},"devDependencies":{"@vue/cli-plugin-babel":"^4.5.11","@vue/cli-service":"^4.5.11","del-cli":"^3.0.1","prettier":"^2.2.1","rollup":"^2.38.5","rollup-plugin-buble":"^0.19.8","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-vue":"^6.0.0","stylus":"^0.54.8","stylus-loader":"^5.0.0","vue-template-compiler":"^2.6.12"},"gitHead":"49d33f40ddda4ce5fb059866ae7217fee72d2c09","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.3.1","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-G/ieeq9YhIEa5JcdsMplGN3KFUfM4DfF/T/Hm6wuH0T6TrVYg/uPH09f/qt76a0NNo9Kn5rSIJGKekPK/vxPDA==","shasum":"b5858fdf1eedfe48b15657fb10cdd6abb51cf6ef","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.3.1.tgz","fileCount":8,"unpackedSize":72871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHbElCRA9TVsSAnZWagAAqZUP/0SdNxgtfnBI/p6LZhMc\nX3TA7w6X8OtBc2BqD+UBYFsXiYKwQv2jt/y/Oud9R1QyK+lJJX5GPtGZTJcB\nK91CJvbkSmSoqBPfPnStfD0ieMvbaa8oHli28hfq01m39s3CQuNMTsPJvY/g\nY62Lmei3m7Jbp5O5QLN9TbPfqzQNY6UbK0Zzu2hf1m6bXapweGmr2WNYYXV8\nBkYspcnz+pZMn6EOcHrxkuyDKa2UbMOQp8xPwOKtcYzI7t5xIDnevtpV8F+g\nIQzxGu5BMUFxLg5XG8t+dXUXUdkZe76W6vLREBV/7ySSPS7eXQgRfCUiM2+A\n/LkOA5stGALakX7I5kRZmGr3cQwKngWk2flCKh2lRBNSkEGPoSDbs0HZ8Z2W\neTyYHWIzqIFpFcwF2eb5Kq3pzgA6YsYwgja7/4loh4vCp+f69Og+YaHlDNM+\nAKUv8asPNoDydkPXWdZfDTbF8Vzn9fqo9NTuKub4qssX+LN1GkPVAmZb8xi6\nHXO3HKIw6h1O72CeGTIO1ImjoO+2XRTq+oTUKKSTknbBQnmPjdF21qBZlWhI\nkJ+/JwmD7zHHdqANdOInqsfZ8sHe6jrmr0+DiQw6tfmKBTv4conemUsqIlDm\npI9Ocb4JMju5kUOgr9dmzUTDrJX2OIto8fI5ZlrYANE3/+LL/LBZUGD3FIHV\nK7K9\r\n=l6oL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICtuqBwvovqPWlpTbuq2OMwGHPKNfr8OmaeqJoSMaBTrAiABh4kkENvzTGMxt1sfsZrKn1KRIYsQV+OSheXfLbo/Mg=="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.3.1_1612558628482_0.5978317979150791"},"_hasShrinkwrap":false},"1.3.2":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.3.2","description":"A customizable, reusable, and reactive tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"build":"npm run prettier:fix && npm run delete:dist && npm run build:ssr & npm run build:es & npm run build:unpkg","build:ssr":"rollup --config rollup.config.js --format cjs --file dist/vue-custom-tooltip.ssr.js","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-custom-tooltip.min.js","delete:dist":"del-cli ./dist/*","version":"npm run build && git add -A","postversion":"git push && git push --tags","prettier":"prettier --check .","prettier:fix":"prettier --write ."},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"main":"dist/vue-custom-tooltip.ssr.js","browser":"dist/vue-custom-tooltip.esm.js","module":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","dependencies":{"core-js":"^3.8.3","vue":"^2.6.12"},"devDependencies":{"@vue/cli-plugin-babel":"^4.5.11","@vue/cli-service":"^4.5.11","del-cli":"^3.0.1","husky":"4","prettier":"^2.2.1","pretty-quick":"^3.1.0","rollup":"^2.38.5","rollup-plugin-buble":"^0.19.8","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-vue":"^6.0.0","stylus":"^0.54.8","stylus-loader":"^5.0.0","vue-template-compiler":"^2.6.12"},"gitHead":"26c989dd13ca202ffd4c7f9d7c415a562fd7a6ae","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.3.2","_nodeVersion":"14.15.5","_npmVersion":"7.5.3","dist":{"integrity":"sha512-1jg4AIDD/jQEBoKlOK/BfsZcBbIafkxfIGNCBX1vcUUN9UpDI/lRM/ueHsJuOOyjkTw7/TaM7SlZ1DGzF4Mojw==","shasum":"40afa9e8813fdb984de08e70de3ebf1e751d0a20","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.3.2.tgz","fileCount":8,"unpackedSize":72761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpRB/CRA9TVsSAnZWagAAfuQQAJm4Sc3yAXqlYN4YsJYE\n8UFgkNPY7woLFG101GPxJnGY8bvh3AJk5nYA8LuKbNgLBxZecjh+l4EIzYCw\nHWDCirl0TJsmuhLrBHAxvxrS+YujYCq4IXM9xjQn98p0CVIcqRFcdl1Rzyv3\nKdrdafUMptAkGS9qob6c8MDtMesb2wofjvLygXeV7JG+cSyRolX/nCUYHXe4\nyrhVXI93snR0xafKImBAPF9dxES89oBn2Ii7O56O2ZpSGa2x0XKCvMNEojOR\n8P4+aVHhk/F6lKY/yTFL5MReL5N8WTc9oPDHdeFK6O45+Ox5pUlzjSMpTetv\n/+SajhKDOrr/cOH+L9IdUnqOPJFh1rSq+raPfKEKGymkO0RiIZWmWXODXMDn\niFm7sC+vREXEr/oMbhTGLxvUNQ0ce3TTa1+i2vcC5luncmKa7nT87jStMVDs\nz5/1e7TIMJYKaxFGFpe692pjPJtEoEGydq3RMx+4oxegED2vKPbOgFP0yTAo\n3DyOcPoZ8tUN9tZWml5RTMaATp14fA80guXtOUNW0NuZBgI7rClpDGNOHWNA\nhlYB+cabPezrI6Bc/aXS2veFe+l0Z+XFfTfuNA0v4qTqWatAV85fp+gd53AT\nm3Q9ZYWwtkvDT2dcfItHei984BvpVQ/u2T4qB0wPKBjlHZFYNjK3QwWJOHQn\nlwSe\r\n=AwPA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUYaeb91c2p/L0UFbfk/2Bc0qitzRLB+rqHzZWBDitPQIhAMfpC+1bBAv9zhCC6B18I5SQpX3rKYm5uwhbBpGQRVK5"}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.3.2_1621430399407_0.21622535328000803"},"_hasShrinkwrap":false},"2.0.0":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.0.0","description":"A customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.","keywords":["Vue","tooltip","popover","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.6.5"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^19.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.11","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^3.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.0.0","lint-staged":"^9.5.0","prettier":"^2.2.1","rollup":"^2.51.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.26.5","sass-loader":"^8.0.2","typescript":"~4.1.5","vue":"^3.0.11"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (2 or 3).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```js\n// main.{js|ts} (or your Vue entry file)\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component before calling 'new Vue()'\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Install the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Install with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Install with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element.\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component (no options available)\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install))_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. If set to true, automatically sets the [`size`](#size) prop to `is-large`.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"e0a9c12690b775be8e99cf9ef2fd513e3af4ccbd","_id":"@adamdehaven/vue-custom-tooltip@2.0.0","_nodeVersion":"14.15.5","_npmVersion":"7.5.3","dist":{"integrity":"sha512-QjDI95uoVvmPH8IbKHFi/9DGoOW320rBC5/HKthMS9QLU8LRbQD+LA02xyWdDzLJJFJ21xdyyPqWhKkBlwKbxQ==","shasum":"d56027aa97992120f96f3ad72704e31723e1a85c","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.0.0.tgz","fileCount":10,"unpackedSize":44478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwSjKCRA9TVsSAnZWagAAYjMP/R191J6gZAIP0IarL/xG\namGxn0EGZBGCoCrEBAhK0LuNdqN5nAQuBgWozMsDwNIQ/yCCDPG0x99CMT9P\n+HcnTVtIm+NsyqSARKtuw7kQ5ihMdWWHbeFbqHn8YV9bK4A+f24oG6AfVe1S\nKab1dzQ/M3fJhV+RGval6qA+gGZmYWYDPitLDmLPWQLGDk2SvnGdeqrvzwTJ\neYe05LTO6WawW5HOvn01QIEZDJKwXZP/Ekyf6KOxqv7c7caBKgtVr7l+UAAd\nb4j8jjEbwxdjXzlWM9GU3dHTyeMqochQh6J4nqnfgJzpLZN0+kKL+76gmm78\nxeAUrnzzjflBfOtynI4xkG7+XdIALOpcHHsTlUYt29/SKzvJyheVk5Y8F2qX\neDotfvaGsDu2HHHLKbhE7hNfWxdytbGWbhdHcojcAlnZbcOnlOUpiiniRzhi\nJ3eQAjE+/PX3G1YYPzPUa3ZvdrpmvpvrxhAWLnaTQGfdDVYQ+iiZ8Jte1RAS\nXDzcWlw3blKTinWji8nDkhzGuUvEiChZboOiUULw6vTlFjTyBSvY+3N5l49o\nC8HM4PZ1EhYwCMTWz5X2F3ul2zJa6EeNzzWkDQ9XPTKh6ZLFVJ4h+qRUl0ec\n7xna6pk3NnpB3mvwB4ElaACe/6FZUvtcLz7xNwuvbb32YANsv0Wt92Q8QH7q\n44fh\r\n=nrQo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFjxQZeFlCtLs2MjPXs1ang39Rsnk/mN12r1UUxQ2ghWAiBri1c5hC15sZu6ISmWRTqcTl1pt+Tf4tSe34a1A0WkPA=="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.0.0_1623271625876_0.3675505731842983"},"_hasShrinkwrap":false},"1.4.0":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.4.0","description":"A customizable, reusable, and reactive tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"build":"npm run prettier:fix && npm run delete:dist && npm run build:ssr & npm run build:es & npm run build:unpkg","build:ssr":"rollup --config rollup.config.js --format cjs --file dist/vue-custom-tooltip.ssr.js","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-custom-tooltip.min.js","delete:dist":"del-cli ./dist/*","version":"npm run build && git add -A","postversion":"git push && git push --tags","prettier":"prettier --check .","prettier:fix":"prettier --write ."},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"main":"dist/vue-custom-tooltip.ssr.js","browser":"dist/vue-custom-tooltip.esm.js","module":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","dependencies":{"core-js":"^3.8.3","vue":"^2.6.12"},"devDependencies":{"@vue/cli-plugin-babel":"^4.5.11","@vue/cli-service":"^4.5.11","del-cli":"^3.0.1","husky":"4","prettier":"^2.2.1","pretty-quick":"^3.1.0","rollup":"^2.38.5","rollup-plugin-buble":"^0.19.8","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-vue":"^6.0.0","stylus":"^0.54.8","stylus-loader":"^5.0.0","vue-template-compiler":"^2.6.12"},"gitHead":"19355b107a8bcaef19cdcae457d689eec2d4f116","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.4.0","_nodeVersion":"14.15.5","_npmVersion":"7.5.3","dist":{"integrity":"sha512-764KPnU0Te+VomtbHYA9AZjeVO35vn3Tr6N95mdN7z64VCzRakYBSvMe/eZrN2/Cstwy3O1AARWpZqGv8KAy4g==","shasum":"9c748eb55554819502791cd80ff57d67188209f1","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.4.0.tgz","fileCount":8,"unpackedSize":74538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwS9ACRA9TVsSAnZWagAAlw4P/0z84Rha4RyCgv8f2001\nEvqvSQJsNhBhX5KRfXE9MUpJB13OxifWglU+nWC5de23KnZRMSesFFAqHh6I\np1fBzYrK5W4Iq4gWKmNZsnfVytwMQQ7mNmI+t3LmszFXGvb9MUu1+nIK0NTp\nAs+JyRYPL0UY6MY/Xh9zm+J6ja7r5qC2wcwQ+ORb/U3++6P/5i6/1bpnVh+s\n6TSvNdHgKAY/N7BJXKhyJszOjxHeNuJl7Ob323c03W5dSKAkFreEfP9ChpYf\nUNkpf/MKO8Y5uu/P136qcxQ8FzLuULb75DT1OyXxRHNE295knPY5prlw3q6f\nGim37NCffp0CRU+uq+RkgKObyAoG1MAx0Jydgr8wRPzI6fyqmRJuXHm14ARz\nJGS23N+1To+VFD+2rHLxnv4pIwkSThV01bRb7soeZjVqc6l/4zf16aqveAMb\ny5cpZ058UXrvVn67oiR3PTkLh98aahxIJ/d4/FOF85ErXPBzfmdz4/pSlDOn\nUI9GzSY7fGlUUklLPZ6xUh94WOlb7Dj+zziST/lLSnuqmf1QbaIoUspU9ott\n+qMCxz1RexhE/1ye9hfAMYnmn6mYhdODjur5broFlRI8ld3XZhTv/tCdoTDR\ndvnHJ7A4DKKbLECGSejHR2UDvREUww488HSag5Iel1hKUE/iWH04w3uGFMtl\ng3Yv\r\n=1TqA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8vSWIfIGpQ+z8q/ox4Zl4/qQu0K/Ucdj3bjFrFJEuRQIgHKGf99qf1AMloz3HWrc+E6MiIZWHBySSQ2rQzKyuwe0="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.4.0_1623273280187_0.8139927112849059"},"_hasShrinkwrap":false},"2.0.1":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.0.1","description":"A customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.","keywords":["Vue","tooltip","popover","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.6.5"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^19.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.11","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^3.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.0.0","lint-staged":"^9.5.0","prettier":"^2.2.1","rollup":"^2.51.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.26.5","sass-loader":"^8.0.2","typescript":"~4.1.5","vue":"^3.0.11"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (2 or 3).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```js\n// main.{js|ts} (or your Vue entry file)\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component before calling 'new Vue()'\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Install the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Install with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Install with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element.\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component (no options available)\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install))_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. If set to true, automatically sets the [`size`](#size) prop to `is-large`.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"52616cd2465989ec1b0cd74cd449776783ba0806","_id":"@adamdehaven/vue-custom-tooltip@2.0.1","_nodeVersion":"14.15.5","_npmVersion":"7.5.3","dist":{"integrity":"sha512-D45OWNKakH0M0XtAKhzSw8AmupvR9jULkcoH0prLcJ1sT/HS34n0bynU212LpxxrNATCYwH9/p+thPZBTH0YZg==","shasum":"f3878130e99298ad6ccfa8d38cf4a90402a97444","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.0.1.tgz","fileCount":10,"unpackedSize":44739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwTIsCRA9TVsSAnZWagAAuKAQAIWqI3PWquvvpQC0XHvW\nTj9Ak6swaA2+DWSr6W0Bc+yRSAjhZkjRKas/U+NjUFuz/CpYKnDXCG+8X6uV\nLaNwPjgC9UB2DpNtMHqJXVYohPbdlbAi2sl7L0ra5N+G8ZeFoh8w+4M8oE9A\njOa+FondZtc/dKm1OSIUaKR33y2oaXMvkwzTskRP0GYJmVculgagQGMfUCFJ\nwO6RE+7l0NcAgrN5CM0TZ92NtMG3Yh7tilQooU7b3VFekk03+xL8jPp9SnQR\nwX2qmPbieqtBkz7nWCg6GbKspnkoS87LpM3NXjQSXA0J/DptnBxqpc12s0DY\n02hLotx7B5K6C1gm+T8KYpQegtQnQZu0NHI++eg34+S1pjjScwm4uwlIJ+Ya\nXLv7UjdRNuTKxbUnVr9YP+t3Wv7md2kzecJvq0q+Qa5YlHS0tX+XXpoQAiq/\nC+2tOZFGT788e89UbafrElE97CIInG2Ng14xPkEmyGPy9/colLJ/BLWosLZX\nlObLKEj/lnzKbXVFM6mViXTfBjZ3iEdQocqQ5e0ohF9rNAofvnxMD7NzDKW3\nhWGx2Rq9o/Wcc+qBxrEx90C8eFbcKe55PlC00+CPQQ93+/EjHl0krb3vRNT1\nGI+3xebpzV2/QJYoSa12JbcvhRFGBnERl18sF9uOXDGyjWRGYeaLnP/E7mxK\nYSHm\r\n=zxBW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1oTwPjEA2JRSmnwEGdk4oKVlR/3zwltx2L2AeAygYBwIgHGkqJcmPUF/md4rx+gdaxI1BsPSq9cq9b7bhNRP4nAk="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.0.1_1623274028126_0.028569510024797573"},"_hasShrinkwrap":false},"2.0.2":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.0.2","description":"A customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.","keywords":["Vue","tooltip","popover","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.6.5"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^19.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.11","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^3.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.0.0","lint-staged":"^9.5.0","prettier":"^2.2.1","rollup":"^2.51.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.26.5","sass-loader":"^8.0.2","typescript":"~4.1.5","vue":"^3.0.11"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (Vue `2.x` or `3.x`).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```js\n// main.{js|ts} (or your Vue entry file)\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component before calling 'new Vue()'\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Install the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Install with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Install with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element.\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component (no options available)\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install))_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. If set to true, automatically sets the [`size`](#size) prop to `is-large`.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"f42a9fde0f60331b87fdab0b4fe9668896d60e6a","_id":"@adamdehaven/vue-custom-tooltip@2.0.2","_nodeVersion":"14.15.5","_npmVersion":"7.5.3","dist":{"integrity":"sha512-FHTnwWWWyGzFO/wZokbSdffdjI+m9TQdQIg/TRZ5EYhOoGuxhloKRnFZGyr9daDB6wdARDRbOGCgaqGrGmXkDQ==","shasum":"083e973906aef0f4298f61ec310bbc31b0e149c8","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.0.2.tgz","fileCount":10,"unpackedSize":44478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwo/NCRA9TVsSAnZWagAAf0AP/1IWcliKX1MHxhFZm1Ch\nB4AWqH2UgLEyXsXIUlYRB98Z4QIi5U30869SmuXT40yrdNJu27QxOwTRovUX\nriUc/GTwkw4r2rXUrYbIm+yIfxWT+2Z5z5+MtPxI5PuCerWNjWvyhvxJEk1L\nonUloHJxPdLF3X9TGXHXUplKqm3e7+8l3XPejUNdrM3i/UoEyjaompU3YKO3\nrhdAiuQiYhYSp7Mx6H0YtopwJhQ0Thv74Im8wR7fdc4nWkA0csVUa/WRBzPD\n3wupsvnuUYBfsuqg1pO9/WP6wnlJSNfwHd3/fvRCauYPYkB/isLNCUenNqN5\nCnpBkpMb6gI0BSEwqHxUfcYq67aBkBhQBygq+8phHO9LYY8CpxFb3pX+AHKN\nxW9y6hvh9EB+s64Ao0I08j1gn5h2dTR20rt6liZlQIKFawL9kVPlCTYTGUZG\nVXdDZUBi5NFJh9nA0sv/9j9Z3esMoH3dCV/4fqZBMp/Yakn/HDOjJn8X9n8C\nkfB8kJEfdKHhS0U3BnTgsevDInbc95MkZ9WmuAXbwO39bQoLtkDajp2frlFw\nDbnU2MlXY8pNgvZetlAF6eu0LpCYT6AycJPzf+WRr+44Zpue24h93xDuR1v8\n0SdbWtk1wbm+a0y6KAOQry0fs2faqGuUt5wYM4I/xqaElO+icS6lPljbzLos\ny2g2\r\n=CKr6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAStJE+GwLnk2HPlvLfaHuhyUD4aBwDKrpAWCj6bcsQwIhAMyckgUYbWEwn7ijWSuIiGMjyxMwbDuynJ412y6+SLo3"}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.0.2_1623363533256_0.09576675852276151"},"_hasShrinkwrap":false},"1.4.1":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.4.1","description":"A customizable, reusable, and reactive tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"build":"npm run prettier:fix && npm run delete:dist && npm run build:ssr & npm run build:es & npm run build:unpkg","build:ssr":"rollup --config rollup.config.js --format cjs --file dist/vue-custom-tooltip.ssr.js","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-custom-tooltip.min.js","delete:dist":"del-cli ./dist/*","version":"npm run build && git add -A","postversion":"git push && git push --tags","prettier":"prettier --check .","prettier:fix":"prettier --write ."},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"main":"dist/vue-custom-tooltip.ssr.js","browser":"dist/vue-custom-tooltip.esm.js","module":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","dependencies":{"core-js":"^3.8.3","vue":"^2.6.12"},"devDependencies":{"@vue/cli-plugin-babel":"^4.5.11","@vue/cli-service":"^4.5.11","del-cli":"^3.0.1","husky":"4","prettier":"^2.2.1","pretty-quick":"^3.1.0","rollup":"^2.38.5","rollup-plugin-buble":"^0.19.8","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-vue":"^6.0.0","stylus":"^0.54.8","stylus-loader":"^5.0.0","vue-template-compiler":"^2.6.12"},"gitHead":"b6e790f5137e83046ba905094bd55c60e288a982","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.4.1","_nodeVersion":"14.15.5","_npmVersion":"7.5.3","dist":{"integrity":"sha512-QUU9Sg12cCJoYxBEGmmqsYCkhrq6tL62FbIYjLu401HfHqokBZxY18i5chOFlbarnE4WWBSGnhYruqpS1Exrfg==","shasum":"f59fc686c67f2f925fcf6a07b5674ef38547d3e6","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.4.1.tgz","fileCount":8,"unpackedSize":74933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwpEWCRA9TVsSAnZWagAAX2AQAJuI11WDrags+ggYEd7v\nqos/KmHh+XrpQ3wcD2Erb3o9HjiYFOFgL6y8HJF5MBOZ1c5rv81Do3SSWrxN\ni95Sum3OlNAetNP0zrrA5Cz6GzqVZgcYVR+ySO/vkNdJtL+Fezkwtq/c55yK\nkTD8VkfIRdtAZWRQgVP8vtH6gUDnkvh1MHeBjZdtNyfGy12b/wfKMJxm/ci9\n2p14CNy7S9tnPeJyilkEyMzUUDNIpxKw+ZMUM1mUY2+G0E8vJLPD631jDSPu\nYfE1YfTPLY2X0lXIk2cq/+DiPtC5noNKBmwDGtGsKM1Fx57JqQ6PIn/aAvo4\ntss1tkw6INBqeMhHGATJg7EPnjCakvxDPIOGH4bPTigP13Hd3xoJeJxCnTl7\nsPxB2fteR96804M8YHGTjlNGdaWW0ypIKm0l+kw/mNbuXpzvUCZi3leG9VmV\nCHHJdVCiO1Uh/D8qECaMWAMtAeTku5g4ZW6YkaVybNu7jglujEWLcE8Him7M\nawqxhsZVTc8CksW9yzFPcqiSDbeA8xYsftQAeAM5dTW3Q9bggPUE+Kc8j2oo\n5kkRxfbP5D5vPaqyoYdaIwC/fkmzks2IyKSk4g7KWPKnHpq8rTmbwtKsKqCb\nQA/m37BLh3Nj6WRyEU6LSvQ3BsMMk6BqgPYfKNZIA+Ak9/Xil7o9BJbPBNht\nvvjK\r\n=RAlJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICut+rUOOPzljs1koTD9VMBEtvWsY/+sgjcUY74QvX/LAiBhpDIqEH3isYB2b5ILktG2tvSl/J3/1wFKrx75VrBY/A=="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.4.1_1623363862555_0.3469985824658137"},"_hasShrinkwrap":false},"1.4.2":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.4.2","description":"A customizable, reusable, and reactive tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"build":"npm run prettier:fix && npm run delete:dist && npm run build:ssr & npm run build:es & npm run build:unpkg","build:ssr":"rollup --config rollup.config.js --format cjs --file dist/vue-custom-tooltip.ssr.js","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-custom-tooltip.min.js","delete:dist":"del-cli ./dist/*","version":"npm run build && git add -A","postversion":"git push && git push --tags","prettier":"prettier --check .","prettier:fix":"prettier --write ."},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"main":"dist/vue-custom-tooltip.ssr.js","browser":"dist/vue-custom-tooltip.esm.js","module":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","dependencies":{"core-js":"^3.8.3","vue":"^2.6.12"},"devDependencies":{"@vue/cli-plugin-babel":"^4.5.11","@vue/cli-service":"^4.5.11","del-cli":"^3.0.1","husky":"4","prettier":"^2.2.1","pretty-quick":"^3.1.0","rollup":"^2.38.5","rollup-plugin-buble":"^0.19.8","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-vue":"^6.0.0","stylus":"^0.54.8","stylus-loader":"^5.0.0","vue-template-compiler":"^2.6.12"},"gitHead":"3d1caa5536a5e73cefcc71f3ad9617f78616fd6d","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.4.2","_nodeVersion":"14.15.5","_npmVersion":"7.5.3","dist":{"integrity":"sha512-Rs30bmmGnZbGDaT3fLbDLrbNbgCOgYqH1O0VUl2SZE2/ft6dG0CsSxCwyTWjFdvAJKWqMOP7MxIFkEs9jBfe+w==","shasum":"d367293e2a910215b14f81e8bea28d5ab7e2d80d","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.4.2.tgz","fileCount":7,"unpackedSize":72841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/uxCRA9TVsSAnZWagAAo+EP/A7F7p1F/YRCn0NqdTWc\nDtI7yjQz0++vxdOPam+dQgbcjqPGvNnNEjheBIs1eM1zdpvq8RcgDiZ2nIIf\n6TiPRt7jggC9iymIQYaAlfFDD8wO08Atk05mzE+T+gJmB11GIusDKee0A37s\n/hVsU3/wWoy/oC+zkXrEwX47/RSpKC1zqUBoXjR7e2xbolEDbY1gg1wHGknC\nNJ+sARLi4U6/vTgGn17l8GoSsYK2xWDRZptJXYxlx+QTwYLodglARW3HgXFq\nSehbD2IcXImQoI5WdzSbBe8WLTfjihey7pVBZzZAkai5T7g7G+Dl85ubAtnh\nzXhW/7hkg0pR3Ms/BTEK1H0hZ+S/5Qrun4DjzW/8Rg/S7Kw4I6Bx/agCgtKI\nUgYrXCL1kc+ppsSMpDV8RMPCISM6U4rXnyV8P0AqrRun7Bx7ee2Qj33lqfPR\n+huqGSH+whhcp8bXv5miesmiuCC+X3y83MlTfcoZ29ULnvRny3CJpQZQVKJo\nLNLbNNlBwKlaWxYlV8rAoxJoPiozl7PEbsJ57iaL7J8mFE7BljbmU5zmY9iG\nXPL0tBtZ0oqmhw0sg5HocJd7eJYN5eY50teZkO7u2QQ4XjOnJ6mgML2GhpDl\nCN5vN6q3tUfLjBVhnkNVsLyIrPQiVuNOJHHGIf6WLkgj1LUU3E7cinlPkgej\neg8/\r\n=yPU4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyzAlU+IxQIx9grEClgWzDZ0DZyMTwmFp59nbjDEKOEwIgVv+3kLDbjHq9hVWIJsly8/gvca2DS0dJzIHCgHEaZ00="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.4.2_1623456689188_0.2537317035796858"},"_hasShrinkwrap":false},"2.0.3":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.0.3","description":"A customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.","keywords":["Vue","tooltip","popover","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.6.5"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^19.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.11","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^3.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.0.0","lint-staged":"^9.5.0","prettier":"^2.2.1","rollup":"^2.51.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.26.5","sass-loader":"^8.0.2","typescript":"~4.1.5","vue":"^3.0.11"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (Vue `2.x` or `3.x`).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```js\n// main.{js|ts} (or your Vue entry file)\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component before calling 'new Vue()'\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Install the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Install with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Install with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element.\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component (no options available)\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install))_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. If set to true, automatically sets the [`size`](#size) prop to `is-large`.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"a0e741c8ceae7a6b0b988904f783dc474503863b","_id":"@adamdehaven/vue-custom-tooltip@2.0.3","_nodeVersion":"14.15.5","_npmVersion":"7.5.3","dist":{"integrity":"sha512-IHDBESbTJoaEfsGRseIW2Biboq6DvwdYOuiLUbowyjeKYSLwKclQkTR3rxPIC6npT9VUT1hr2HECcYer9et7YQ==","shasum":"87ae65add3025f7f7e6ee460846e1d0e85824ea2","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.0.3.tgz","fileCount":9,"unpackedSize":42853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/vFCRA9TVsSAnZWagAA+V0P/ROtP1fHtvbURhdHMkFu\nKqC5RA9ibELdUFz+CB4chuTpmbHL6MWcF6na6JK3Nkxf1Izf6LB4+9i60VON\nOmbjl3BeiUnrbhIPtL+L7Nf+l7ImDcgVBpTpR1PYziezrMrBMce96D6D8P1G\ntUIRM31Ow2zFKXFUxNuU4a4GpnrKBym0rm7wOlVMSmTkjmSNHEOQC4A69lLa\nEpwizBQiD47OJl50h/y07C/eqnB9WsB/t26x5w5yAYgd9f19UYvCru/wdh2g\nXdQUqljI3kOXXO/Xh2rpBKkNvysl6IJA5F4x2VAkItmIxRvXzTpewwoKatOP\neg1iE6keaqW6glPscehSdlFcBDUeMWAtQGyoubHFGMGUP/QF6ehT8AQYx/xO\nRwPVO1BICw4MM3MVZvBgNkxQhtjSaIGXRLWxUZ+30qtQ6PMSj4C2AzfGXZs/\ne3eReDkVsuBc7mgzsF81ymi9q2BNF6zyYrE3avMAq94YyY2QbJjgzVzodC/3\n9RdrTwZ4Q1v4pS7ppYGoC5h87/51Nqdue4vx871dRq6n0iO0gdN7ca8diDGf\n/pgspTruDsLm7ztQqpyhtSXOTdc5dZ75L1mWxgykABe+4QiDN0KGT8ydsAk7\nYnvjAxf8YY8ZnSmy8SAkalCNs/sOQ6Mg/TL39r9Iwd6Y3agkJmMdS56PSVaL\n48hH\r\n=DzFT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTbLb7fVaESbCUmZWmPrKkS+wUqy8ciwn8skXpwg9hPgIhAPwfuEsSpe/UlE6ovlwYsMZstS4txMNpE289ET8FpOov"}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.0.3_1623456709479_0.4944871355472684"},"_hasShrinkwrap":false},"2.0.4":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.0.4","description":"A customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.","keywords":["Vue","tooltip","popover","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.6.5"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^19.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.11","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^3.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.0.0","lint-staged":"^9.5.0","prettier":"^2.2.1","rollup":"^2.51.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.26.5","sass-loader":"^8.0.2","typescript":"~4.1.5","vue":"^3.0.11"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (Vue `2.x` or `3.x`).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```js\n// main.{js|ts} (or your Vue entry file)\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component before calling 'new Vue()'\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Install the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Install with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Install with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element.\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component (no options available)\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install))_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. Should be used in conjunction with the `size` property.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"8e48a1cdfceeeb4efcface1b2413d54477bde3a3","_id":"@adamdehaven/vue-custom-tooltip@2.0.4","_nodeVersion":"14.15.5","_npmVersion":"7.5.3","dist":{"integrity":"sha512-Fg205cnRS/5Z0zN7jgyM6l2r71HWs7gNuyMenXPzp8ogtouopW+7bejN6wd2T3JbrJ1WwfM5oK5ZpW2bdPjZDw==","shasum":"3b0edc996cac7b012d89c6ed4ce888c300fab519","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.0.4.tgz","fileCount":9,"unpackedSize":43571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxKcXCRA9TVsSAnZWagAA/CIP/As0X4ij63MF7a7C8sPA\n01qdgxNH+g5nh268gidzAWQETvhQPQrOvABuoQ5opfZS0mIGETXBiFi26AJI\ni6GlJ33mMx2XHQ/yhUowJrtecqoAZazjizfuqDeCrjQt3deDXUrpHWYf4PyJ\no21ivfBOIeVwLWDBlRvBAHvaaKushTalDljcZTvG8Fb24nivwVo6nHpoe576\nJXyMcliQHyCOo+9bDp4WmDa/OFlMHbsCdJv/sFyN8TsBEAkV/Yez2rJJzEX5\nnYzG6MDSlKRpqFVGlzliKot2v6T/T3vUUKmXhwwHTJm9j7NXxLeRC18PdjST\nUwfU2Duhf6espBLFiNGHIN+S40rnREZwKzSsMWWYNSeS045/gF8ptvT0OoDr\nuKQ1Ya6lKgZLcwNT/mYn7Mpe3mESAj/GzfoN0gvRqJDcrwwuHpiT48/NeEMf\nux+CD/qX3zhJ2DghGLOxf2WOz9ZH+nG6fTWboiN6AV4/f22OsXLaTL4fO+I9\nki0vnXmyXSLtqKkES5cNlKDkdr84IjAubud5uTrJRcu8I6b054nDlRaHeahN\nszylmjQX3sZ1L+zxXGDQtpT7JJ8G8o+ftFFWK90sMd6l5W1t1u21KyXRjJ5I\nqC7uE0cDQd6igzQ8A62a43R1ykiClI9vnS+VwsPVrOkHL/0UwJGRy4MvXYbd\nhInm\r\n=JaVx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvZcaDxCf26Hejx/47M6hpZmuVOrrguJrsgrBFW2lJ4AiAA7GdspMXmW7jQpP0f7W/T5HX+sW6F2OYC6YZgZ0ynkQ=="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.0.4_1623500567691_0.9813154544354008"},"_hasShrinkwrap":false},"1.4.3":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.4.3","description":"A customizable, reusable, and reactive tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"build":"npm run prettier:fix && npm run delete:dist && npm run build:ssr & npm run build:es & npm run build:unpkg","build:ssr":"rollup --config rollup.config.js --format cjs --file dist/vue-custom-tooltip.ssr.js","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-custom-tooltip.min.js","delete:dist":"del-cli ./dist/*","version":"npm run build && git add -A","postversion":"git push && git push --tags","prettier":"prettier --check .","prettier:fix":"prettier --write ."},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"main":"dist/vue-custom-tooltip.ssr.js","browser":"dist/vue-custom-tooltip.esm.js","module":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","dependencies":{"core-js":"^3.8.3","vue":"^2.6.12"},"devDependencies":{"@vue/cli-plugin-babel":"^4.5.11","@vue/cli-service":"^4.5.11","del-cli":"^3.0.1","husky":"4","prettier":"^2.2.1","pretty-quick":"^3.1.0","rollup":"^2.38.5","rollup-plugin-buble":"^0.19.8","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-vue":"^6.0.0","stylus":"^0.54.8","stylus-loader":"^5.0.0","vue-template-compiler":"^2.6.12"},"gitHead":"dc60e8cf90bcac24249ac0aeeea28c41ccc02d9f","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.4.3","_nodeVersion":"14.15.5","_npmVersion":"7.5.3","dist":{"integrity":"sha512-slAT7BjJY2/kjaEUmwZsZC2pg5kB2ljSRoCkzVZURPK3wXgVEZ4rgp/6BmcAZQtJPvT92IePNBeS7ysTQQbLXA==","shasum":"c8f68556126ff93cfb48cd2e7dba561cedff9030","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.4.3.tgz","fileCount":7,"unpackedSize":73217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxKgRCRA9TVsSAnZWagAAPagP/2TL/9SYdKRHwJQ5t9/J\njX/IODmEBXRXjeAp0a7zZ+sFijF4NhZ1vCfH0kzTvNiXt8l5sEB+XlmsISCi\nojZOkDYwbzj/MZdi4RcG1WEYtl4VSCp9oT/LrVAh1S3BCnWph+2IrvLLC7Pq\nPUNLRDCyrNeNpMDumwmhQSq4l5buiKoj68/bz1bsXgYis8D++U4H1VkzQcXR\ngBK3c4e3nwmolbFesF79XHJIQyQYe4UN3GrTjV7egBsRNXzzJrIn/pO+oXN6\nKrRwRG/U1Np5YHOTmvbGV13faFrZJyfJ5VD08sM0j4SZdnBS5rjKunSY1Cfs\ngTknjWBPtrmpDN+HBXpvcTe5QRshBGkLODEIAvRFpEhcKE5kE4aidsECTgf+\nCIq2aYdbDz9bVHtwbXmQJFqR9qDwbRJkH+N5FMMH2Ht3Epj1IRggo+ZDxLC5\nyr+gKcGxudmHalvpGzbqsSSkUwYvg3FaHIJTbgI+68ACqXCBBeyTF3VbBSJK\n+NsCiULit2ZZkUlX4FXfPGELB0EJLMI0FBccO31W2cA/UypI37idmTOlgI6s\n75pm1fsA+Yd5a5hcmcbGuHkkBEjotzrqIY4Cd90H8XO9MYY1xTvYlMOJ7yyn\noBQe0KMmaWQs4II8gcj8sMIjPQy84CxE9WvUuNXecpcMPyomM54WNSnAw93b\nc2eN\r\n=hUOZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGMj+Z8rQIe5fRuWiOxG0Zt4Ka8UmdQIyINeRvd9Z8ksAiBMhP6t3TffHqCWWYffGzw2fXYG+x16dyQG8LL76JaTSA=="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.4.3_1623500817128_0.2962441418473083"},"_hasShrinkwrap":false},"2.1.0-beta.1":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.1.0-beta.1","description":"A customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.","keywords":["Vue","tooltip","popover","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.6.5"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^19.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.11","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^3.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.0.0","lint-staged":"^9.5.0","prettier":"^2.2.1","rollup":"^2.51.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.26.5","sass-loader":"^8.0.2","typescript":"~4.1.5","vue":"^3.0.11"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (Vue `2.x` or `3.x`).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```js\n// main.{js|ts} (or your Vue entry file)\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component before calling 'new Vue()'\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Install the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Install with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Install with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element.\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component (no options available)\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install))_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. Should be used in conjunction with the `size` property.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"8e48a1cdfceeeb4efcface1b2413d54477bde3a3","_id":"@adamdehaven/vue-custom-tooltip@2.1.0-beta.1","_nodeVersion":"14.15.5","_npmVersion":"7.19.1","dist":{"integrity":"sha512-W4Any/0Z5MUSn5b9GDlTr8FT4ZBDttFmc417dGmVwKlv3ZBLen/em7KNE2LlqOONFeO4+iHWvDv2sTCY4TBbAA==","shasum":"7f8ac642d97aa62a2ac847cf8e59db6c05e7e2a8","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.1.0-beta.1.tgz","fileCount":9,"unpackedSize":43578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBEr3CRA9TVsSAnZWagAAKNcP+gL41ASyOzn3RCUl9qut\nqn2WNX6m0gD2p4wehHeKOmNJLRg5eoGuRIZMUP3ciW4Rkmig6kGxe5i7mPWk\nXuduWDMY0B7VYE54E3O0pOt39HFSpK1Up09yq5lRIICWE1v89d8mXsqYk3s1\nVsiX1DEFCo0WgsURDnPWVZhuAcKKi4IwpeVH/KcKig73hn9hITJcKAGdvorU\nnXTcwuLR1DYQsfqCoDihnNFImvVPD94mCQTcc5ZlewtZD0izDLsZHQVwDx8L\nrK0lEJ+QBkQOQgcDCBltIt1w0/AXkHh84tJe4+Ne2axk3JvCg018bzk9rD3z\nHNzxsxYQ7ajk8Q2PwDPKNftU4nitkGVVUknNtFs91rnAgiHN3bQPhjPdA45C\n4zqM1BD4tjGUfREE70kWJv8yCXcmvokZDSGyO7LdEfiHXDOZo4L8EOtnl2AV\nWyoLAAdPRK6Aemn2rxGkx3PH9a73F3QUkWUnd0Es5OLmsALExt5gF0X1qN45\nv//KjmF5ebqIUlNTjq1I5CZ4pk3Vx8ORuWXCHYS6xjWQlNVTH8Du6Fb/Io97\nwGSum/1HIYo0xe127cxaURf7BDQXDC1rDlMv0Y0tXWfN3EHTEnmhIcPmsyUa\nyCYO61oSY0r77c3MVDStTS590+s5lmA56zs5k+O6bmzzQgKAAqzIqbYC81iU\nW1B7\r\n=tVtd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxN5/Aom1BcPD5V0K+7WctByeNVwOA7c17cZkv+FCKdQIhALzJDsHYjv/CoXO73jdJb9adRVPw6sKx7F1zSGE7HMMr"}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.1.0-beta.1_1627671287792_0.32460678039405444"},"_hasShrinkwrap":false,"deprecated":"Beta version for testing only. Upgrade to @latest or @next"},"2.1.0-beta.2":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.1.0-beta.2","description":"A customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.","keywords":["Vue","tooltip","popover","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.16.0"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^20.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.1.5","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^4.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.15.0","lint-staged":"^9.5.0","prettier":"^2.3.2","rollup":"^2.55.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.36.0","sass-loader":"^8.0.2","typescript":"^4.3.5","vue":"^3.1.5"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (Vue `2.x` or `3.x`).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```js\n// main.{js|ts} (or your Vue entry file)\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component before calling 'new Vue()'\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Install the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Install with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Install with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element.\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component (no options available)\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install))_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. Should be used in conjunction with the `size` property.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"8e48a1cdfceeeb4efcface1b2413d54477bde3a3","_id":"@adamdehaven/vue-custom-tooltip@2.1.0-beta.2","_nodeVersion":"14.15.5","_npmVersion":"7.19.1","dist":{"integrity":"sha512-XUw1bqZlhLt0BhV4CncUw/xqBwrMfC5G/WDr0EULFihQTSCn388Q7m5lhQ0xdCiac2VKKeMB+qxvRRW3ctbM4Q==","shasum":"374157a19c9a8585ceadea6702dcef3fc794c782","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.1.0-beta.2.tgz","fileCount":9,"unpackedSize":43305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE8ACRA9TVsSAnZWagAAmswP/ipJMjMyRRt3qB9nVp4K\nFnnH4W+DVT7h2i6PWdvrrI+sqKNY6iHS5+z0EgNTGtU4+G5UpgVsiHkkRRBT\nQtjVyqyRWz4z6h1fjoW9fdBWbAA2ojwEqnVtnJrwvWq0rss0sJtRVj4wCVJp\nsaCS0gJkTR/dpe9lBm6BPSpdjBWtGpUvu6xDPy/I/jsQa8ilj0yuOv8NqPbM\nuYK/nu+uf99UhHzuMiuAcgxl8KoxL5jWK3ovjPEAizC/B/FmGq9Z4bRoB9jC\nzkG+YGp8DSg+uD9B7lIp3e+SIrdiA/P2Q7/FxG4Y3Me41pcbrq7caf5W0Edt\nYQ8fC+J0YCqpcqU6FE/WpBcXM91wkKb2X4Wkqwg9oDCqPfsdjuVpPfqRZMbf\n0SVOk1486BeIPVwILZYYYrrRz0A6fbp09c8nkfOafmot8QU5rt8yDqfXXoGX\nQmJ4WlMe145z+0PWUQi1b2OdIzhNdcCXG6puZCsBidHdU0jF6UU0nzMDWKa0\nt7im3eVsFtjz7u/UkeGUs/PZEFVxCWvUHCgb2HTXWYydV1mg5Z2Hqx/Axtwm\nbUmPFPEvXNW1qL8C0FIw6xpJhPO1GEGUsp/XhEKin1rgJCtngZcDH7xwT0nY\nSQgpABe9amMtz3yqlQU1lVA6lHHW7TrgoSO9N9Bb/cutJBKB9FmEZWT8G09D\nm4Xf\r\n=3Dq4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLVCqfCaejMoBvwyeF2H6xmhf4hUw3dCdz3JUSZuUMMQIgfXPHSn74D06eJYNI2uAFakHkwFvxpKZzIzYVO4sXDkU="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.1.0-beta.2_1627672320044_0.5742879794279598"},"_hasShrinkwrap":false,"deprecated":"Beta version for testing only. Upgrade to @latest or @next"},"2.1.0-beta.3":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.1.0-beta.3","description":"A customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.","keywords":["Vue","tooltip","popover","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.16.0"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^20.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.1.5","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^4.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.15.0","lint-staged":"^9.5.0","prettier":"^2.3.2","rollup":"^2.55.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.36.0","sass-loader":"^8.0.2","typescript":"^4.3.5","vue":"^3.1.5"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (Vue `2.x` or `3.x`).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```js\n// main.{js|ts} (or your Vue entry file)\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component before calling 'new Vue()'\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Install the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Install with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Install with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element.\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component (no options available)\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install))_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. Should be used in conjunction with the `size` property.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"8e48a1cdfceeeb4efcface1b2413d54477bde3a3","_id":"@adamdehaven/vue-custom-tooltip@2.1.0-beta.3","_nodeVersion":"14.15.5","_npmVersion":"7.19.1","dist":{"integrity":"sha512-F2CJySIEIrRl3FAyvtSY2Pk0xah6SCHcnzfvY0W8lcQZxr5WdC1X6Av0+eAX8APi+LcSjOF6/OL2JTuP1onNbw==","shasum":"15633eb6a2b1fc4d1c337317c5e4f7a395003fb2","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.1.0-beta.3.tgz","fileCount":9,"unpackedSize":43891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE8nCRA9TVsSAnZWagAANdYP/jBZBom4nu6PEPt082YF\nxZK6DnqtqTlgVKB6AkPXezKgf2JcftLFP9tf4fiJGZpYjjGIjA2e5MRbNRbE\nnGfS2X9GGSvP/eSxnhEQXOkG4bSTEYZ0bEWHDWw9TDdXHXQi/XZ7qJz14QaS\n8KVXiaPBwpdU2i3KCLX3t9oiGWVWHEEBOJvzfwFPYo1ZMQmgCLfNIuTZ9bSE\nobogc4LLih+3skQV0+sd055yYY7hDJ1vVyAotvGifRZDek3L/uMWLGfhwwVA\nZZUqnzi6GWD2EWidBsNadVHnNwC3C79OcLwrLetnw4s25VvSWJ12Ragw01Io\nzvAhStCqVciQcE0jg/eD8cLWZsgbHv0SAbXCBhd9eh2tGxXi696Rat4Bznay\ndfbv8opgeiWO/5sStaI9uBzG3dFO4E1hCIYsPyhNMhEWuT83TWQqTFFGLC1A\nR3LPA6k9NyjQFLNBym5RemrVvrPA0+jOnPtrxNUtgitzdcRkMxN2BAQ6yjkW\noNIIhaiZMryF0BA4YGx3CGaLjpBubXQG5eGRYhtwkunnJripAsnC1hx5JKo9\n1RBe+VbyVfmc6lMViO3ZAOeCTb8PB5VrT851L7GG4hNQ/nrjxYEyhmi9q+8u\nPXQcAKaqG8WV225X9phbwNfEsYgNh2zm6z4tSExkruH8W9W9+QxMn2F+d5Qs\n0zrd\r\n=Iw71\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDI4LlSk5dfMwBuCcdOXFizrklBP3yWfwnPIs9I5gq8HAiAnCYWaVKN1albZr3/SC6kNC4IZSxO5UuD1nOJG7qZO1A=="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.1.0-beta.3_1627672359453_0.9356960447990668"},"_hasShrinkwrap":false,"deprecated":"Beta version for testing only. Upgrade to @latest or @next"},"2.1.0-beta.4":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.1.0-beta.4","description":"A customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.","keywords":["Vue","tooltip","popover","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.16.0"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^20.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.1.5","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^4.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.15.0","lint-staged":"^9.5.0","prettier":"^2.3.2","rollup":"^2.55.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.36.0","sass-loader":"^8.0.2","typescript":"^4.3.5","vue":"^3.1.5"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (Vue `2.x` or `3.x`).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```js\n// main.{js|ts} (or your Vue entry file)\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component before calling 'new Vue()'\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Install the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Install with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Install with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element.\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component (no options available)\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install))_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. Should be used in conjunction with the `size` property.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"8e48a1cdfceeeb4efcface1b2413d54477bde3a3","_id":"@adamdehaven/vue-custom-tooltip@2.1.0-beta.4","_nodeVersion":"14.15.5","_npmVersion":"7.19.1","dist":{"integrity":"sha512-3ZnDBmm8rigtaXZYM5ob+QR5MjLH5G6+osJB00HZ1F46Ccr1V4Jzgng/V1++N+GcjmoPQrSYjX2xaMJK1wRVgw==","shasum":"a635b431401c1e84ac1f826c36a4dfeff1968069","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.1.0-beta.4.tgz","fileCount":9,"unpackedSize":43894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBFABCRA9TVsSAnZWagAAHnkP/27JuAXZYUv0a2iH1lTu\nnOfGXuBXob9rJnDnHEa8U29RAVbzH+wkKK3omMbz06e91mbSHj7kJaN08XdZ\nazg/wpKcjAWE++rX3hR52MPIeLXiVpBEnbhGfKl2TRjd+bu/1hT0Kl8HYqs4\nwloT6uOsS5GWjug9BpDMzodSD01g+LyZFpfbju6ZmM11JxFDYUVueJ/v7RPP\nE/LFSzYJILIsqlgnJLqARE/QfOE614Gt/Tk2IMi6n7hDIykoiUKtZlBjevtL\nAYHC0rakQUS4wEwHrjw7F65gyq8i/ld/T47nw5CMAd1AsdsBDIwIiTiguIzq\nCWOJ1KqlfE9To7lXh1CVtzdVtc7+XGFwaE62gjMjv4gTBXbG9fZIEQu6BqJL\ndNbDZ4+va7/SpiMmihhrHtMaDK8pE7i7owiMZVqibXigXQxe4ay0+H16GYDp\n/b7Z6Q8cghLrd/VGEuJcNJX9LADCleGkwXDeUpBWheRNVKFSs08bR6oCTUJM\nibRYxdA9RWq/PRx+opsiCc/S0eOoa6D02KJJ2zp5erYsBFcqDjAZk9wqMzhQ\n7ULupzWVtKh45n8zgzRhPI34kx+hhA6GQ5iOQnsH5DEVcq9ZJGI6vs372JnL\n+wqFLEZ+MKhfRvbJ4UF4S2G3yZ3vzFnTX3j5RGptLdeZcqYSSPL2Qc752rz5\n+bwj\r\n=X/vi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA4D3pm8Fe8iH7/G5BY9XcrES/0STCRTPGq2gA28IKLGAiEA3Y68VIdCg4sZzbwscBIy9U9+1gxCAvkJwkn8pUFJEVE="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.1.0-beta.4_1627672577465_0.5652307295873791"},"_hasShrinkwrap":false,"deprecated":"Beta version for testing only. Upgrade to @latest or @next"},"2.1.0":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.1.0","description":"A customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.","keywords":["Vue","tooltip","popover","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.16.0"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^20.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.1.5","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^4.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.15.0","lint-staged":"^9.5.0","prettier":"^2.3.2","rollup":"^2.55.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.36.0","sass-loader":"^8.0.2","typescript":"^4.3.5","vue":"^3.1.5"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"gitHead":"e6ce3710056cb4b272d637e0ec693cefdef9938a","_id":"@adamdehaven/vue-custom-tooltip@2.1.0","_nodeVersion":"14.15.5","_npmVersion":"7.19.1","dist":{"integrity":"sha512-iSpAtTGx5FZfqaebQJ8yhUKs9rxKIHFzQMHoFXFn0xNi5wVI4van+BjzilMc2gaUzcY6YNZVIF5SLC4B3HSa/Q==","shasum":"9c881d2eb567fd51cea2135f65b789119849c727","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.1.0.tgz","fileCount":9,"unpackedSize":43781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBGAjCRA9TVsSAnZWagAAA8UP/0eakfA7Vqaw+FdQcbmC\n7NOvgdrWX8gb5hrHHNrTa27XtR7HXehIQqm+gw0RXNVoaGCHDQwmU4gzZRl/\n3nSh0MAJPihVzhkQW3lYgN2QtSqMttqCppkMvSxgrGgMxfh5DqygM+xBGSo2\nGeeGA0av9TNj5QNqamdPxdhdiol3+MZnJN4g3/pRAjwE1l6e9Ld/Na5PPhtH\nYQSTYstUuIGnlA6lLUd4TZDhon3JIsyvcsxOfjBZR+ZMEz8G/tq+PXLvF/uB\nWiCN77LJIF7qI8NTZb/wXwFTda/V0kZ9v3DzIVkhF9d+Ba/tXZBiXk6A3pUv\ninoPQUMV+G4j40bBhKLKMvUz2QPc7qaEmEW/gwHTBEG6M7Vrf+zXsw8K4O5L\n94D7vMXsKe0tYVmLaLAW4olXNnlUYpgQm8ZH8rCDc9YM2CbgVbmSWg0sp19c\nPyeOMLcJyhm8C1V8LG2PoHxW3pnLe8bw5e4F/JVUcR3k6wld6ucglZA6Nc/P\ncDOCf1n52K7pfAxRI0gLe/6yYODKcUMh54Lr7hhF35mbm7qV0ie1Tu/Z3TTI\neEqSbd74iDz/nHqoRQ4T7mn+8+a2SCUGytEeSROYdcgKm1ho2bV2mAnSwquV\nAe/yjAoJdZP5BNXU0rrcUk/qaV676JhWwniDnVWQ/43K2Fai8YP5Z8hn9RAZ\n4n1v\r\n=m1Tu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIET6yDp84CUqrwT2M49QWAKlNhDKmLK+ruvF4EJSsXujAiEAgbZLlh40L7jUQokYsYZGNgBJyzjjhmTJKvUW1aIEeZk="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.1.0_1627676706965_0.05731229729913734"},"_hasShrinkwrap":false,"deprecated":"This version is missing types. Upgrade to @next tagged version."},"1.4.4":{"name":"@adamdehaven/vue-custom-tooltip","version":"1.4.4","description":"A customizable, reusable, and reactive tooltip component for Vue (and VuePress) projects.","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"build":"npm run prettier:fix && npm run delete:dist && npm run build:ssr & npm run build:es & npm run build:unpkg","build:ssr":"rollup --config rollup.config.js --format cjs --file dist/vue-custom-tooltip.ssr.js","build:es":"rollup --config rollup.config.js --format es --file dist/vue-custom-tooltip.esm.js","build:unpkg":"rollup --config rollup.config.js --format iife --file dist/vue-custom-tooltip.min.js","delete:dist":"del-cli ./dist/*","version":"npm run build && git add -A","postversion":"git push && git push --tags","prettier":"prettier --check .","prettier:fix":"prettier --write ."},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"main":"dist/vue-custom-tooltip.ssr.js","browser":"dist/vue-custom-tooltip.esm.js","module":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","dependencies":{"core-js":"^3.8.3","vue":"^2.6.12"},"devDependencies":{"@vue/cli-plugin-babel":"^4.5.11","@vue/cli-service":"^4.5.11","del-cli":"^3.0.1","husky":"4","prettier":"^2.2.1","pretty-quick":"^3.1.0","rollup":"^2.38.5","rollup-plugin-buble":"^0.19.8","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-vue":"^6.0.0","stylus":"^0.54.8","stylus-loader":"^5.0.0","vue-template-compiler":"^2.6.12"},"gitHead":"dc60e8cf90bcac24249ac0aeeea28c41ccc02d9f","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","_id":"@adamdehaven/vue-custom-tooltip@1.4.4","_nodeVersion":"14.15.5","_npmVersion":"7.19.1","dist":{"integrity":"sha512-74kfeaw56bGhz96KXSbsg4XLnfaR+l+Mt11umK57+kk/T66QDHjjcpwJGEfjrF/+vvk7RIj71hAj4cbgXN7rpA==","shasum":"e250f453748510e8583f97ab27fc7a5c7ade8326","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-1.4.4.tgz","fileCount":7,"unpackedSize":73217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1v15CRA9TVsSAnZWagAARrcP/1rRE2QuWc7TiH8HBlAY\nAWJNmHVTGqUbo+x1aWYCKl4RBw5gPa19HxSUIIZILhROnDRNFpn5MvChQeo6\n56ME0aEz8d0kADbK+zRRnk2VhSuAhlQwf93jl61OwMMdG7ognAkVgwYt+c4h\n7wIbLj9xSzZf7WV0XjI+8nsBMJkJc1+At2CNs9tdqLopa6k781WqcNwqCoBR\neFST3hil0INrFKzXXDQa791TAuTTQSUzThPNzomkpZMwM+NNr3zWtvFVY73T\nsNSsolZ+URiJbVxCoeydol5BBL1DLJRErz9WzuAWybwT6LTeAQfegCX9ZuYV\npzDe0fkSBN1zpZmvqE1HpkfzW/+aDFIWOqItEskZtP47qTYKMYf0IKwp/YTG\n7YWxazm9vfHwMZTpBai7fyIGnTOzweiryLqnkisMiAfaKCCd7Y/2GXt3Pndg\naHKGWZwi36tZ18Gw3PSoC9VE4zev3P6cvy/zDgOhWUg387Xpqe3m7yWuiOjL\n1yXGjAlf8W7U8G47kLHVYlYUK9pbFlCPL1qdXIM8b661Or3WO3RwrTTsIVkW\nxDLTECxWybiR2PxAz7DflKNxIzAtIEz2tIHIGTwEy71ruxmjaxtztyQd3Ebp\nkJ2sFy0EdX2XuEuNWIOVmGloj8GUOM17M49yTdbmmzcz389ms3mWsgsSmu78\n5gsA\r\n=91Ix\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBH/wMqqpZeBcoFH/GhBvDqEs7RZ8/wG6v6ayi7i0RqMAiEAt9ZAAF8JF8AvLzyjm88G34u1aeXJosjcpYRC6RsZ12c="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_1.4.4_1627752913837_0.6447369348232217"},"_hasShrinkwrap":false},"2.1.0-beta.5":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.1.0-beta.5","description":"A customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.","keywords":["Vue","tooltip","popover","component","plugin"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.6.5"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^19.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.11","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^3.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.0.0","lint-staged":"^9.5.0","prettier":"^2.2.1","rollup":"^2.51.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.26.5","sass-loader":"^8.0.2","typescript":"~4.1.5","vue":"^3.0.11"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (Vue `2.x` or `3.x`).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```js\n// main.{js|ts} (or your Vue entry file)\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component before calling 'new Vue()'\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Install the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Install with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Install with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element.\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component (no options available)\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install))_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. Should be used in conjunction with the `size` property.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"fec1753f917d1115d69678cc8425719e31ebf320","_id":"@adamdehaven/vue-custom-tooltip@2.1.0-beta.5","_nodeVersion":"14.15.5","_npmVersion":"7.19.1","dist":{"integrity":"sha512-GG9In0D6TLa3GvOhdxAkc3c3I1KXwq9ThSDblsTQ4jdSrwr8Ml+RxszOUVRG/Na+HhEHPADUky2eRhn7M/RW1g==","shasum":"316bcaa53df2b79e8e19aa4a6c517ca443a087ee","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.1.0-beta.5.tgz","fileCount":11,"unpackedSize":51200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBYpNCRA9TVsSAnZWagAAchQP/jbsELpWGsuNsBM+dBzw\nDJDTRYtnrNiM3caVFAzimwOaR02AbWFDdaMA+d5s5LfNHb6fZmWTMREyqvxG\nHSLR+LMs8MievkoMR8qT9s0v3aCKfjkuG+ZIY5cUreQPjLxBmhDN+mGVn4L+\nTg3j3AGzto1l84zIHCVEqQ5LeoOiN4Wj0zw8v+xBaeefNgmrR/RlUHi8oR0u\nDAQnJ/IhorI+rmnXxWS0oA7BqnP59Vw/pN19aN8nc6U7aou4If3XD88y+z9s\nOmvqptkfElEIlQEX+LkULBEQDlPt0ig2bvrarrA21ml7llEhgdWEnwkUUDtf\nnpYpOEGB0N+mYIgV0xFjoJ9WAbMKFKnTlx1+3tvD6y1qK7v/YQ6BHoKBOwsa\nqoi9/wzZjBpPAFm9/gajhoeulP5sJlFSM1CInjWc6AjG4huEde3w2pLK39R5\nkxLlUWHpzpw8XH9/CmbMvXXX53iJWvRB3CWpFhcGh13KrP3yUR5RnQw8HV6Y\nxyeFDolZNwXRztKtId2T2AERdyOBRa1E9YIzNCLd/w6g08Yv17wj3SmfbR02\n0e5kayXQIJ2r+8brchx7IiCZTmJDmoI2Ihq5FVA5gh2JaVibXDnSdD/ZNiwJ\nmyFjoE22OtR4RANthyQCrcXwSUXDqLIXrWu3kVSmPw96lrkDftro/VrNvC0d\ndhX9\r\n=wn4i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnMx4mMZa+9+kyv7xLzbUY9CrWuBc4MyLS7ChI8YUbqQIhANnMTdBAT+WW4v7X9bjjUo70jpA8MSTO9vU2LpVOOLwH"}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.1.0-beta.5_1627753037751_0.7559245025699823"},"_hasShrinkwrap":false,"deprecated":"Beta version for testing only. Upgrade to @latest or @next"},"2.2.0":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.2.0","description":"A customizable, reusable, and reactive tooltip component for Vue 3 (including TypeScript) projects.","keywords":["Vue","tooltip","popover","component","plugin"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.6.5"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^19.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.11","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^3.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.0.0","lint-staged":"^9.5.0","prettier":"^2.2.1","rollup":"^2.51.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.26.5","sass-loader":"^8.0.2","typescript":"~4.1.5","vue":"^3.0.11"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (Vue `2.x` or `3.x`).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```js\n// main.{js|ts} (or your Vue entry file)\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component before calling 'new Vue()'\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Install the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Install with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Install with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n```\n\n### In-Component (locally available) - **Vue 2.x only**\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element.\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component (no options available)\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install))_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. Should be used in conjunction with the `size` property.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"799f03d7139b42c0a21dce8ed05335c026ee10d1","_id":"@adamdehaven/vue-custom-tooltip@2.2.0","_nodeVersion":"14.15.5","_npmVersion":"7.19.1","dist":{"integrity":"sha512-Q2yvUDPiQOMP6N7Cn/FbuBcwtDXHWF/U/GMOzenFhg9Pv+pGy5vw2x3jA7OQLsvEN5yoOlCKECKl5mB70sq0Sg==","shasum":"43b7258d1df905998bcb78c2850677d06e83ba84","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.2.0.tgz","fileCount":11,"unpackedSize":51216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBYxNCRA9TVsSAnZWagAARf8QAI8eYJtC3zcry/C594Xh\n9RXclExFgt21iXfmJfTTaOd6k6tUY83XveEjQBLkTdaiz8/CZP3CU1wulE4t\nVZMrJdkaqrKPGIhFr4IOqk1qoQlBm7tKbz3fcNf5mxHD3OibEKB+IUUjjDFZ\nRni+mOxfU3friQJWdZKQ8jbrR72RC0nBzOgwRbtS+/jpsnJh7mMboISjBDk0\na1i0/I8Tu+iX5T/Yv3Kj8vbMFLeRPlBoF90duC3dN4+VELwBASNQcTGFAJZG\nkiy5Lt2pB8napCoUcR/uOQoMXtaxNGilY3vZKvhkXJaDPpYywV9F1+/7mnSj\nQkHf59CrrFk1K4Y+5FMp3EKS0TAoUSdULodkq3UD0cpPRRLcjzImhwp6vARs\nQuAdOvoyuxm/aG/FfI9P1mye6IEIW0JySrqCyStpt87iV4cdvPohadmOdcs6\nPkTxPd/pejfWoag1KTL2tTGnD0GB+dL5aL8+GstsPTj39s5KTnO+jrKV946v\ntpcUj5rsc6Cu9YZdDTlTk+m/fsVZAiBUpbjtorbk2m9y+2SQh07TKgjJZ2IO\n976z9N8ZsOAvA2phKjmcdNqt2EduVf8PjFLTaynDscvr+wSEuGcEs2lbveIF\nwx7F7azC4lUqlhat2l3drWqIKcMYoFGfjQxGKkXZLF8aQcj3qqVh7/nTtTBb\nNIuT\r\n=cZVc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDS8vmvPjdqtPH+VM6Unhz/b3Ws8TQbfIqIf9rUUmKqOQIgIToRnbh6shQK2eyFklY4i8ht/VpUiGPVuq7G12u2Zng="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.2.0_1627753549579_0.566526079509216"},"_hasShrinkwrap":false,"deprecated":"This version is missing types. Upgrade to @next tagged version."},"2.3.0":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.3.0","description":"A customizable, reusable, and reactive tooltip component for Vue 3 (including TypeScript) projects.","keywords":["Vue","tooltip","popover","component","plugin"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.6.5"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^19.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.11","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^3.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.0.0","lint-staged":"^9.5.0","prettier":"^2.2.1","rollup":"^2.51.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.26.5","sass-loader":"^8.0.2","typescript":"~4.1.5","vue":"^3.0.11"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (Vue `2.x` or `3.x`).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```js\n// main.{js|ts} (or your Vue entry file)\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component before calling 'new Vue()'\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Install the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Install with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Install with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element.\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component (no options available)\n  // Vue 2.x\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n  // Vue 3.x (notice we're importing the actual .vue file)\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip/src/VueCustomTooltip.vue'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install))_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. Should be used in conjunction with the `size` property.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"0a981bd4339b3efc6188fc2c2cc13109bde7b8ae","_id":"@adamdehaven/vue-custom-tooltip@2.3.0","_nodeVersion":"12.19.0","_npmVersion":"7.19.1","dist":{"integrity":"sha512-M8/OAqBnTY3mSB5s0cjynPE596eq6MMTC6Q7HnDEDVRlLi85Wvq2LZVhjUqKwStulEGOJn5ocKSaRCxrTAmskQ==","shasum":"ac72b4c2af0b25f340a1019a70a58196beecea87","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.3.0.tgz","fileCount":11,"unpackedSize":51376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBam7CRA9TVsSAnZWagAAfPoP/RKCXztGpcZOsGRZBLZ9\nykLqjgJ6W12XlmZ0eu5VMwbTswnWyONImbmVE3cruhn32a4cNDF4k+2IVUAB\nrauh43GNTkjmgqaZPhOKdwVBXrHPJ/kOY14RP/ZZedA65EfPDyqwwzQY5ozv\nJmtNkxGGxu5LK0iZx91lCmA0Hhqr0S+8tIhe/6uAQElUvUpQr/BOggS1nh4H\nvBsKKY5Nf6T2RPmGMC39ryBAGgCzmXXIfw4rjVIuwrUR5c/EjzbTai2juyrI\n2dIua4MAca/lNUnnZKyccILDAA3Q/RTBHkVJS9ESTY4gfDmiztci/fLfWhWK\nU/wih6TIfnyhxcjncpucxK8L65GYJPGxjFyVSNsRDxN0KL6/XI16SqSkA1nv\nv3pMOhEftgSrMizLhI1fJm9dcMIuEW5CHp08YdW2lNit1offbaX8ZM5X1PUi\nwsoOiKhwBrhYN9my5xXzHIRN2v3p0AlTRVFpMgRgYCg/3iiFRFR9nm/nc78f\nXSvMsUAyRZ3nKyMg6rhJnk++aEouZoEj9TlHp3A/CZaTRy91nk8DBdM2Gef0\nEIr3j2Kio5YV7xrsHnWEvvtelxkqtlpRFxGjTus5lkMK9l3aTeEb/aa1uo8F\nVJiBHvRV6SpRRXRweMfW8QG+tiPFLJKK6kR+rFwkvhU1x9me9oryy2L7wQtW\n9yMb\r\n=pM7u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGfvvM0BnvSIwzhbNyCIvMrFejbE08Tbehtud8I3eOfaAiEAwbBQCHJlxlC6pJmF9Z0B7QjHE0b5ZA7lgC7Yg6TDBlg="}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.3.0_1627761083775_0.02925593023685602"},"_hasShrinkwrap":false,"deprecated":"This version is depreciated. Upgrade to @next tagged version."},"2.4.0":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.4.0","description":"A customizable, reusable, and reactive tooltip component for Vue 3 (including TypeScript) projects.","keywords":["Vue","tooltip","popover","component","plugin"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.6.5"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^19.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.11","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^3.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.0.0","lint-staged":"^9.5.0","prettier":"^2.2.1","rollup":"^2.51.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.26.5","sass-loader":"^8.0.2","typescript":"~4.1.5","vue":"^3.0.11"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (Vue `2.x` or `3.x`).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```js\n// main.{js|ts} (or your Vue entry file)\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component before calling 'new Vue()'\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Install the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Install with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Install with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element, or customize styles with [CSS Variables](#css-variables).\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install) - see the [CSS Variables section](#css-variables) below)_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## CSS Variables\n\nIn addition to customizing styles via the [Plugin Options](#options), you can alternatively choose to customize styles via CSS variables as shown below:\n\n```css\n/* Default values are shown */\n:root {\n  --vue-custom-tooltip-color: #fff;\n  --vue-custom-tooltip-background: #000;\n  --vue-custom-tooltip-border-radius: 100px;\n  --vue-custom-tooltip-font-weight: 400;\n}\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. Should be used in conjunction with the `size` property.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"d9b019e85251f69e52ddaa698908361a4f72f67d","_id":"@adamdehaven/vue-custom-tooltip@2.4.0","_nodeVersion":"12.19.0","_npmVersion":"7.19.1","dist":{"integrity":"sha512-uEF9Qi3IPt+tbV03A7WJzgHElRIDLFE+4eoo38TkGVuVfkDjiDSTVBGbDOpgeWDiQ0AtAMnUSgoYhdH1voFjIg==","shasum":"37215ea2d758e9acc47113463959a7d53fddc489","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.4.0.tgz","fileCount":11,"unpackedSize":52878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBb71CRA9TVsSAnZWagAAfEsQAJ0FEfdpI4EPp5/3uGNU\n4+N2pY0ssuLzFxos4yFNWVxQRlOtIToWetUHM0O4lmh4Mgjy+vAFXa0hXDNf\nZTVcc5fBlMxiUrg52/F8EMvXyNb+zIDMMM7UsdsqWw9kRaTXjOsc64qrlFzf\nedpXvIXvYN0LT00yTQYwWb0mYStVOsvgDFBPTPHnQ3Ujjxlrphkm7A2AyNQm\nVvrnrlYW8MAIIVs1rl2ivacxv5/rQcgY3GlRiqAA/iinD/lzo2mcj2754VG+\nje4r4FF7n+hBP4DohKOBkEydLEtboEwisskr9sr2gsKfWPo958JNMV7MoUF2\nsyNfPvblrf0nmoBi53TXB/zKiQ0002V5apYzVAIyX2+AP0dqfSPK0OnXhMRk\nKqwR6vuRHnVqA2aqCiaLQyRFk9siE8SFrrdq6Mk94r08WUFJa7l8B8R7yoY9\ndEHYRnFOaIsAopWW2BbtM8VL9+/8xcl7zV6CKbQmKq1yzM/uoH1/ApfSOkJ1\n1+OCPwWMJlifO1m4cB/0Nys4PPPYk+h5X0n11z9qW5R0PpKeB/4/fcokmRCQ\nd+4kLQ9gXu9A6YHcfMLEeMVs2SiucTW0xkfY+A+VauRRZdc29Vz94FDpRVjo\nMqRfIKpsupp64bmY0q/8Vltyc89BD266CXaYJzmGF46TeVWGIX2F6Wf0OXAO\nj9rs\r\n=xkbe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWWYNOP98WNdllr+nEfLQmSH7My5crrVtxFKskJKLuNAIhAN2q6xWZxZOudrhCzakXR67ZcUOpFVrJxEy9sXFLB81e"}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.4.0_1627766517601_0.9786708230908336"},"_hasShrinkwrap":false,"deprecated":"This version is depreciated. Upgrade to @next tagged version."},"2.5.0":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.5.0","description":"A customizable, reusable, and reactive tooltip component for Vue 3 (including TypeScript) projects.","keywords":["Vue","tooltip","popover","component","plugin"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.6.5"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^19.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.11","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^3.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.0.0","lint-staged":"^9.5.0","prettier":"^2.2.1","rollup":"^2.51.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.26.5","sass-loader":"^8.0.2","typescript":"~4.1.5","vue":"^3.0.11"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (Vue `2.x` or `3.x`).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```js\n// main.{js|ts} (or your Vue entry file)\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component before calling 'new Vue()'\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Install the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Install with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Install with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element, or customize styles with [CSS Variables](#css-variables).\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install) - see the [CSS Variables section](#css-variables) below)_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### Type Declarations for tooltip options\n\n```ts\nexport interface TooltipOptions {\n  name?: string\n  color?: string\n  background?: string\n  borderRadius?: number\n  fontWeight?: number\n}\n```\n\nYou may import the TypeScript interface along with the plugin into your entry file as shown here:\n\n```ts\n// main.ts\n\nimport VueCustomTooltip, { TooltipOptions } from '@adamdehaven/vue-custom-tooltip'\n\n// Then, to import the plugin and use the interface\nconst options: TooltipOptions = {\n  background: '#0007ac1',\n}\n\nVue.use(VueCustomTooltip, options)\n```\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## CSS Variables\n\nIn addition to customizing styles via the [Plugin Options](#options), you can alternatively choose to customize styles via CSS variables as shown below:\n\n```css\n/* Default values are shown */\n:root {\n  --vue-custom-tooltip-color: #fff;\n  --vue-custom-tooltip-background: #000;\n  --vue-custom-tooltip-border-radius: 100px;\n  --vue-custom-tooltip-font-weight: 400;\n}\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. Should be used in conjunction with the `size` property.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"c1b72b6d21a14bd9dc5ae0a36573ae01c892d882","_id":"@adamdehaven/vue-custom-tooltip@2.5.0","_nodeVersion":"14.15.5","_npmVersion":"7.19.1","dist":{"integrity":"sha512-D52rG8YOnoQ8DDyXJc/dmaUI2BqLkv8cTFa4ns/jVJe2kVLzYvY/EtdFbdEetSFpqVNf8K+y/xeISxYCiY/wAA==","shasum":"29c815880e8d9bdced24eefd72e5457ca9182d29","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.5.0.tgz","fileCount":11,"unpackedSize":54059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBdFtCRA9TVsSAnZWagAAXAsP/2zkVSXtuD6g9VAZhIJZ\nvDnXvVxTv68qwAXgM2HdFIoov+sZ+hq1gVhxQ/WjxETD5hG7pC59pys6OwXq\n5EGKz3YRvgHMi68ZF2/s3sHgi4V3cirrNIu7WfTpvrDqqYraxg4fK4wCv92v\nzzeJ34PEP7WIiBFannfwJk7A26bH9AoD2mPcZebqYwSI40u62TP5ZeHDZZPh\n/CNXc/Pogi9MQIWHmpfrqJ2eLanIZJx1hYNInNmVju5alj6BqoPpttXfVD6O\nDAJ2BgCe9FwsTCPwf7uyJ98Jtq5lk0Kfe7j0W/k3h5cQBlmbKOzsjMD0+Zyi\nmv7Ep8+po90JTIEA/BNNxw8R5eOtok+QrAAq8QFRz5mOVM37clGE44t17U2r\nJIZR+Z7DvNheFQkUywLoT3ExenBRHGguSmbnvZ1ayMwY+Gdh4iWW+KIWZVUm\ntgFKWfR7kBZV/wLMZn9Aoe6URS2GRRIyhE7TTPCkn5sl47Oi3YczvDlo/QcR\niwajJwpH57FGeKu2JUBy2GBcEnHPhXVKrawnBkVgw89/bRM9cmMLj7TgOAlc\nV8SGa6CjxyjKnHeYQagW/sJr5mQqArXBac2kHu+nqYVIcBi4qitnqRIenGQ5\nRZkLI5Tw5NEswn01dL9FwDOxld9LA3HTrNcdhJJTzjP5ChZVC/ERsEJrKVXU\nMnxF\r\n=b7eS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCreZ5vdig1WpyFjIFoHKlmwQ9UOAyl6S5RZTtHDwSWHAIhANPBhi9Albd1l89oBK7pGtLyAFSWU64K/cJRDbOPrDu1"}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.5.0_1627771244816_0.16679605434993894"},"_hasShrinkwrap":false},"2.5.1":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.5.1","description":"A customizable, reusable, and reactive tooltip component for Vue 3 (including TypeScript) projects.","keywords":["Vue","tooltip","popover","component","plugin"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.6.5"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^19.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.11","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^3.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.0.0","lint-staged":"^9.5.0","prettier":"^2.2.1","rollup":"^2.51.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.26.5","sass-loader":"^8.0.2","typescript":"~4.1.5","vue":"^3.0.11"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (Vue `2.x` or `3.x`).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```ts\n// main.{js|ts} (or your Vue entry file)\n\n// ===========================================================\n// VUE 2.x\n// ===========================================================\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Initialize the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Initialize with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Initialize with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n\n// ===========================================================\n// VUE 3.x\n// ===========================================================\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\n// Import the tooltip component and option types\nimport VueCustomTooltip, { TooltipOptions } from '@adamdehaven/vue-custom-tooltip'\n\nconst app = createApp(App)\n\n// Initialize the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Initialize with default options\napp.use(VueCustomTooltip)\n\n// ===== OR  ===\n\n// 2. Initialize with custom options (defaults shown)\nconst opt: TooltipOptions = {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n}\n\napp.use(VueCustomTooltip, opt)\napp.mount('#app')\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element, or customize styles with [CSS Variables](#css-variables).\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install) - see the [CSS Variables section](#css-variables) below)_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### Type Declarations for tooltip options\n\n```ts\nexport interface TooltipOptions {\n  name?: string\n  color?: string\n  background?: string\n  borderRadius?: number\n  fontWeight?: number\n}\n```\n\nYou may import the TypeScript interface along with the plugin into your entry file as shown here:\n\n```ts\n// main.ts\n\nimport VueCustomTooltip, { TooltipOptions } from '@adamdehaven/vue-custom-tooltip'\n\n// Then, to import the plugin and use the interface\nconst options: TooltipOptions = {\n  background: '#0007ac1',\n}\n\nVue.use(VueCustomTooltip, options)\n```\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## CSS Variables\n\nIn addition to customizing styles via the [Plugin Options](#options), you can alternatively choose to customize styles via CSS variables as shown below:\n\n```css\n/* Default values are shown */\n:root {\n  --vue-custom-tooltip-color: #fff;\n  --vue-custom-tooltip-background: #000;\n  --vue-custom-tooltip-border-radius: 100px;\n  --vue-custom-tooltip-font-weight: 400;\n}\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. Should be used in conjunction with the `size` property.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"26daf28daf1282c814e62d854bba904c247cf0c1","_id":"@adamdehaven/vue-custom-tooltip@2.5.1","_nodeVersion":"14.15.5","_npmVersion":"7.19.1","dist":{"integrity":"sha512-+04HV9SoSH+/tMEG+9boVEdH9UJkxtZAD/zU1oOtAjNtTzygV9vtkoNqT7EQXcDntXCGoz7HE/zcyReo6HV1Bg==","shasum":"4a37e4aff4942efa35cc2dc5ce677b71c093aa7d","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.5.1.tgz","fileCount":11,"unpackedSize":55026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFYfuCRA9TVsSAnZWagAAP8sP/iwc5EA/QHoTCbUKkBRZ\nqpiMz3w7oEFvYdiWB4ObIxJdfv2pQx2GD51EhMIBYQGV+YzbPLKpInP5zkYK\nfoFKFwA5rWeZFhzgZttgNjpJ/OYyy6gvGVP2BFGFtcboa7c6rSZ7gn1ehJiB\ncGjNoW/6KMJsKGRYVTLCfZRKFw7D57nQTIUpCKLyqDZ666SsG3ZAXSxsF8fj\nF1cUu9tUOIbp0WA404pd44j85Z7c2JK6t8STiog8HaGJaaJ+FC6rh+O2h7Rw\nyIUj1masJJkW+hS9nOsYyupbEFXQx/brvgrhSKko+6nddfPMcgN4BrxrC7QL\nA9Gf2nXJYzRwXacgpFu7m513flGUVmh8g7+yIMEUwtCPLF7IzZSp4kfxM80s\nn8ce3r/MF1j39PRZX2x70laFIyWTu49KG10DHyMQFT+OIXSzxFsuDVyer5Bo\nOi3QS+xEcTE6XeLwO0X19vZGHG2cJBcFYgYs+DeEH5KVXxabHByeqiKpLsNj\nEyz3nR+YK2/PIHPJ7Is1I8ZedMahQBgyaH6lMA+ZRJkhmOIRwyqTqR4eDfil\nvQxZIRTNLtxBOJCdLr2QXIc/C6M1bvMec1yMozp7LdrtLoyfnm9E2fK8yisg\nfv1spPcFCiFMxfaAtsyAJ9lQcTDtW5BXw8XCnJFCvT6fgCV5QIZjmnIjyMfM\n0V8h\r\n=BED/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzGMeABbyElZZR/tyejXPPnbRCD7sc9TrVTOn7eIDWZgIhAK+NTA9NOKPzrun3vL8PiSDNtyhatojCpnyTmTh1w9Yd"}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.5.1_1628801006194_0.8506170159446915"},"_hasShrinkwrap":false},"2.6.0":{"name":"@adamdehaven/vue-custom-tooltip","version":"2.6.0","description":"A customizable, reusable, and reactive tooltip component for Vue 3 (including TypeScript) projects.","keywords":["Vue","tooltip","popover","component","plugin"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"license":"MIT","homepage":"https://github.com/adamdehaven/vue-custom-tooltip/#readme","bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"scripts":{"serve":"vue-cli-service serve","build":"del-cli ./dist && rollup -c && del-cli ./dist/main.d.ts","lint":"vue-cli-service lint"},"main":"dist/vue-custom-tooltip.cjs.js","module":"dist/vue-custom-tooltip.esm.js","browser":"dist/vue-custom-tooltip.esm.js","unpkg":"dist/vue-custom-tooltip.min.js","types":"dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"core-js":"^3.6.5"},"devDependencies":{"@rollup/plugin-buble":"^0.21.3","@rollup/plugin-commonjs":"^21.0.0","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-typescript":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.2.19","@vue/eslint-config-prettier":"^6.0.0","@vue/eslint-config-typescript":"^7.0.0","del-cli":"^4.0.1","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^7.0.0","lint-staged":"^9.5.0","prettier":"^2.2.1","rollup":"^2.51.1","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.26.5","sass-loader":"^8.0.2","typescript":"^4.4.3","vue":"^3.2.19"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"src/**/*.{js,jsx,vue,ts,tsx}":["vue-cli-service lint","git add"]},"readme":"# Vue-Custom-Tooltip\n\nA customizable, reusable, and reactive tooltip component for Vue 2 & 3 (and VuePress) projects.\n\n![Tooltip Vue component examples](img/vue-custom-tooltip-examples.png)\n\n## Installation\n\nInstallation instructions depend on the version of Vue.js you are using (Vue `2.x` or `3.x`).\n\n### Vue 2\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip\n```\n\n### Vue 3 (including TypeScript compatibility)\n\nWhen installing, make sure to pass the `@next` tag\n\n```sh\n# With npm\nnpm install @adamdehaven/vue-custom-tooltip@next\n\n# or Yarn\nyarn add @adamdehaven/vue-custom-tooltip@next\n```\n\n## Initialize Plugin\n\n### Vue.js (globally available)\n\nIt is recommended to initialize the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.{js|ts}` file where you are already importing `Vue`.\n\n```ts\n// main.{js|ts} (or your Vue entry file)\n\n// ===========================================================\n// VUE 2.x\n// ===========================================================\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n// Initialize the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Initialize with default options\nVue.use(VueCustomTooltip)\n\n// ===== OR  =====\n\n// 2. Initialize with custom options (defaults shown)\nVue.use(VueCustomTooltip, {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n})\n\n// ===========================================================\n// VUE 3.x\n// ===========================================================\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\n// Import the tooltip component and option types\nimport VueCustomTooltip, { TooltipOptions } from '@adamdehaven/vue-custom-tooltip'\n\nconst app = createApp(App)\n\n// Initialize the plugin using ONE of the options below:\n// --------------------------------------------------\n\n// 1. Initialize with default options\napp.use(VueCustomTooltip)\n\n// ===== OR  ===\n\n// 2. Initialize with custom options (defaults shown)\nconst opt: TooltipOptions = {\n  name: 'VueCustomTooltip',\n  color: '#fff',\n  background: '#000',\n  borderRadius: 100,\n  fontWeight: 400,\n}\n\napp.use(VueCustomTooltip, opt)\napp.mount('#app')\n```\n\n### In-Component (locally available)\n\nAlternatively, you may initialize the component directly within a single file in your project.\n\n**Notes on in-component initialization**:\n\n- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element, or customize styles with [CSS Variables](#css-variables).\n\n```html\n<!-- Single file component -->\n\n<script>\n  // Import the tooltip component\n  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\n  // .vue file default export\n  export default {\n    // Register the component\n    components: {\n      VueCustomTooltip,\n    },\n  }\n</script>\n```\n\n### Via CDN\n\nLoad the tooltip component after first importing Vue.\n\n**Notes on CDN Import with Vue 2**:\n\n- Initializing via CDN with Vue 2 requires using the kebab-case component name.\n- Initializing via CDN with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue & Tooltip Component -->\n\n  <!-- ======= Vue 2 ======= -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip\"></script>\n\n  <!-- ======== OR ======== -->\n\n  <!-- ======= Vue 3 ======= -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@adamdehaven/vue-custom-tooltip@next\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### Manual / Local Import\n\nDownload the correct version of `dist/vue-custom-tooltip.min.js` based on your version of Vue, and include it in your file after importing Vue.\n\n**Notes on Manual / Local Import with Vue 2**:\n\n- Initializing manually with Vue 2 requires using the kebab-case component name.\n- Initializing manually with Vue 2 does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<vue-custom-tooltip>` element.\n\n```html\n<body>\n  <div id=\"app\">\n    <!-- Use the component with props -->\n    <p>This is a <vue-custom-tooltip label=\"Neat!\" underlined>tooltip</vue-custom-tooltip>.</p>\n  </div>\n\n  <!-- Import Vue -->\n\n  <!-- Vue 2 -->\n  <script src=\"https://unpkg.com/vue/dist/vue.min.js\"></script>\n\n  <!-- === OR === -->\n\n  <!-- Vue 3 -->\n  <script src=\"https://unpkg.com/vue@next/dist/vue.global.js\"></script>\n\n  <!-- Import tooltip component -->\n  <script src=\"../path/to/local/vue-custom-tooltip.min.js\"></script>\n\n  <!-- Initialize Vue -->\n  <script>\n    // ======= Vue 2 =======\n    new Vue({\n      el: '#app',\n    })\n\n    // ======== OR ========\n\n    // ======= Vue 3 =======\n    const { createApp } = Vue\n    const app = createApp({})\n    app.use(VueCustomTooltip, { ...tooltipOptions })\n    app.mount('#app')\n  </script>\n</body>\n```\n\n### VuePress (Global)\n\n> **VuePress Standalone Plugin**\n>\n> I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the `.vuepress/config.js` or `.vuepress/theme/index.js` file. If you'd rather use the standalone plugin in your VuePress project, [head over to the `vuepress-plugin-custom-tooltip` repository](https://github.com/adamdehaven/vuepress-plugin-custom-tooltip).\n\nFor [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.\n\n```js\n// theme/enhanceApp.js\n\n// Import Vue... you're probably already doing this\nimport Vue from 'vue'\n\n// Import the tooltip component\nimport VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'\n\nexport default ({\n  Vue, // the version of Vue being used in the VuePress app\n  options, // the options for the root Vue instance\n  router, // the router instance for the app\n  siteData, // site metadata\n  isServer, // is this enhancement applied in server-rendering or client\n}) => {\n  // ...apply enhancements to the app\n\n  // Install the plugin using ONE of the options below:\n  // --------------------------------------------------\n\n  // 1. Install with default options\n  Vue.use(VueCustomTooltip)\n\n  // ===== OR  =====\n\n  // 2. Install with custom options (defaults shown)\n  Vue.use(VueCustomTooltip, {\n    name: 'VueCustomTooltip',\n    color: '#fff',\n    background: '#000',\n    borderRadius: 100,\n    fontWeight: 400,\n  })\n}\n```\n\n## Usage\n\n```html\n<!-- Basic -->\nWhat is <VueCustomTooltip label=\"This is a tooltip\">a tooltip</VueCustomTooltip>?\n\n<!-- With Props -->\nWhat is\n<VueCustomTooltip label=\"This is a tooltip\" position=\"is-bottom\" abbreviation sticky>a tooltip</VueCustomTooltip>?\n\n<!-- With element(s) -->\n<VueCustomTooltip label=\"View @adamdehaven on Twitter\">\n  <a class=\"button\" href=\"https://twitter.com/adamdehaven\">\n    <span class=\"icon icon-twitter\"></span>\n    <span>Twitter</span>\n  </a>\n</VueCustomTooltip>\n```\n\n## Options\n\nPass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install) - see the [CSS Variables section](#css-variables) below)_.\n\n> **A note on options tied to CSS properties**\n>\n> The `color`, `background`, `borderRadius`, and `fontWeight` attributes listed below are set on the psuedo element using [CSS Variables (Custom Properties)](https://caniuse.com/#feat=css-variables), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).\n\n### Type Declarations for tooltip options\n\n```ts\nexport interface TooltipOptions {\n  name?: string\n  color?: string\n  background?: string\n  borderRadius?: number\n  fontWeight?: number\n}\n```\n\nYou may import the TypeScript interface along with the plugin into your entry file as shown here:\n\n```ts\n// main.ts\n\nimport VueCustomTooltip, { TooltipOptions } from '@adamdehaven/vue-custom-tooltip'\n\n// Then, to import the plugin and use the interface\nconst options: TooltipOptions = {\n  background: '#0007ac1',\n}\n\nVue.use(VueCustomTooltip, options)\n```\n\n### `name`\n\n- Type: `String`\n- Default: `VueCustomTooltip`\n\nCustomize the name of the component you will use in your project. **PascalCase names are preferred**, as this allows for PascalCase or kebab-case usage within your project.\n\n```js\nVue.use(VueCustomTooltip, {\n  name: 'SuperCoolTooltip', // PascalCase preferred\n})\n```\n\nIf you registered the name using PascalCase, you can reference the tooltip component via PascalCase _or_ kebab-case:\n\n```html\n<!-- Default name (user did not pass the 'name' option) -->\n\n<!-- PascalCase -->\nNice <VueCustomTooltip label=\"Neat!\">tooltip</VueCustomTooltip>!\n<!-- kebab-case -->\nNice <vue-custom-tooltip label=\"Neat!\">tooltip</vue-custom-tooltip>!\n\n<!-- Custom name (allows user to rename component) -->\n\n<!-- PascalCase -->\nNice <SuperCoolTooltip label=\"Neat!\">tooltip</SuperCoolTooltip>!\n<!-- kebab-case -->\nNice <super-cool-tooltip label=\"Neat!\">tooltip</super-cool-tooltip>!\n```\n\n### `color`\n\n- Type: `HEX Color`\n- Default: `#fff`\n\nCustomize the color of the text displayed in the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `background`\n\n- Type: `HEX Color`\n- Default: `#000`\n\nCustomize the background color (and the `underlined` text color) of the tooltip.\n\n```js\nVue.use(VueCustomTooltip, {\n  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)\n})\n```\n\n### `borderRadius`\n\n- Type: `Number`\n- Default: `100`\n\nCustomize the border-radius of the tooltip. Must be an integer.\n\n```js\nVue.use(VueCustomTooltip, {\n  borderRadius: 24,\n})\n```\n\n### `fontWeight`\n\n- Type: `Number`\n- Default: `400`\n\nCustomize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.\n\n```js\nVue.use(VueCustomTooltip, {\n  fontWeight: 700,\n})\n```\n\n## CSS Variables\n\nIn addition to customizing styles via the [Plugin Options](#options), you can alternatively choose to customize styles via CSS variables as shown below:\n\n```css\n/* Default values are shown */\n:root {\n  --vue-custom-tooltip-color: #fff;\n  --vue-custom-tooltip-background: #000;\n  --vue-custom-tooltip-border-radius: 100px;\n  --vue-custom-tooltip-font-weight: 400;\n}\n```\n\n## Props\n\nIn addition to the [Plugin Options](#options) above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.\n\nProps that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:\n\n```html\n<VueCustomTooltip label=\"Tooltip\" sticky>text/element</VueCustomTooltip>\n```\n\nAll other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:\n\n```html\n<VueCustomTooltip :label=\"element.helpText\" :sticky=\"false\">text/element</VueCustomTooltip>\n```\n\nAll available props for the tooltip component are listed below:\n\n### `label`\n\n- Type: `String`\n- Default: `null`\n\nThe text that will display inside the tooltip. If the value for `label` is null, the tooltip will not be displayed.\n\nYou may **not** pass HTML to the label prop.\n\n### `active`\n\n- Type: `Boolean`\n- Default: `true`\n\nDetermines whether the tooltip should display when hovered, or if the [`sticky`](#sticky) prop is present, if the tooltip should be visible.\n\n### `position`\n\n- Type: `String`\n- Value: `is-top / is-bottom / is-left / is-right`\n- Default: `is-top`\n\nThe position of the tooltip in relation to the text/element it is surrounding.\n\n### `abbreviation`\n\n- Type: `Boolean`\n- Default: `false`\n\nSwaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.\n\n```html\nVuePress pages are served as an <VueCustomTooltip label=\"Single Page Application\" abbreviation>SPA</VueCustomTooltip>.\n```\n\n### `sticky`\n\n- Type: `Boolean`\n- Default: `false`\n\nDetermines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.\n\n### `underlined`\n\n- Type: `Boolean`\n- Default: `false`\n\nAdd a dotted border under the contained text (the same color as the [background](#background) HEX value). This value is automatically set to `true` if the [`abbreviation`](#abbreviation) prop is set to `true`.\n\n### `multiline`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows the tooltip text to wrap to multiple lines as needed. Should be used in conjunction with the `size` property.\n\n### `size`\n\n- Type: `String`\n- Value: `is-small / is-medium / is-large`\n- Default: `is-medium`\n\nThe width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`.\n\n## Adding Custom Classes & Styles\n\nJust like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).\n\n```html\n<!-- Tooltip component with custom classes and styles -->\n<VueCustomTooltip class=\"your-class\" :class=\"{ 'dynamic-class': isDynamic }\" :style=\"{ display: 'inline' }\" label=\"Neat\"\n  >text</VueCustomTooltip\n>\n```\n\nThis is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.\n\nThe tooltip component is rendered as a `display: inline-block` element by default; however, you can override this by binding styles directly to the component, as shown above.\n\n## License\n\n[MIT](https://github.com/adamdehaven/vue-custom-tooltip/blob/master/LICENSE)\n","readmeFilename":"README.md","gitHead":"d33bfc8aa30b9f471bb41f973e1c8767e252ab43","_id":"@adamdehaven/vue-custom-tooltip@2.6.0","_nodeVersion":"14.15.5","_npmVersion":"7.19.1","dist":{"integrity":"sha512-wypRRapb1pNmkvhuGSSENaDQEQeJ7gM+IXiHOmotvSzhXiVztnqw2U7fe7JWT6PiGFluVdIcoAY5QKfGzO7ktw==","shasum":"adb82c54ddf62224b442263bc303f12749aa943e","tarball":"https://registry.npmjs.org/@adamdehaven/vue-custom-tooltip/-/vue-custom-tooltip-2.6.0.tgz","fileCount":11,"unpackedSize":55228,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyfLbAfRMcLxkvG3+lfOtWU/HDRSd5fZmAyfGe2Uw+QQIhAO2zrzC4ETaWwNfG7m/hN1XPS/ZsOU7odOtDt7SD2jM/"}]},"_npmUser":{"name":"adamdehaven","email":"adam@dehaven.org"},"directories":{},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-custom-tooltip_2.6.0_1633532010308_0.2515198562763432"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-20T22:29:26.455Z","1.0.0":"2020-08-20T22:29:26.616Z","modified":"2022-04-04T11:25:10.010Z","1.0.1":"2020-08-21T01:38:41.326Z","1.1.0":"2020-08-21T02:47:08.268Z","1.1.1":"2020-08-21T12:10:27.203Z","1.1.2":"2020-08-21T15:00:40.134Z","1.1.3":"2020-08-21T21:49:31.695Z","1.2.0":"2020-09-25T16:32:01.583Z","1.2.1":"2020-10-30T19:58:21.618Z","1.3.0":"2020-12-03T15:32:23.732Z","1.3.1":"2021-02-05T20:57:08.633Z","1.3.2":"2021-05-19T13:19:59.595Z","2.0.0":"2021-06-09T20:47:06.072Z","1.4.0":"2021-06-09T21:14:40.322Z","2.0.1":"2021-06-09T21:27:08.250Z","2.0.2":"2021-06-10T22:18:53.451Z","1.4.1":"2021-06-10T22:24:22.678Z","1.4.2":"2021-06-12T00:11:29.368Z","2.0.3":"2021-06-12T00:11:49.634Z","2.0.4":"2021-06-12T12:22:47.908Z","1.4.3":"2021-06-12T12:26:57.294Z","2.1.0-beta.1":"2021-07-30T18:54:47.927Z","2.1.0-beta.2":"2021-07-30T19:12:00.245Z","2.1.0-beta.3":"2021-07-30T19:12:39.637Z","2.1.0-beta.4":"2021-07-30T19:16:17.682Z","2.1.0":"2021-07-30T20:25:07.137Z","1.4.4":"2021-07-31T17:35:13.956Z","2.1.0-beta.5":"2021-07-31T17:37:17.926Z","2.2.0":"2021-07-31T17:45:49.702Z","2.3.0":"2021-07-31T19:51:23.905Z","2.4.0":"2021-07-31T21:21:57.746Z","2.5.0":"2021-07-31T22:40:45.005Z","2.5.1":"2021-08-12T20:43:26.316Z","2.6.0":"2021-10-06T14:53:30.497Z"},"maintainers":[{"name":"adamdehaven","email":"adam@dehaven.org"}],"description":"A customizable, reusable, and reactive tooltip component for Vue (and VuePress) projects.","homepage":"https://github.com/adamdehaven/vue-custom-tooltip#readme","keywords":["Vue","tooltip","component","VuePress"],"repository":{"type":"git","url":"git+https://github.com/adamdehaven/vue-custom-tooltip.git"},"author":{"name":"Adam DeHaven","email":"adam@dehaven.org","url":"https://www.adamdehaven.com/"},"bugs":{"url":"https://github.com/adamdehaven/vue-custom-tooltip/issues"},"license":"MIT","readme":"","readmeFilename":""}