vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update tooltip docs

pull/4759/head
Cagatay Civici 2023-11-02 10:21:31 +03:00
parent b21541a13b
commit 1d365fd480
8 changed files with 133 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc/tooltip/AutoHideDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Tooltip is hidden when mouse leaves the target element, in cases where tooltip needs to be interacted with, set <i>autoHide</i> to false to change the default behavior.</p> <p>Tooltip gets hidden when mouse leaves the target element by default, set <i>autoHide</i> to false to change this behavior.</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-wrap justify-content-center gap-2"> <div class="card flex flex-wrap justify-content-center gap-2">
<InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" /> <InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />

92
doc/tooltip/CustomDoc.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A tooltip sample with a custom style and content.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-content-center">
<Button
v-tooltip.bottom="{
value: 'PrimeVue Rocks',
pt: {
arrow: {
style: {
borderBottomColor: 'var(--primary-color)'
}
},
text: 'bg-primary font-medium'
}
}"
severity="secondary"
label="Button"
/>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<Button
v-tooltip.bottom="{
value: 'PrimeVue Rocks',
pt: {
arrow: {
style: {
borderBottomColor: 'var(--primary-color)'
}
},
text: 'bg-primary font-medium'
}
}"
label="Button"
/>
`,
options: `
<template>
<div class="card flex flex-wrap justify-content-center">
<Button
v-tooltip.bottom="{
value: 'PrimeVue Rocks',
pt: {
arrow: {
style: {
borderBottomColor: 'var(--primary-color)'
}
},
text: 'bg-primary font-medium'
}
}"
severity="secondary"
label="Button"
/>
</div>
</template>
`,
composition: `
<template>
<div class="card flex flex-wrap justify-content-center">
<Button
v-tooltip.bottom="{
value: 'PrimeVue Rocks',
pt: {
arrow: {
style: {
borderBottomColor: 'var(--primary-color)'
}
},
text: 'bg-primary font-medium'
}
}"
severity="secondary"
label="Button"
/>
</div>
</template>
`
}
};
}
};
</script>

16
doc/tooltip/DelayDoc.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Adding delays to the show and hide events are defined with <i>showDelay</i> and <i>hideDelay</i> options respectively.</p> <p>Dlays to the enter and leave events are defined with <i>showDelay</i> and <i>hideDelay</i> options respectively.</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-wrap justify-content-center gap-2"> <div class="card flex flex-wrap justify-content-center">
<InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" /> <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,19 +14,19 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" /> <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex flex-wrap justify-content-center gap-2"> <div class="card flex flex-wrap justify-content-center">
<InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" /> <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
</div> </div>
</template> </template>
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex flex-wrap justify-content-center gap-2"> <div class="card flex flex-wrap justify-content-center">
<InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" /> <Button v-tooltip="{ value: 'Confirm to proceed', showDelay: 1000, hideDelay: 300 }" label="Save" />
</div> </div>
</template> </template>
` `

18
doc/tooltip/EventDoc.vue
View File

@ -1,10 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Tooltip is configured via modifiers that can be chained. Also, tooltip gets displayed on hover event by default, use <i>focus</i> modifier as alternative to set.</p> <p>Event to display the tooltip is defined as a modifier, default event is hover.</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-wrap justify-content-center gap-2"> <div class="card flex flex-wrap justify-content-center gap-2">
<InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" /> <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
<Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,22 +14,19 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" /> <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
<Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex flex-wrap justify-content-center gap-2"> <div class="card flex flex-wrap justify-content-center">
<InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" /> <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
<Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
</div> </div>
</template> </template>
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex flex-wrap justify-content-center gap-2"> <div class="card flex flex-wrap justify-content-center">
<InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" /> <InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />
<Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
</div> </div>
</template> </template>
` `

2
doc/tooltip/PositionDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>There are four choices to position the tooltip, default value is <i>right</i> and alternatives are <i>top</i>, <i>bottom</i>, <i>left</i>. Position is specified using a modifier.</p> <p>There are four choices to position the tooltip, default value is <i>right</i> and alternatives are <i>top</i>, <i>bottom</i>, <i>left</i>.</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-wrap justify-content-center gap-2"> <div class="card flex flex-wrap justify-content-center gap-2">
<InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" /> <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />

67
doc/tooltip/TemplateDoc.vue
View File

@ -1,67 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Tooltip can be customized via <i>class</i> and <i>escape</i> properties.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-content-center gap-2">
<InputText v-tooltip.right="{ value: `<h4 class='text-white m-0'>PrimeVue Rocks!</h4>`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<InputText v-tooltip.right="{ value: \`<h4 class='text-white'>PrimeVue Rocks!</h4>\`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />
`,
options: `
<template>
<div class="card flex flex-wrap justify-content-center gap-2">
<InputText v-tooltip.right="{ value: \`<h4 class='text-white'>PrimeVue Rocks!</h4>\`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />
</div>
</template>
<style>
.custom-error .p-tooltip-text {
background-color: var(--pink-800);
color: rgb(255, 255, 255);
}
.custom-error.p-tooltip-right .p-tooltip-arrow {
border-right-color: var(--pink-800);
}
</style>
`,
composition: `
<template>
<div class="card flex flex-wrap justify-content-center gap-2">
<InputText v-tooltip.right="{ value: \`<h4 class='text-white'>PrimeVue Rocks!</h4>\`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />
</div>
</template>
<style>
.custom-error .p-tooltip-text {
background-color: var(--pink-800);
color: rgb(255, 255, 255);
}
.custom-error.p-tooltip-right .p-tooltip-arrow {
border-right-color: var(--pink-800);
}
</style>
`
}
};
}
};
</script>
<style>
.custom-error .p-tooltip-text {
background-color: var(--pink-800);
color: rgb(255, 255, 255);
}
.custom-error.p-tooltip-right .p-tooltip-arrow {
border-right-color: var(--pink-800);
}
</style>

