How to create different tooltip for collection items

Design help General
1

Hello all,

I need a solution for creating a tooltip for collection items. I have created a tooltip using attributes on collections multi images hover but all the multi images take the same tooltip name and also the class so is there any solution for creating a separate tooltip name for each collection item multi images???

Here is the gif of my collection multi images hover - T6ydzsk5rY
aws

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

hi @dharmikdesai It is standard behaviour as you adding fixed value for you title attribute instead dynamic. I really do not know how to work with these predefined fields in WF as I didn’t find any good documentation about these fields. But I may have overlooked some pages where these documentation are. If anyone knows please let me know.
Anyway you can achieve it programatically with JS.

Here is how to:

  1. give image an alt text (manually or from option on image setting).
  2. use this code to take value of alt create attribute title and assign value of alt to title
    You can place code to before <body> section on page, or if you would like to have this behaviour on each page of your site you can place it into custom code section of site setting.
<script>

const images = Array.from(document.querySelectorAll("img"));
images.forEach((image) => {
  const altText = image.getAttribute("alt");
  image.setAttribute("title", altText);
});
</script>
1 Like
3

It helped thanks a lot for your time. I marked this as solved @Stan

2 Likes
4

Can you provide a UI design for the tooltip? @Stan

5

HI @dharmikdesai please keep forum tidy and do not ask questions not related to request. In this case “How to create different tooltip for collection items”

Anyway I am not aware of any way how to design title attribute displayed as balloon text. If you would like to create a tooltip you can find on internet many ways how to when you search for keywords “create tooltip css”

  1. example link
  2. something to read
6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.