Discussion

2
Replies
442
Views
 Narsi Seelam (Narsi_Reddy)
Amazon

Amazon
IN
Narsi_Reddy Member since 2015 1 post
Amazon
Posted: July 14, 2015
Last activity: September 10, 2015
Posted: 14 Jul 2015 7:02 EDT
Last activity: 10 Sep 2015 9:59 EDT
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.

User Experience
Moderation Team has archived post, This thread is closed to future replies. Content and links will no longer be updated. If you have the same/similar Discussion, please write a new Discussion.
Posted: 6 years ago
Posted: 15 Jul 2015 22:12 EDT
Ashok Kumar Bommisetty (Ashok_Bommisetty)
Areteans Technology

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;

 }


 

Show More

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



Show Less