Recent searches
No recent searches
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
Nicole Saunders
Hey Jolshock -
I hear it can be done, but requires some custom coding. You can check out the Zendesk Garden for the elements - I found this for Tooltips.
0
Sean Huck
Bumping this thread as I have need of this functionality. Any news? That article for tooltips has been deprecated.
0
Nicole Saunders
Hi Sean -
Here's the updated tooltips stuff: https://garden.zendesk.com/react-components/tooltips/
0
Miriam LOCKSHIN
@ Nicole Community Manager. your link
https://garden.zendesk.com/react-components/tooltips/
Nothing to see here
0
Nicole Saunders
Hi Miriam -
Apologies, some things have moved around. Here's the correct link: https://zendeskgarden.github.io/react-components/tooltips/
0
Carlos Delgado
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
Sean Huck
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
Carlos Delgado
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
Sean Huck
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
Carlos Delgado
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
Anita Rajkumar
Is it possible to add tool tip for Ticket Fields ? if possible please share the coding
Thanks,
Anita
0
Colleen Huck
Sean Huck 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…. Trapta Singh perhaps you can weigh in here?
0