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

Refactor #1612

pull/1613/head
mertsincan 2021-09-28 12:15:43 +03:00
parent b58f3ddab6
commit 11e89e1c0b
3 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/tooltip/Tooltip.js
View File

@ -219,12 +219,10 @@ function alignBottom(el) {
} }
function preAlign(el, position) { function preAlign(el, position) {
const tipClass = el.$_ptooltipClass;
let tooltipElement = getTooltipElement(el); let tooltipElement = getTooltipElement(el);
tooltipElement.style.left = -999 + 'px'; tooltipElement.style.left = -999 + 'px';
tooltipElement.style.top = -999 + 'px'; tooltipElement.style.top = -999 + 'px';
tooltipElement.className = 'p-tooltip p-component p-tooltip-' + position; tooltipElement.className = `p-tooltip p-component p-tooltip-${position} ${el.$_ptooltipClass||''}`;
if (tipClass) tooltipElement.className += ' p-tooltip-' + tipClass;
} }
function isOutOfBounds(el) { function isOutOfBounds(el) {
@ -274,7 +272,7 @@ const Tooltip = {
else { else {
target.$_ptooltipValue = options.value.value; target.$_ptooltipValue = options.value.value;
target.$_ptooltipDisabled = options.value.disabled || false; target.$_ptooltipDisabled = options.value.disabled || false;
target.$_ptooltipClass = options.value.class || false; target.$_ptooltipClass = options.value.class;
} }
target.$_ptooltipZIndex = options.instance.$primevue && options.instance.$primevue.config && options.instance.$primevue.config.zIndex.tooltip; target.$_ptooltipZIndex = options.instance.$primevue && options.instance.$primevue.config && options.instance.$primevue.config.zIndex.tooltip;
@ -305,7 +303,7 @@ const Tooltip = {
else { else {
target.$_ptooltipValue = options.value.value; target.$_ptooltipValue = options.value.value;
target.$_ptooltipDisabled = options.value.disabled || false; target.$_ptooltipDisabled = options.value.disabled || false;
target.$_ptooltipClass = options.value.class || false; target.$_ptooltipClass = options.value.class;
} }
} }
}; };

12
src/views/tooltip/TooltipDemo.vue
View File

@ -33,7 +33,7 @@
<Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" /> <Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
<h5>Custom Class</h5> <h5>Custom Class</h5>
<InputText type="text" placeholder="Custom Class" v-tooltip.right="{value:'Invalid username', class: 'error'}" /> <InputText type="text" placeholder="Custom Class" v-tooltip.right="{value:'Invalid username', class: 'custom-error'}" />
</div> </div>
</div> </div>
@ -52,11 +52,11 @@ export default {
</script> </script>
<style> <style>
.p-tooltip-error .p-tooltip-text { .custom-error .p-tooltip-text {
background-color: darksalmon; background-color: var(--pink-800);
color: darkred; color: rgb(255, 255, 255);
} }
.p-tooltip-error.p-tooltip-right .p-tooltip-arrow { .custom-error.p-tooltip-right .p-tooltip-arrow {
border-right-color: darksalmon; border-right-color: var(--pink-800);
} }
</style> </style>

28
src/views/tooltip/TooltipDoc.vue
View File

@ -83,7 +83,7 @@ directives: {
<td>class</td> <td>class</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>When present, it adds a custom class of p-tooltip-*class* to the tooltip.</td> <td>When present, it adds a custom class to the tooltip.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -111,10 +111,6 @@ directives: {
<tr> <tr>
<td>p-tooltip-text</td> <td>p-tooltip-text</td>
<td>Text of the tooltip</td> <td>Text of the tooltip</td>
</tr>
<tr>
<td>p-tooltip-*custom*</td>
<td>Input element additional class created by the class property</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -158,7 +154,7 @@ export default {
<Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" /> <Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
<h5>Custom Class</h5> <h5>Custom Class</h5>
<InputText type="text" placeholder="Custom Class" v-tooltip.right="{value:'Invalid username', class: 'error'}" /> <InputText type="text" placeholder="Custom Class" v-tooltip.right="{value:'Invalid username', class: 'custom-error'}" />
</div> </div>
</template> </template>
@ -166,6 +162,15 @@ export default {
export default { export default {
} }
<\\/script> <\\/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>
` `
}, },
'composition-api': { 'composition-api': {
@ -196,7 +201,7 @@ export default {
<Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" /> <Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
<h5>Custom Class</h5> <h5>Custom Class</h5>
<InputText type="text" placeholder="Custom Class" v-tooltip.right="{value:'Invalid username', class: 'error'}" /> <InputText type="text" placeholder="Custom Class" v-tooltip.right="{value:'Invalid username', class: 'custom-error'}" />
</div> </div>
</template> </template>
@ -204,6 +209,15 @@ export default {
export default { export default {
} }
<\\/script> <\\/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>
` `
} }
} }