Adding tool tips on hover in knowledge base articles

Answered


Posted Oct 10, 2018

Is there a way to add a tool tip when a customer hovers over a particular word, phrase or image in a knowledge base article? 

Something like this...

Thanks!


0

12

12 comments

      1263213732509 the code you shared - does it go directly into the guide code or into the style.CSS? I tried to add the example you shared to a guide just to see how it worked and when I preview/publish I don't see anything at all (it just looks like an extra space in the guide) and in the edit version it looks like the picture below. Apologies I don't have any HTML experience so I might just be missing something obvious…. 1263169208350 perhaps you can weigh in here?

      0


      Is it possible to add tool tip for  Ticket Fields  ?   if possible please share the coding

       

      Thanks,

      Anita

      0


      Yes Sean! I'm trying to add a tooltip in the Zendesk like this one:

      I did in the easy way, because just add it in the html code on the live code webpage.

      But the code of Home_page.hbs is like this:

       

      So as {{#if}} statement does not allow me to compare two values like:

      {{#if href == '/hc/en-us/categories/360001117812-Cow-Traffic'}}

      <span class="tooltip">Tooltip_text</span>

       

      to make it happen, so I do not know how to compare this two values to point when the user pass over the name or box I want to add the tooltip.

      Thanks!

      0


      Ah, you're trying to do this within a table, I think? If so your table will have <div> elements and you'll need to nest the tooltip code properly within the table, if that makes sense?

      0


      Hello Sean!

      I have tested your code but this makes to appear a tooltip on each box of the Home_page a tooltip, I mean on each category, meanwhile I want to to add only for Category 1 the tooltip1, and 2 with 2...

      I did this before with some help but now can't remember how to use the "if" to show only on one box Category.

      Thanks!

      0


      Carlos and everyone, 

      We had to do this through simple HTML but it's easy enough to do. Here's how:

      <span class='tooltip'><span class='tooltip-content'>tooltip_content_here</span>keyword_for_tool_tip</span>

      Example: <span class="tooltip"><span class="tooltip-content">Sets the size of the font, in pixels, for the text overlaying the video.</span>48px</span>

      0


      Sorry but links are not working anymore.

      do you have any other to explain this?

      Right now my problem is that I can't use IF statement to select which link should have which tooltip.

      thanks!

      Br

      /Carlos

      0


      Hi Miriam -

      Apologies, some things have moved around. Here's the correct link: https://zendeskgarden.github.io/react-components/tooltips/

      0


      @ Nicole Community Manager. your link

      https://garden.zendesk.com/react-components/tooltips/

       

      404 PAGE NOT FOUND

      Nothing to see here

      You won’t find anything growing on this page. Head back to the homepage to see more of Garden.
       

      0


      Hi Sean - 

      Here's the updated tooltips stuff:  https://garden.zendesk.com/react-components/tooltips/

      0


      Sign in to leave a comment.

      Didn't find what you're looking for?

      New post