{"version":3,"sources":["webpack:///./src/views/components/tooltip/code.js"],"names":["codeTooltipDefault","codePosition","codeVariantCustom","codeTriggers","codeOptions","codeMethods","codeEvent"],"mappings":"kHAAA,wUAAO,IAAMA,EAAqB,6iCAyDrBC,EAAe,4nCAmDfC,EAAoB,8kEAsGpBC,EAAe,0rCAwDfC,EAAc,yiCAuDdC,EAAc,sxEA4GdC,EAAY","file":"js/chunk-2d0cb6a3.66b9e875.js","sourcesContent":["export const codeTooltipDefault = `\n<template>\n  <div class=\"d-flex align-item-center\">\n    <b-form-checkbox\n      v-model=\"checked\"\n      v-b-tooltip.hover\n      title=\"Default Tooltip\"\n      name=\"check-button\"\n      switch\n      inline\n      class=\"d-flex align-items-center\"\n    />\n    <b-form-spinbutton\n      id=\"demo-sb\"\n      v-model=\"value\"\n      v-b-tooltip.hover\n      title=\"Default Tooltip\"\n      min=\"1\"\n      max=\"100\"\n      inline\n    />\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      v-b-tooltip.hover\n      title=\"Default Tooltip\"\n      class=\"ml-1\"\n      variant=\"outline-primary\"\n    >\n      Button\n    </b-button>\n  </div>\n</template>\n\n<script>\nimport {\n  BFormCheckbox, VBTooltip, BFormSpinbutton, BButton,\n} from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BFormCheckbox,\n    BFormSpinbutton,\n    BButton,\n  },\n  directives: {\n    'b-tooltip': VBTooltip,\n    Ripple\n  },\n  data: () => ({\n    checked: true,\n    value: 50,\n  }),\n}\n</script>\n`\n\nexport const codePosition = `\n<template>\n  <div class=\"demo-inline-spacing\">\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      v-b-tooltip.hover.top=\"'Tooltip on top!'\"\n      variant=\"outline-primary\"\n    >\n      Tooltip on top\n    </b-button>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      v-b-tooltip.hover.right=\"'Tooltip on right!'\"\n      variant=\"outline-primary\"\n    >\n      Tooltip on right\n    </b-button>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      v-b-tooltip.hover.left=\"'Tooltip on left!'\"\n      variant=\"outline-primary\"\n    >\n      Tooltip on left\n    </b-button>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      v-b-tooltip.hover.bottom=\"'Tooltip on bottom!'\"\n      variant=\"outline-primary\"\n    >\n      Tooltip on bottom\n    </b-button>\n  </div>\n</template>\n\n<script>\nimport {BButton, VBTooltip,} from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BCardCode,\n    BButton,\n  },\n  directives: {\n    'b-tooltip': VBTooltip,\n    Ripple,\n  },\n}\n</script>\n`\n\nexport const codeVariantCustom = `\n<template>\n  <div class=\"demo-inline-spacing\">\n\n    <!-- default -->\n    <b-button\n      v-b-tooltip.hover\n      title=\"Default variant\"\n      variant=\"gradient-primary\"\n    >\n      Default\n    </b-button>\n\n    <!-- primary -->\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      v-b-tooltip.hover.v-primary\n      title=\"Primary variant\"\n      variant=\"outline-primary\"\n    >\n      Primary\n    </b-button>\n\n    <!-- secondary -->\n    <b-button\n      v-ripple.400=\"'rgba(186, 191, 199, 0.15)'\"\n      v-b-tooltip.hover.v-secondary\n      title=\"Secondary variant\"\n      variant=\"outline-secondary\"\n    >\n      Secondary\n    </b-button>\n\n    <!-- success -->\n    <b-button\n      v-ripple.400=\"'rgba(40, 199, 111, 0.15)'\"\n      v-b-tooltip.hover.v-success\n      title=\"Success variant\"\n      variant=\"outline-success\"\n    >\n      Success\n    </b-button>\n\n    <!-- danger -->\n    <b-button\n      v-ripple.400=\"'rgba(234, 84, 85, 0.15)'\"\n      v-b-tooltip.hover.v-danger\n      title=\"Danger variant\"\n      variant=\"outline-danger\"\n    >\n      Danger\n    </b-button>\n\n    <!-- warning -->\n    <b-button\n      v-ripple.400=\"'rgba(255, 159, 67, 0.15)'\"\n      v-b-tooltip.hover.v-warning\n      title=\"Warning variant\"\n      variant=\"outline-warning\"\n    >\n      Warning\n    </b-button>\n\n    <!-- info -->\n    <b-button\n      v-ripple.400=\"'rgba(0, 207, 232, 0.15)'\"\n      v-b-tooltip.hover.v-info\n      title=\"Info variant\"\n      variant=\"outline-info\"\n    >\n      Info\n    </b-button>\n\n    <!-- dark -->\n    <b-button\n      v-ripple.400=\"'rgba(30, 30, 30, 0.15)'\"\n      v-b-tooltip.hover.v-dark\n      title=\"Dark variant\"\n      variant=\"outline-dark\"\n    >\n      Dark\n    </b-button>\n  </div>\n</template>\n\n<script>\nimport {VBTooltip, BButton} from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BCardCode,\n    BButton,\n  },\n  directives: {\n    'b-tooltip': VBTooltip,\n    Ripple,\n  },\n}\n</script>\n`\n\nexport const codeTriggers = `\n<template>\n  <div class=\"demo-inline-spacing\">\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      v-b-tooltip.click.v-primary\n      title=\"On Cllick Trigger\"\n      variant=\"outline-primary\"\n    >\n      On Cllick Trigger\n    </b-button>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      v-b-tooltip.hover.v-primary\n      title=\"On Hover Trigger\"\n      variant=\"outline-primary\"\n    >\n      On Hover Trigger\n    </b-button>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      v-b-tooltip.hover.focus.v-primary\n      title=\"Hover + Focus Trigger\"\n      variant=\"outline-primary\"\n    >\n      Hover + Focus Trigger\n    </b-button>\n    <b-button\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      v-b-tooltip.focus.v-primary\n      title=\"On Focus Trigger\"\n      variant=\"outline-primary\"\n    >\n      On Focus Trigger\n    </b-button>\n  </div>\n</template>\n\n<script>\nimport {\n  VBTooltip, BButton,\n} from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n  },\n  directives: {\n    'b-tooltip': VBTooltip,\n    Ripple,\n  },\n}\n</script>\n`\n\nexport const codeOptions = `\n<template>\n  <div class=\"demo-inline-spacing\">\n    <b-button\n      id=\"tooltip-target-1\"\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n    >\n      No animation\n    </b-button>\n    <b-tooltip\n      target=\"tooltip-target-1\"\n      triggers=\"hover\"\n      no-fade\n    >\n      Without Fade Animation        class=\"mb-1 mb-md-0\"\n    </b-tooltip>\n    <b-button\n      id=\"tooltip-target-2\"\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n    >\n      Delay Tooltip\n    </b-button>\n    <b-tooltip\n      target=\"tooltip-target-2\"\n      :delay=\"delay\"\n    >\n      Delay triggers\n    </b-tooltip>\n  </div>\n</template>\n\n<script>\nimport {VBTooltip, BButton, BTooltip} from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BTooltip,\n    BButton,\n  },\n  directives: {\n    'b-tooltip': VBTooltip,\n    Ripple,\n  },\n  data() {\n    return {\n      delay: { show: 500, hide: 500 },\n    }\n  },\n}\n</script>\n`\n\nexport const codeMethods = `\n<template>\n   <div class=\"demo-inline-spacing\">\n    <b-button\n      id=\"tooltip-button-1\"\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"showTooltip\"\n    >\n      Show Toggle Tooltip\n    </b-button>\n    <b-tooltip\n      target=\"tooltip-button-1\"\n      placement=\"top\"\n      triggers=\"click\"\n    >\n      tooltip!\n    </b-tooltip>\n\n    <b-button\n      id=\"tooltip-button-2\"\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"hideTooltip\"\n    >\n      Hide Toggle Tooltip\n    </b-button>\n    <b-tooltip\n      target=\"tooltip-button-2\"\n      placement=\"top\"\n      triggers=\"hover\"\n    >\n      tooltip!\n    </b-tooltip>\n\n    <b-button\n      id=\"tooltip-button-3\"\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      @click=\"show = !show\"\n    >\n      Toggle Tooltip\n    </b-button>\n    <b-tooltip\n      :show.sync=\"show\"\n      target=\"tooltip-button-3\"\n      placement=\"top\"\n      triggers=\"click\"\n    >\n      tooltip!\n    </b-tooltip>\n\n    <b-button\n      id=\"tooltip-button-disable\"\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n    >\n      I have a tooltip\n    </b-button>\n\n    <b-button\n      v-ripple.400=\"'rgba(255, 255, 255, 0.15)'\"\n      :variant=\"disabled ? 'success':'danger'\"\n      @click=\"disabled = !disabled\"\n    >\n      {{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop\n    </b-button>\n    <b-tooltip\n      ref=\"tooltip\"\n      :disabled.sync=\"disabled\"\n      target=\"tooltip-button-disable\"\n    >\n      <span>Hello </span><strong>World!</strong>\n    </b-tooltip>\n  </div>\n</template>\n\n<script>\nimport {VBTooltip, BButton, BTooltip} from 'bootstrap-vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BTooltip,\n    BButton,\n  },\n  directives: {\n    'b-tooltip': VBTooltip,\n    Ripple,\n  },\n  data() {\n    return {\n      show: false,\n      disabled: false,\n    }\n  },\n  methods: {\n    showTooltip() {\n      this.$root.$emit('bv::show::tooltip', 'tooltip-button-1')\n    },\n    hideTooltip() {\n      this.$root.$emit('bv::hide::tooltip', 'tooltip-button-2')\n    },\n  },\n}\n</script>\n`\n\nexport const codeEvent = `\n<template>\n   <div class=\"demo-inline-spacing\">\n\n    <!-- show button -->\n    <b-button\n      id=\"tooltip-button-show-event\"\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n    >\n      Show Event Tooltip\n    </b-button>\n    <!-- tooltip -->\n    <b-tooltip\n      ref=\"tooltip-show\"\n      target=\"tooltip-button-show-event\"\n      triggers=\"click\"\n      @show=\"onShow\"\n    >\n      tooltip!\n    </b-tooltip>\n\n    <!-- button shown -->\n    <b-button\n      id=\"tooltip-button-shown-event\"\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n    >\n      Shown Event Tooltip\n    </b-button>\n    <!-- tooltip -->\n    <b-tooltip\n      ref=\"tooltip-shown\"\n      target=\"tooltip-button-shown-event\"\n      triggers=\"click\"\n      @shown=\"onShown\"\n    >\n      tooltip!\n    </b-tooltip>\n\n    <!-- button hide -->\n    <b-button\n      id=\"tooltip-button-hide-event\"\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n    >\n      Hide Event Tooltip\n    </b-button>\n    <!-- tooltip -->\n    <b-tooltip\n      ref=\"tooltip-hide\"\n      target=\"tooltip-button-hide-event\"\n      triggers=\"click\"\n      @hide=\"onHide\"\n    >\n      tooltip!\n    </b-tooltip>\n\n    <!-- button hidden -->\n    <b-button\n      id=\"tooltip-button-hidden-event\"\n      v-ripple.400=\"'rgba(113, 102, 240, 0.15)'\"\n      variant=\"outline-primary\"\n      class=\"mb-1 mb-xl-0\"\n    >\n      Hidden Event Tooltip\n    </b-button>\n\n    <!-- tooltip -->\n    <b-tooltip\n      ref=\"tooltip-hidden\"\n      target=\"tooltip-button-hidden-event\"\n      triggers=\"click\"\n      @hidden=\"onHidden\"\n    >\n      tooltip!\n    </b-tooltip>\n  </div>\n</template>\n\n<script>\nimport {VBTooltip, BButton, BTooltip} from 'bootstrap-vue'\nimport ToastificationContent from '@core/components/toastification/ToastificationContent.vue'\nimport Ripple from 'vue-ripple-directive'\n\nexport default {\n  components: {\n    BButton,\n    BTooltip,\n    // eslint-disable-next-line vue/no-unused-components\n    ToastificationContent,\n  },\n  directives: {\n    'b-tooltip': VBTooltip,\n    Ripple,\n  },\n  methods: {\n    onShow() {\n      this.$toast({\n        component: ToastificationContent,\n        props: {\n          title: 'Show Event Tooltip',\n          icon: 'BellIcon',\n        },\n      })\n    },\n    onShown() {\n      this.$toast({\n        component: ToastificationContent,\n        props: {\n          title: 'Shown Event Tooltip',\n          icon: 'BellIcon',\n        },\n      })\n    },\n    onHide() {\n      this.$toast({\n        component: ToastificationContent,\n        props: {\n          title: 'Hide Event Tooltip',\n          icon: 'BellIcon',\n        },\n      })\n    },\n    onHidden() {\n      this.$toast({\n        component: ToastificationContent,\n        props: {\n          title: 'Hidden Event Tooltip',\n          icon: 'BellIcon',\n        },\n      })\n    },\n  },\n}\n</script>\n`\n"],"sourceRoot":""}