Skip to main content
C
caudet
Contributor ⭐️⭐️⭐️
July 12, 2019

Engagements: Editing tooltip pointer CSS

  • July 12, 2019
  • 8 replies
  • 310 views
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

    8 replies

    mikewohlwend
    mikewohlwend
    Contributor ⭐️⭐️⭐️
    July 15, 2019
    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 }



      lila_meyer
      lila_meyer
      Gainsight Employee ⭐️⭐️⭐️
      July 15, 2019
      @michael_sweeney This sounds very similar to another post you shared. Do you have any suggestions?

      Lila Krutel, Dir. Global Education Services
        harshibanka
        harshibanka
        Gainsight Employee ⭐️⭐️
        July 15, 2019
        thanks Michael, appreciate your response.

        @chad, let us know if this helps.

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

        Harshi (pronounced like the Hershey's chocolate); PLG and Digital CS Evangelist
        C
        caudetAuthor
        Contributor ⭐️⭐️⭐️
        July 15, 2019
        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

        dileepnalla
        dileepnalla
        Gainsight Employee ⭐️⭐️
        July 17, 2019
        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

        Thanks, Dileep Nalla
        C
        caudetAuthor
        Contributor ⭐️⭐️⭐️
        July 17, 2019
        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

          harshibanka
          harshibanka
          Gainsight Employee ⭐️⭐️
          July 17, 2019
          @ciarapeter / @mickey fyi on the last post as suggested enhancement

          Harshi (pronounced like the Hershey's chocolate); PLG and Digital CS Evangelist
          lila_meyer
          lila_meyer
          Gainsight Employee ⭐️⭐️⭐️
          December 18, 2019

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

          Lila Krutel, Dir. Global Education Services
          Terms & ConditionsAccessibility statement