Skip to content

Commit

Permalink
feat: update v-tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@gravitano
gravitano committed Feb 8, 2022
1 parent 3341eaa commit 08c173c
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 90 deletions.
74 changes: 34 additions & 40 deletions src/components/VTooltip/VTooltip.vue
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,28 @@
<script setup>
import { ref, toRefs} from 'vue';
import {createPopper} from '@popperjs/core';
import { ref, toRefs } from "vue";
import { createPopper } from "@popperjs/core";
const props = defineProps({
placement: {
type: String,
default: 'top',
default: "top",
},
color: {
type: String,
default: 'white',
options: {
type: Object,
default: () => ({}),
},
bgColor: {
activatorClass: {
type: String,
default: 'black',
default: "",
},
maxWidth: {
tooltipClass: {
type: String,
default: '300px',
},
options: {
type: Object,
default: () => ({}),
default:
"inline-block shadow px-3 py-2 rounded bg-[#000] text-white p-2 rounded max-w-[300px]",
},
});
const {color, bgColor} = toRefs(props);
const { color, bgColor } = toRefs(props);
const show = ref(false);
const target = ref(null);
Expand All @@ -35,23 +32,23 @@ const onMouseOver = () => {
show.value = true;
const offset = {
top: [0, 20],
'top-start': [0, 20],
'top-end': [0, 20],
"top-start": [0, 20],
"top-end": [0, 20],
bottom: [0, 20],
'bottom-start': [0, 20],
'bottom-end': [0, 20],
"bottom-start": [0, 20],
"bottom-end": [0, 20],
right: [0, 10],
'right-start': [0, 10],
'right-end': [0, 10],
"right-start": [0, 10],
"right-end": [0, 10],
left: [0, 10],
'left-start': [0, 10],
'left-end': [0, 10],
"left-start": [0, 10],
"left-end": [0, 10],
};
createPopper(target.value, tooltip.value, {
placement: props.placement,
modifiers: [
{
name: 'offset',
name: "offset",
options: {
offset: offset[props.placement],
},
Expand All @@ -72,31 +69,28 @@ const on = ref({
</script>

<template>
<span id="tooltipActivator" ref="target" aria-describedby="tooltip">
<span
id="tooltipActivator"
ref="target"
aria-describedby="tooltip"
:class="activatorClass"
>
<slot name="activator" :on="on" />
</span>

<span
id="tooltip"
ref="tooltip"
role="tooltip"
:class="[`text-${color}`, `bg-${bgColor}`]"
:style="{display: show ? 'block' : 'none'}"
:class="['tooltip', tooltipClass]"
:style="{ display: show ? 'block' : 'none' }"
>
<slot />
<div id="arrow" data-popper-arrow></div>
</span>
</template>

<style>
#tooltip {
display: inline-block;
background: v-bind(bgColor);
color: v-bind(color);
max-width: v-bind(maxWidth);
@apply shadow px-3 py-2 rounded;
}
#arrow,
#arrow::before {
position: absolute;
Expand All @@ -112,23 +106,23 @@ const on = ref({
#arrow::before {
visibility: visible;
content: '';
content: "";
transform: rotate(45deg);
}
#tooltip[data-popper-placement^='top'] > #arrow {
.tooltip[data-popper-placement^="top"] > #arrow {
bottom: -4px;
}
#tooltip[data-popper-placement^='bottom'] > #arrow {
.tooltip[data-popper-placement^="bottom"] > #arrow {
top: -4px;
}
#tooltip[data-popper-placement^='left'] > #arrow {
.tooltip[data-popper-placement^="left"] > #arrow {
right: -4px;
}
#tooltip[data-popper-placement^='right'] > #arrow {
.tooltip[data-popper-placement^="right"] > #arrow {
left: -4px;
}
</style>
71 changes: 21 additions & 50 deletions src/views/components/Tooltips.vue
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<script setup>
import {ref} from 'vue';
import SshPre from 'simple-syntax-highlighter';
import { ref } from "vue";
import SshPre from "simple-syntax-highlighter";
const breadcrumbs = ref([
{
to: '/cms',
title: 'Dashboard',
to: "/cms",
title: "Dashboard",
},
{
to: '/cms/components',
title: 'Components',
to: "/cms/components",
title: "Components",
},
{
to: '/cms/components/tooltips',
title: 'v-tooltip',
to: "/cms/components/tooltips",
title: "v-tooltip",
},
]);
</script>
Expand All @@ -23,43 +23,19 @@ const breadcrumbs = ref([
<v-breadcrumbs :items="breadcrumbs" />

<div class="bg-white shadow-md rounded-md mb-4">
<div class="border-b py-3 px-4 font-medium text-gray-600">Tooltip Left</div>
<div class="border-b py-3 px-4 font-medium text-gray-600">Default</div>
<div class="bg-gray-100 shadow-inner rounded-b-md">
<div class="flex flex-col md:flex-row">
<div class="md:w-6/12 py-3 px-4">
<v-tooltip></v-tooltip>
<v-tooltip>
<template #activator="{ on }">
<v-btn v-on="on">Hover me</v-btn>
</template>
<span>Hello :)</span>
</v-tooltip>
</div>
<div class="md:w-6/12 px-4 flex items-center rounded-br-md text-sm">
<ssh-pre class="mb-3 w-full" language="html-vue" copy-button dark>
<template #copy-button>
<svg
class="w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
/>
</svg>
</template>
<pre>&lt;v-tooltip&gt;primary&lt;/v-tooltip&gt;</pre>
</ssh-pre>
</div>
</div>
</div>
</div>

<div class="bg-white shadow-md rounded-md mb-4">
<div class="border-b py-3 px-4 font-medium text-gray-600">Methods</div>
<div class="shadow-inner rounded-b-md">
<div class="flex flex-col md:flex-row">
<div class="w-full px-4 flex items-center rounded-br-md text-sm">
<ssh-pre class="mb-3 w-full" language="js" copy-button dark>
<template #copy-button>
<svg
class="w-4 h-4"
Expand All @@ -77,17 +53,12 @@ const breadcrumbs = ref([
</svg>
</template>
<pre>
leftTooltip: function(){
if(this.tooltipShow){
this.tooltipShow = false;
} else {
this.tooltipShow = true;
createPopper(this.$refs.btnRef, this.$refs.tooltipRef, {
placement: "left"
});
}
},
</pre
&lt;v-tooltip&gt;
&lt;template #activator="{ on }"&gt;
&lt;v-btn v-on="on"&gt;Hover me&lt;/v-btn&gt;
&lt;/template&gt;
&lt;span&gt;Hello :)&lt;/span&gt;
&lt;/v-tooltip&gt;</pre
>
</ssh-pre>
</div>
Expand Down

0 comments on commit 08c173c

Please sign in to comment.