Discussion
2
Replies
430
Views
Amazon
Posted: July 14, 2015
Last activity: September 10, 2015
Closed
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.
Posted: 5 years ago
How to display tool tip on the Home tab & phone tab in the CPM portal...
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