• Home
  • Ideas
  • Engagements: Editing tooltip pointer CSS

Engagements: Editing tooltip pointer CSS

Related products: PX Engagements
Hi all,





A seemingly simple task, but when editing a PX engagement I can't see how to edit the CSS style for a tooltip pointer, i.e., the little "arrow" attached to the tooltip that points to a specific location on the page. Editing the CSS for the tooltip itself is easy within the Editor, but It appears that the CSS for the pointer is outside the scope of the other styles. I assume I'm just missing the obvious and would appreciate having someone point me to the correct solution.





This is important because the default color for the tooltip pointer is white, and on a page with a white background the pointer is invisible. We can override the background color in the Editor to a light gray to allow the pointer to stand out, but this is not our desired approach.





Thanks!





Chad



Hey Chad, it might be the CSS below. It is changing the tip to blue in console:





.apt-guide-arrow-top::after {





border-color: blue }









@michael_sweeney This sounds very similar to another post you shared. Do you have any suggestions?



thanks Michael, appreciate your response.





@chad, let us know if this helps.





@dileepnalla could you please provide few more insights on this, as needed?



Hi Mike,





Thanks for confirming that I was looking in the expected location! I can override the arrow color in devtools, but I'm not able to do so in the GPX editor. I can add the following in the editor:





.apt-guide-arrow-top::after {





border-color: transparent transparent #b32a2a transparent;}





And see it appended to the CSS in:





<style type="text/css">.apt-vex.vex.vex-theme-os .px-engagement-wrapper-guide ...... </style>





But nothing in the UI changes. I think this is because the style for the arrow is set in id="apt-guide-arrow-style" which does not seem to be editable.





For now, we will just change the tooltip's background color to something other than white, as this will also change the arrow color.





Thanks again,





Chad



Hi @caudet ,





We have reviewed your request and tried to implement your ask by using the CSS editor with in the engagement, we are sorry to inform you that right now we can't change the enagement arrow tip color.





The other way is we can override the background color in the Editor as you mentioned.





Please let me know if this has more impact on your styling and presentation of the engagement, we will review and log a feature request accordingly





Thanks





Dileep Nalla



Hi @dileepnalla . Thanks for following up. We are using the background color to get around the minor issue with the white tooltip pointer. So nothing blocking us at this time.





As for feature requests, I'd suggest allowing the user to disable/enable the pointer within the editor, as that would likely require less engineering effort than incorporating the pointer CSS into the tooltip CSS, and would allow your users to continue using a white tooltip on a white webpage.





Best,





Chad



@ciarapeter / @mickey fyi on the last post as suggested enhancement



Moving to PX Ideas for better tracking, and to allow others to vote for this request if they like!

Terms & ConditionsCookie settings