21
doc/tooltip/pt/PTDoc.vue
View File

@ -25,7 +25,12 @@ export default {
v-tooltip.right="{ v-tooltip.right="{
value: \`PrimeVue Rocks!\`, value: \`PrimeVue Rocks!\`,
pt: { pt: {
text: 'bg-primary' arrow: {
style: {
borderRightColor: 'var(--primary-color)'
}
},
text: 'bg-primary font-medium'
} }
}" }"
type="text" type="text"
@ -37,7 +42,12 @@ export default {
v-tooltip.right="{ v-tooltip.right="{
value: \`PrimeVue Rocks!\`, value: \`PrimeVue Rocks!\`,
pt: { pt: {
text: 'bg-primary' arrow: {
style: {
borderRightColor: 'var(--primary-color)'
}
},
text: 'bg-primary font-medium'
} }
}" }"
type="text" type="text"
@ -51,7 +61,12 @@ export default {
v-tooltip.right="{ v-tooltip.right="{
value: \`PrimeVue Rocks!\`, value: \`PrimeVue Rocks!\`,
pt: { pt: {
text: 'bg-primary' arrow: {
style: {
borderRightColor: 'var(--primary-color)'
}
},
text: 'bg-primary font-medium'
} }
}" }"
type="text" type="text"

12
pages/tooltip/index.vue
View File

@ -5,11 +5,11 @@
<script> <script>
import AccessibilityDoc from '@/doc/tooltip/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/tooltip/AccessibilityDoc.vue';
import AutoHideDoc from '@/doc/tooltip/AutoHideDoc.vue'; import AutoHideDoc from '@/doc/tooltip/AutoHideDoc.vue';
import CustomDoc from '@/doc/tooltip/CustomDoc.vue';
import DelayDoc from '@/doc/tooltip/DelayDoc.vue'; import DelayDoc from '@/doc/tooltip/DelayDoc.vue';
import EventDoc from '@/doc/tooltip/EventDoc.vue'; import EventDoc from '@/doc/tooltip/EventDoc.vue';
import ImportDoc from '@/doc/tooltip/ImportDoc.vue'; import ImportDoc from '@/doc/tooltip/ImportDoc.vue';
import PositionDoc from '@/doc/tooltip/PositionDoc.vue'; import PositionDoc from '@/doc/tooltip/PositionDoc.vue';
import TemplateDoc from '@/doc/tooltip/TemplateDoc.vue';
import PTComponent from '@/doc/tooltip/pt/index.vue'; import PTComponent from '@/doc/tooltip/pt/index.vue';
import ThemingDoc from '@/doc/tooltip/theming/index.vue'; import ThemingDoc from '@/doc/tooltip/theming/index.vue';
@ -32,11 +32,6 @@ export default {
label: 'Event', label: 'Event',
component: EventDoc component: EventDoc
}, },
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{ {
id: 'autohide', id: 'autohide',
label: 'Auto Hide', label: 'Auto Hide',
@ -47,6 +42,11 @@ export default {
label: 'Delay', label: 'Delay',
component: DelayDoc component: DelayDoc
}, },
{
id: 'custom',
label: 'Custom',
component: CustomDoc
},
{ {
id: 'accessibility', id: 'accessibility',
label: 'Accessibility', label: 'Accessibility',