Skip to main content
caudet
Contributor ⭐️⭐️⭐️
Jul 12, 2019 10:19 PM UTC

Engagements: Editing tooltip pointer CSS

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 ⭐️⭐️⭐️
    Jul 15, 2019 2:27 PM UTC
    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 }



    Translate
      lila_meyer
      lila_meyer
      Gainsight Employee ⭐️⭐️⭐️
      Jul 15, 2019 3:40 PM UTC
      @michael_sweeney This sounds very similar to another post you shared. Do you have any suggestions?

      Translate
      Lila Krutel, Dir. Global Education Services
        harshibanka
        harshibanka
        Gainsight Employee ⭐️⭐️
        Jul 15, 2019 6:28 PM UTC
        thanks Michael, appreciate your response.

        @chad, let us know if this helps.

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

        Translate
        Harshi (pronounced like the Hershey's chocolate); PLG and Digital CS Evangelist
        caudetAuthor
        Contributor ⭐️⭐️⭐️
        Jul 15, 2019 6:44 PM UTC
        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

        Translate
        dileepnalla
        dileepnalla
        Gainsight Employee ⭐️⭐️
        Jul 17, 2019 6:26 PM UTC
        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

        Translate
        Thanks, Dileep Nalla
        caudetAuthor
        Contributor ⭐️⭐️⭐️
        Jul 17, 2019 7:43 PM UTC
        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

        Translate
          harshibanka
          harshibanka
          Gainsight Employee ⭐️⭐️
          Jul 17, 2019 9:40 PM UTC
          @ciarapeter / @mickey fyi on the last post as suggested enhancement

          Translate
          Harshi (pronounced like the Hershey's chocolate); PLG and Digital CS Evangelist
          lila_meyer
          lila_meyer
          Gainsight Employee ⭐️⭐️⭐️
          Dec 18, 2019 10:56 PM UTC

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

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