{"version":3,"sources":["webpack:///./src/view/pages/vuetify/Tooltips.vue?adeb","webpack:///src/view/pages/vuetify/Tooltips.vue","webpack:///./src/view/pages/vuetify/Tooltips.vue?4d55","webpack:///./src/view/pages/vuetify/Tooltips.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","_v","scopedSlots","_u","key","fn","ref","on","_g","proxy","_s","code1","html","$event","show","model","value","callback","$$v","expression","code2","js","staticRenderFns","data","components","KTCodePreview","mounted","$store","dispatch","component","VBtn","VCol","VContainer","VIcon","VRow","VTooltip"],"mappings":"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","file":"js/chunk-2d225e02.bf62787b.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-alert',{staticClass:\"alert alert-custom alert-white alert-shadow fade show gutter-b\",attrs:{\"show\":\"\",\"variant\":\"light\"}},[_c('div',{staticClass:\"alert-icon\"},[_c('span',{staticClass:\"svg-icon svg-icon-lg\"},[_c('inline-svg',{attrs:{\"src\":\"media/svg/icons/Tools/Compass.svg\"}})],1)]),_c('div',{staticClass:\"alert-text\"},[_c('b',[_vm._v(\"Tooltips\")]),_vm._v(\" The \"),_c('code',[_vm._v(\"v-tooltip\")]),_vm._v(\" component is useful for conveying information when a user hovers over an element. You can also programmatically control the display of tooltips through a \"),_c('code',[_vm._v(\"v-model\")]),_vm._v(\". When activated, tooltips display a text label identifying an element, such as a description of its function. \"),_c('a',{staticClass:\"font-weight-bold\",attrs:{\"href\":\"https://vuetifyjs.com/en/components/tooltips\",\"target\":\"_blank\"}},[_vm._v(\" See documentation. \")])])]),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-md-6\"},[_c('KTCodePreview',{attrs:{\"title\":'Alignment'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\" A tooltip can be aligned to any of the four sides of the activator element \")]),_c('div',{staticClass:\"text-center\"},[_c('v-tooltip',{attrs:{\"left\":\"\"},scopedSlots:_vm._u([{key:\"activator\",fn:function(ref){\nvar on = ref.on;\nreturn [_c('v-btn',_vm._g({staticClass:\"mr-4\",attrs:{\"color\":\"primary\",\"dark\":\"\"}},on),[_vm._v(\"Left\")])]}}])},[_c('span',[_vm._v(\"Left tooltip\")])]),_c('v-tooltip',{attrs:{\"top\":\"\"},scopedSlots:_vm._u([{key:\"activator\",fn:function(ref){\nvar on = ref.on;\nreturn [_c('v-btn',_vm._g({staticClass:\"mr-4\",attrs:{\"color\":\"primary\",\"dark\":\"\"}},on),[_vm._v(\"Top\")])]}}])},[_c('span',[_vm._v(\"Top tooltip\")])]),_c('v-tooltip',{attrs:{\"bottom\":\"\"},scopedSlots:_vm._u([{key:\"activator\",fn:function(ref){\nvar on = ref.on;\nreturn [_c('v-btn',_vm._g({staticClass:\"mr-4\",attrs:{\"color\":\"primary\",\"dark\":\"\"}},on),[_vm._v(\"Bottom\")])]}}])},[_c('span',[_vm._v(\"Bottom tooltip\")])]),_c('v-tooltip',{attrs:{\"right\":\"\"},scopedSlots:_vm._u([{key:\"activator\",fn:function(ref){\nvar on = ref.on;\nreturn [_c('v-btn',_vm._g({staticClass:\"mr-4\",attrs:{\"color\":\"primary\",\"dark\":\"\"}},on),[_vm._v(\"Right\")])]}}])},[_c('span',[_vm._v(\"Right tooltip\")])])],1)]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code1.html)+\" \")]},proxy:true}])})],1),_c('div',{staticClass:\"col-md-6\"},[_c('KTCodePreview',{attrs:{\"title\":'Visibility'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\" Tooltip visibility can be programmatically changed using \"),_c('code',[_vm._v(\"v-model\")]),_vm._v(\". \")]),_c('v-container',{staticClass:\"text-center\",attrs:{\"fluid\":\"\"}},[_c('v-row',{staticClass:\"flex\",attrs:{\"justify\":\"space-between\"}},[_c('v-col',{attrs:{\"cols\":\"12\"}},[_c('v-btn',{on:{\"click\":function($event){_vm.show = !_vm.show}}},[_vm._v(\"toggle\")])],1),_c('v-col',{staticClass:\"mt-12\",attrs:{\"cols\":\"12\"}},[_c('v-tooltip',{attrs:{\"top\":\"\"},scopedSlots:_vm._u([{key:\"activator\",fn:function(ref){\nvar on = ref.on;\nreturn [_c('v-btn',_vm._g({attrs:{\"icon\":\"\"}},on),[_c('v-icon',{attrs:{\"color\":\"grey lighten-1\"}},[_vm._v(\"mdi-cart\")])],1)]}}]),model:{value:(_vm.show),callback:function ($$v) {_vm.show=$$v},expression:\"show\"}},[_c('span',[_vm._v(\"Programmatic tooltip\")])])],1)],1)],1)]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code2.html)+\" \")]},proxy:true},{key:\"js\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code2.js)+\" \")]},proxy:true}])})],1)])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <b-alert\r\n      show\r\n      variant=\"light\"\r\n      class=\"alert alert-custom alert-white alert-shadow fade show gutter-b\"\r\n    >\r\n      <div class=\"alert-icon\">\r\n        <span class=\"svg-icon svg-icon-lg\">\r\n          <inline-svg src=\"media/svg/icons/Tools/Compass.svg\" />\r\n        </span>\r\n      </div>\r\n      <div class=\"alert-text\">\r\n        <b>Tooltips</b> The <code>v-tooltip</code> component is useful for\r\n        conveying information when a user hovers over an element. You can also\r\n        programmatically control the display of tooltips through a\r\n        <code>v-model</code>. When activated, tooltips display a text label\r\n        identifying an element, such as a description of its function.\r\n        <a\r\n          class=\"font-weight-bold\"\r\n          href=\"https://vuetifyjs.com/en/components/tooltips\"\r\n          target=\"_blank\"\r\n        >\r\n          See documentation.\r\n        </a>\r\n      </div>\r\n    </b-alert>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"col-md-6\">\r\n        <KTCodePreview v-bind:title=\"'Alignment'\">\r\n          <template v-slot:preview>\r\n            <p>\r\n              A tooltip can be aligned to any of the four sides of the activator\r\n              element\r\n            </p>\r\n            <div class=\"text-center\">\r\n              <v-tooltip left>\r\n                <template v-slot:activator=\"{ on }\">\r\n                  <v-btn class=\"mr-4\" color=\"primary\" dark v-on=\"on\"\r\n                    >Left</v-btn\r\n                  >\r\n                </template>\r\n                <span>Left tooltip</span>\r\n              </v-tooltip>\r\n\r\n              <v-tooltip top>\r\n                <template v-slot:activator=\"{ on }\">\r\n                  <v-btn class=\"mr-4\" color=\"primary\" dark v-on=\"on\">Top</v-btn>\r\n                </template>\r\n                <span>Top tooltip</span>\r\n              </v-tooltip>\r\n\r\n              <v-tooltip bottom>\r\n                <template v-slot:activator=\"{ on }\">\r\n                  <v-btn class=\"mr-4\" color=\"primary\" dark v-on=\"on\"\r\n                    >Bottom</v-btn\r\n                  >\r\n                </template>\r\n                <span>Bottom tooltip</span>\r\n              </v-tooltip>\r\n\r\n              <v-tooltip right>\r\n                <template v-slot:activator=\"{ on }\">\r\n                  <v-btn class=\"mr-4\" color=\"primary\" dark v-on=\"on\"\r\n                    >Right</v-btn\r\n                  >\r\n                </template>\r\n                <span>Right tooltip</span>\r\n              </v-tooltip>\r\n            </div>\r\n          </template>\r\n          <template v-slot:html>\r\n            {{ code1.html }}\r\n          </template>\r\n        </KTCodePreview>\r\n      </div>\r\n\r\n      <div class=\"col-md-6\">\r\n        <KTCodePreview v-bind:title=\"'Visibility'\">\r\n          <template v-slot:preview>\r\n            <p>\r\n              Tooltip visibility can be programmatically changed using\r\n              <code>v-model</code>.\r\n            </p>\r\n            <v-container fluid class=\"text-center\">\r\n              <v-row class=\"flex\" justify=\"space-between\">\r\n                <v-col cols=\"12\">\r\n                  <v-btn @click=\"show = !show\">toggle</v-btn>\r\n                </v-col>\r\n\r\n                <v-col cols=\"12\" class=\"mt-12\">\r\n                  <v-tooltip v-model=\"show\" top>\r\n                    <template v-slot:activator=\"{ on }\">\r\n                      <v-btn icon v-on=\"on\">\r\n                        <v-icon color=\"grey lighten-1\">mdi-cart</v-icon>\r\n                      </v-btn>\r\n                    </template>\r\n                    <span>Programmatic tooltip</span>\r\n                  </v-tooltip>\r\n                </v-col>\r\n              </v-row>\r\n            </v-container>\r\n          </template>\r\n          <template v-slot:html>\r\n            {{ code2.html }}\r\n          </template>\r\n          <template v-slot:js>\r\n            {{ code2.js }}\r\n          </template>\r\n        </KTCodePreview>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport KTCodePreview from \"@/view/content/CodePreview.vue\";\r\nimport { SET_BREADCRUMB } from \"@/core/services/store/breadcrumbs.module\";\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      code1: {\r\n        html: ` <div class=\"text-center\">\r\n  <v-tooltip left>\r\n    <template v-slot:activator=\"{ on }\">\r\n      <v-btn color=\"primary\" dark v-on=\"on\">Left</v-btn>\r\n    </template>\r\n    <span>Left tooltip</span>\r\n  </v-tooltip>\r\n\r\n  <v-tooltip top>\r\n    <template v-slot:activator=\"{ on }\">\r\n      <v-btn color=\"primary\" dark v-on=\"on\">Top</v-btn>\r\n    </template>\r\n    <span>Top tooltip</span>\r\n  </v-tooltip>\r\n\r\n  <v-tooltip bottom>\r\n    <template v-slot:activator=\"{ on }\">\r\n      <v-btn color=\"primary\" dark v-on=\"on\">Bottom</v-btn>\r\n    </template>\r\n    <span>Bottom tooltip</span>\r\n  </v-tooltip>\r\n\r\n  <v-tooltip right>\r\n    <template v-slot:activator=\"{ on }\">\r\n      <v-btn color=\"primary\" dark v-on=\"on\">Right</v-btn>\r\n    </template>\r\n    <span>Right tooltip</span>\r\n  </v-tooltip>\r\n</div>`\r\n      },\r\n\r\n      code2: {\r\n        html: `<v-container fluid class=\"text-center\">\r\n  <v-row\r\n    class=\"flex\"\r\n    justify=\"space-between\"\r\n  >\r\n    <v-col cols=\"12\">\r\n      <v-btn @click=\"show = !show\">toggle</v-btn>\r\n    </v-col>\r\n\r\n    <v-col cols=\"12\" class=\"mt-12\">\r\n      <v-tooltip v-model=\"show\" top>\r\n        <template v-slot:activator=\"{ on }\">\r\n          <v-btn icon v-on=\"on\">\r\n            <v-icon color=\"grey lighten-1\">mdi-cart</v-icon>\r\n          </v-btn>\r\n        </template>\r\n        <span>Programmatic tooltip</span>\r\n      </v-tooltip>\r\n    </v-col>\r\n  </v-row>\r\n</v-container>`,\r\n        js: `export default {\r\n  data () {\r\n    return {\r\n      show: false,\r\n    }\r\n  },\r\n}`\r\n      },\r\n      show: false\r\n    };\r\n  },\r\n  components: {\r\n    KTCodePreview\r\n  },\r\n  mounted() {\r\n    this.$store.dispatch(SET_BREADCRUMB, [\r\n      { title: \"Vuetify\", route: \"alerts\" },\r\n      { title: \"Tooltips\" }\r\n    ]);\r\n  }\r\n};\r\n</script>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Tooltips.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Tooltips.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Tooltips.vue?vue&type=template&id=2bf8bd58&\"\nimport script from \"./Tooltips.vue?vue&type=script&lang=js&\"\nexport * from \"./Tooltips.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VBtn } from 'vuetify/lib/components/VBtn';\nimport { VCol } from 'vuetify/lib/components/VGrid';\nimport { VContainer } from 'vuetify/lib/components/VGrid';\nimport { VIcon } from 'vuetify/lib/components/VIcon';\nimport { VRow } from 'vuetify/lib/components/VGrid';\nimport { VTooltip } from 'vuetify/lib/components/VTooltip';\ninstallComponents(component, {VBtn,VCol,VContainer,VIcon,VRow,VTooltip})\n"],"sourceRoot":""}