Tooltip and Clickable link, on 2 different icons« Back to Questions List
Hello to the Team, Each object is an icon-text pair. Desired effect: Hovering over the icon lights up the text, and clicking on the icon opens a specific URL Method used: "css|style" for the hover part, "and class|href" for the link Constraints: The 2 icons are physically close to each other, meaning the parents (of the icon-text pairs) naturally overlap. Questions: 1- For the hover to work, the icon and the text css, must both be in the same parent object. Is it right to assume we need to get Figma+ExportKit to generate this type of code, right? How can we achieve that without manually editing the Html afterwards? /* to display the text only when the icon is hovered over */ .obj > .o01_i:hover ~ .o01_t { ... display:flex; } .obj > .o01_t { ... display:none; } 2- "class|href" must be on a higher layer than "css|style". Is that right? It seems that the same URL will be assigned to both icons. What I have managed to do so far (Part I): The Hover works for each icon (but without the URL link) Figma (before I manually edit the code):
and
What I have managed to so far (Part II): With this code, the Hover and URL link works, but for one Icon only. For the 2nd Icon, the URL is that of the 1st icon, and the Hover does not work.
(Together with the same Tooltip2 as above) How can assemble all of this together? Thank you for your help  Added April 13, 2023 6:25 am |
Do you have the right answer? If you do other users will benefit from your contribution, share your knowledge with the community!
when you create css styles, unless you have an external style sheet - you will need to add your custom styles to your ${css|styles} folder before using them in your project. thats what "add them to global styles first" means.  Answered On April 14, 2023 12:29 pm # |
if you are looking for something complex or outside of the parent / child relationship, then you will need to use ${code} or ${raw} tag to add custom css. checkout the responsive nav menu video for an example Answered On April 14, 2023 12:27 pm # |
I don't understand you will need a global style inside your ${css|styles} Also, my question included 3 images which did not appear after it was submitted. It did clarify the context a lot.
Without the possibility of uploading images, I'm afraid I'm still in the dark  Answered On April 14, 2023 7:10 am # |
Thank you for your Answer.
How do I get this /* to display the text only when the icon is hovered over */ .obj > .o01_i:hover ~ .o01_t { ... display:flex; } .obj > .o01_t { ... display:none; } Answered On April 13, 2023 12:33 pm # |
Your answer is very close! 1. ${css|styles} is correct to use but you will need a global style inside your ${css|styles} then an individual style for the element ${css|style:hovertext iconglow} videos: css rollover hover responsive nav menu 2. ${class|href: } is not valid. class tag will create an html object based on properties of the tag, in your case you just asked it to create <href />. You will need to change the tag to work as an anchor eg: ${class|a: title="My Title" href="https://google.com" style="hovertext iconglow"} this will create the object you expect then you will need to add the correct styles based on child/parent nesting (see videos above)Answered On April 13, 2023 12:22 pm # |
Looking for another answer? View other questions in or get premium support for guaranteed results.
Share Your Knowledge!
Contribute to the community and help other users to benefit from your answer with experience and knowledge.
