vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merged new Docs and Demos

Browse source
This commit is contained in:
Cagatay Civici 2023-02-28 11:29:30 +03:00
parent 296cc217fb
commit dfcc8ef4e7
1235 changed files with 130757 additions and 122640 deletions
Download patch file Download diff file Expand all files Collapse all files

100
pages/tooltip/index.vue
View file

@ -1,67 +1,51 @@
<template>
<div>
<Head>
<Title>Vue Tooltip Directive</Title>
<Meta name="description" content="Tooltip functionality is integrated within various PrimeVue components." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Tooltip</h1>
<p>Tooltip directive provides advisory information for a component.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation">
<div class="card">
<h5>Positions</h5>
<div class="grid p-fluid">
<div class="col-12 md:col-3">
<InputText v-tooltip.right="'Enter your username'" type="text" placeholder="Right" />
</div>
<div class="col-12 md:col-3">
<InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
</div>
<div class="col-12 md:col-3">
<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
</div>
<div class="col-12 md:col-3">
<InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
</div>
</div>
<h5>Focus and Blur</h5>
<InputText v-tooltip.bottom.focus="'Enter your username'" type="text" placeholder="Focus" />
<h5>Button</h5>
<Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
<h5>Custom Class</h5>
<InputText v-tooltip.right="{ value: 'Invalid username', class: 'custom-error' }" type="text" placeholder="Custom Class" />
</div>
</div>
<TooltipDoc />
</div>
<DocComponent title="Vue Tooltip Component" header="Tooltip" description="Tooltip directive provides advisory information for a component." :componentDocs="docs" :apiDocs="['Tooltip']" />
</template>
<script>
import TooltipDoc from './TooltipDoc';
import AccessibilityDoc from '@/doc/tooltip/AccessibilityDoc';
import EventDoc from '@/doc/tooltip/EventDoc';
import ImportDoc from '@/doc/tooltip/ImportDoc';
import PositionDoc from '@/doc/tooltip/PositionDoc';
import StyleDoc from '@/doc/tooltip/StyleDoc';
import TemplateDoc from '@/doc/tooltip/TemplateDoc';
export default {
components: {
TooltipDoc: TooltipDoc
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'position',
label: 'Position',
component: PositionDoc
},
{
id: 'event',
label: 'Event',
component: EventDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
]
};
}
};
</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>