Discussion
Amazon
IN
Last activity: 10 Sep 2015 9:59 EDT
Tooltip for pxDateTime
Hi,
I have a requirement to use Tooltip for a date/date time field whic uses pxDateTime control. Most of the available controls(for text input, icon, image, button, checkbox) have the Tooltip option on configuration screen except pxDateTime control. How to achieve this without using a pxIcon on left or right side of my date field? Is writing a new control viable option?
Thanks.
Areteans Technology
IN
Unfortunately pxDatetime has no tooltip configurable option. Buy you can achieve this feature in 2 ways:
Option 1:
<input name="$PpyTempWorkPage$ppyTemplateCalendar" class="inactvDtTmTxt" id="DateTime" style="padding-right: 17px;" type="text" data-ctl="["DatePicker"]" value="" title="test label"/>
This will be the markup generated by pega for pxdatetime, now write a small snippet of JS to add an attribute title to the input tag.Title will automatically take care of providing the tooltip on hover.
document.getElementById("$PpyTempWorkPage$ppyTemplateCalendar").setAttribute("title", "your tool tip")
Option 2:
Go to pxdate time configurations, go to presentation , -Advanced Presentation Options and add a custom css class for your date time (Cell read-write classes) or Cell read-only classes).
.CustomDateTime and then add the below snippet in your custom css file on the harness.
.CustomDateTime :hover:after {
content: "Your tooltip";
display: block;
position: relative;
top: -16px;
right: -16px;
width: 100px;
}
Unfortunately pxDatetime has no tooltip configurable option. Buy you can achieve this feature in 2 ways:
Option 1:
<input name="$PpyTempWorkPage$ppyTemplateCalendar" class="inactvDtTmTxt" id="DateTime" style="padding-right: 17px;" type="text" data-ctl="["DatePicker"]" value="" title="test label"/>
This will be the markup generated by pega for pxdatetime, now write a small snippet of JS to add an attribute title to the input tag.Title will automatically take care of providing the tooltip on hover.
document.getElementById("$PpyTempWorkPage$ppyTemplateCalendar").setAttribute("title", "your tool tip")
Option 2:
Go to pxdate time configurations, go to presentation , -Advanced Presentation Options and add a custom css class for your date time (Cell read-write classes) or Cell read-only classes).
.CustomDateTime and then add the below snippet in your custom css file on the harness.
.CustomDateTime :hover:after {
content: "Your tooltip";
display: block;
position: relative;
top: -16px;
right: -16px;
width: 100px;
}
You should play around for positioning the tool tip in option 2 anyways. I prefer option 1.
Thanks,
Ashok
