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) {
const tipClass = el.$_ptooltipClass;
let tooltipElement = getTooltipElement(el);
tooltipElement.style.left = -999 + 'px';
tooltipElement.style.top = -999 + 'px';
tooltipElement.className = 'p-tooltip p-component p-tooltip-' + position;
if (tipClass) tooltipElement.className += ' p-tooltip-' + tipClass;
tooltipElement.className = `p-tooltip p-component p-tooltip-${position} ${el.$_ptooltipClass||''}`;
}
function isOutOfBounds(el) {
@ -274,7 +272,7 @@ const Tooltip = {
else {
target.$_ptooltipValue = options.value.value;
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;
@ -305,7 +303,7 @@ const Tooltip = {
else {
target.$_ptooltipValue = options.value.value;
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'" />
<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>
@ -52,11 +52,11 @@ export default {
</script>
<style>
.p-tooltip-error .p-tooltip-text {
background-color: darksalmon;
color: darkred;
.custom-error .p-tooltip-text {
background-color: var(--pink-800);
color: rgb(255, 255, 255);
}
.p-tooltip-error.p-tooltip-right .p-tooltip-arrow {
border-right-color: darksalmon;
.custom-error.p-tooltip-right .p-tooltip-arrow {
border-right-color: var(--pink-800);
}
</style>

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

@ -83,7 +83,7 @@ directives: {
<td>class</td>
<td>string</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>
</tbody>
</table>
@ -111,10 +111,6 @@ directives: {
<tr>
<td>p-tooltip-text</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>
</tbody>
</table>
@ -158,7 +154,7 @@ export default {
<Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
<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>
</template>
@ -166,6 +162,15 @@ export default {
export default {
}
<\\/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': {
@ -196,7 +201,7 @@ export default {
<Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
<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>
</template>
@ -204,6 +209,15 @@ export default {
export default {
}
<\\/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>
`
}
}