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 }
.apt-guide-arrow-top::after {
border-color: blue }
+5Lila Krutel, Dir. Global Education Services
+2thanks Michael, appreciate your response.
@chad, let us know if this helps.
@dileepnalla could you please provide few more insights on this, as needed?
@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
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
+1Hi @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
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
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
+5Moving to PX Ideas for better tracking, and to allow others to vote for this request if they like!
Sign up
If you ever had a profile with us, there's no need to create another one.
Don't worry if your email address has since changed, or you can't remember your login, just let us know at community@gainsight.com and we'll help you get started from where you left.
Else, please continue with the registration below.
Welcome to the Gainsight Community
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.