add tooltips to registry #5351

crocmons · 2024-10-08T14:23:33Z

This PR resolves this issue #5333 and adds tooltips to clarify the meaning of various categories (e.g., "Collector", "Application Integration", "Language", "License") in the component listing, improving user experience by providing contextual information.

Key Changes:

Added tooltips to category labels in the list group items (e.g., Language, License, Registry Type).
Tooltip descriptions provide brief explanations for what users can expect from components under these categories.
Ensures better understanding of the roles and usage of components, especially for new users or contributors.

Example:

Language: Tooltip describes what the programming language does for this component.
License: Tooltip provides clarification on the type of license.
Registry Type: Tooltip explains whether the component is a "Collector", "Application Integration", etc.

Testing:

Verified the tooltips render correctly on hover.
Tested responsiveness and verified the new tooltips work across different screen sizes.

Demo:

linux-foundation-easycla · 2024-10-08T14:23:38Z

The committers listed above are authorized under a signed CLA.

✅ login: crocmons / name: Ilma Salsabil (10dccb2, f6073b9, 685211f, 94efbd3, fe85022, d430f02, 04dd819, af60cf1, 17e7574, 2d6b720, 50cfcf4, d344df9, 7e91364)

svrnm · 2024-10-09T08:46:29Z

looks good, thank you!

There are a lot of changes to the formatting in the file that are unrelated to your work. Can you make sure that you only have changes relevant to your work. Probably your editor applied some formatting, you might be able to revert that by running npm run fix:format locally, commit the changes and push them here once again

crocmons · 2024-10-09T11:28:21Z

looks good, thank you!

There are a lot of changes to the formatting in the file that are unrelated to your work. Can you make sure that you only have changes relevant to your work. Probably your editor applied some formatting, you might be able to revert that by running npm run fix:format locally, commit the changes and push them here once again

sure I will do it

svrnm · 2024-10-10T06:46:56Z

@crocmons there is still some formatting applied that shouldn't be there, has the local fixing worked? I also see that you have some unrelated changes for a git submodule, you can remove that by running npm run sync and push the changes.

Maybe give npm run fix:all a try, that will run a set of multiple tools to clean up your PR. If this does not bring change we need to revert those changes manually, I can help with that if needed, but let's try the automatic things first.

crocmons · 2024-10-10T07:19:25Z

Hello @svrnm I have fixed the formatting manually..can you now take a look at it

svrnm

Thanks, looks good so far! See my inline comments for more improvements.

layouts/partials/ecosystem/registry/entry.html

content-modules/semantic-conventions

layouts/partials/ecosystem/registry/entry.html

crocmons · 2024-11-04T16:45:39Z

@svrnm @chalin sure I'll fix this soon ..thanks @chalin for figuring out this issue..

…telemetry.io into feat/tooltip-#5333

This reverts commit f6073b9.

crocmons · 2024-11-05T20:50:17Z

Hi @chalin, I hope you're doing well. I fixed all the changes that you mentioned to resolve it. Hopefully, now it works as expected, but I appreciate your guidance. Please let me know if you find any further issues, and I'll fix them soon.

svrnm

I would like to work towards taking that PR in.

Can you make sure that there are no changes left that are unrelated to this PR (especially formating of the entry.html file), because this makes it really hard to spot all the changes.

svrnm · 2024-11-11T15:41:20Z

content/en/ecosystem/registry/help.md

Having a help page is a good idea, but something that should be part of a dedicated PR, can you remove this from this PR for now? If you like to help with that feel free to raise another PR adding this page.

svrnm · 2024-11-11T15:47:37Z

layouts/partials/ecosystem/registry/entry.html

-    {{ 
-        $remoteRegistries := dict
-            "npm" (dict 
-                "urlPattern" "https://npmjs.com/package/%s"
-                "installTemplate" "ecosystem/registry/quickinstall/default.md"
-                "installLine" "npm install %s"
-                "icon" "fab fa-npm")
-            "packagist" (dict
-                "urlPattern" "https://packagist.org/packages/%s"
-                "installLine" "composer require %s"
-                "installTemplate" "ecosystem/registry/quickinstall/default.md"
-                "icon" "fa-solid fa-box-open")
-            "gems" (dict
-                "urlPattern" "https://rubygems.org/gems/%s"
-                "installLine" "gem install %s"
-                "installTemplate" "ecosystem/registry/quickinstall/default.md"
-                "icon" "fa-solid fa-gem")
-            "go" (dict
-                "urlPattern" "https://pkg.go.dev/%s"
-                "installLine" "go get %s"
-                "installTemplate" "ecosystem/registry/quickinstall/default.md"
-                "icon" "fa-brands fa-golang")
-            "go-collector" (dict
-                "urlPattern" "https://pkg.go.dev/%s"
-                "installTemplate" "ecosystem/registry/quickinstall/collector.md"
-                "icon" "fa-solid fa-box-open")
-            "nuget" (dict
-                "urlPattern" "https://www.nuget.org/packages/%s"
-                "installLine" "dotnet add package %s"
-                "installTemplate" "ecosystem/registry/quickinstall/default.md"
-                "icon" "fa-solid fa-box-open")
-            "pip" (dict
-                "urlPattern" "https://pypi.org/project/%s"
-                "installLine" "pip install %s"
-                "installTemplate" "ecosystem/registry/quickinstall/default.md"
-                "icon" "fa-brands fa-python")
-            "hex" (dict
-                "urlPattern" "https://hex.pm/packages/%s"
-                "installTemplate" "ecosystem/registry/quickinstall/hex.md"
-                "icon" "fa-brands fa-erlang")
-            "crates" (dict
-                "urlPattern" "https://crates.io/crates/%s"
-                "installLine" "cargo add %s"
-                "installTemplate" "ecosystem/registry/quickinstall/default.md"
-                "icon" "fab fa-rust")
-    -}}
+{{
+$remoteRegistries := dict
+"npm" (dict
+"urlPattern" "https://npmjs.com/package/%s"
+"installTemplate" "ecosystem/registry/quickinstall/default.md"
+"installLine" "npm install %s"
+"icon" "fab fa-npm")
+"packagist" (dict
+"urlPattern" "https://packagist.org/packages/%s"
+"installLine" "composer require %s"
+"installTemplate" "ecosystem/registry/quickinstall/default.md"
+"icon" "fa-solid fa-box-open")
+"gems" (dict
+"urlPattern" "https://rubygems.org/gems/%s"
+"installLine" "gem install %s"
+"installTemplate" "ecosystem/registry/quickinstall/default.md"
+"icon" "fa-solid fa-gem")
+"go" (dict
+"urlPattern" "https://pkg.go.dev/%s"
+"installLine" "go get %s"
+"installTemplate" "ecosystem/registry/quickinstall/default.md"
+"icon" "fa-brands fa-golang")
+"go-collector" (dict
+"urlPattern" "https://pkg.go.dev/%s"
+"installTemplate" "ecosystem/registry/quickinstall/collector.md"
+"icon" "fa-solid fa-box-open")
+"nuget" (dict
+"urlPattern" "https://www.nuget.org/packages/%s"
+"installLine" "dotnet add package %s"
+"installTemplate" "ecosystem/registry/quickinstall/default.md"
+"icon" "fa-solid fa-box-open")
+"pip" (dict
+"urlPattern" "https://pypi.org/project/%s"
+"installLine" "pip install %s"
+"installTemplate" "ecosystem/registry/quickinstall/default.md"
+"icon" "fa-brands fa-python")
+"hex" (dict
+"urlPattern" "https://hex.pm/packages/%s"
+"installTemplate" "ecosystem/registry/quickinstall/hex.md"
+"icon" "fa-brands fa-erlang")
+"crates" (dict
+"urlPattern" "https://crates.io/crates/%s"
+"installLine" "cargo add %s"
+"installTemplate" "ecosystem/registry/quickinstall/default.md"
+"icon" "fab fa-rust")
+-}}


please revert this and other formatting changes

svrnm · 2024-11-11T15:48:14Z

layouts/partials/ecosystem/registry/entry.html

@@ -105,7 +106,7 @@ <h4 class="card-title mb-0 d-flex flex-row">
            <span class="badge rounded-pill text-bg-secondary text-white" title="This package is used in the OpenTelemetry Demo!"><i class="fa-solid fa-shapes"></i> OTel Demo</span>
            {{ end -}}
            {{ if $deprecated -}}
-            <span class="badge rounded-pill text-bg-danger text-white" title=""><i class="fa-solid fa-ban"></i> deprecated</span>
+            <span class="badge rounded-pill text-bg-danger text-white" title="This package is deprecated. It is recommended to no longer use it and to look for a replacement if it is in use."><i class="fa-solid fa-ban"></i> deprecated</span>


is it possible to add the data-bs-toogle as well?

svrnm · 2024-11-11T15:49:13Z

layouts/partials/ecosystem/registry/entry.html

+                {{ if eq (replace (lower .) " " "") "collector" }}
+                    <small data-bs-toggle="tooltip" 
+                        title="Collector: This is an extension for the OpenTelemetry Collector.">
+                        <a href="https://opentelemetry.io/docs/collector/" target="_blank" class="text-muted">Collector</a>


Suggested change

<a href="https://opentelemetry.io/docs/collector/" target="_blank" class="text-muted">Collector</a>

Collector

skip the link for now

svrnm · 2024-11-11T15:50:04Z

layouts/partials/ecosystem/registry/entry.html

+                    </small>
+                {{ else }}
+                    <small data-bs-toggle="tooltip" title="This indicates the programming language used.">
+                        {{ . }}


Suggested change

{{ . }}

Language

svrnm · 2024-11-11T15:50:16Z

layouts/partials/ecosystem/registry/entry.html

+                <small data-bs-toggle="tooltip" title="This refers to the type of registry component. For more details, visit our Help page.">
+                    <a href="https://github.com/open-telemetry/opentelemetry.io/tree/main/content/en/ecosystem/registry/help.md" target="_blank" class="text-muted">Component</a>
+                </small>


let's skip this for now

svrnm · 2024-11-11T15:51:26Z

layouts/partials/ecosystem/registry/entry.html

+                {{ if eq . "Commercial" }}
+                <small data-bs-toggle="tooltip" 
+                    title="Commercial License: This project has a commercial license. End users may need to check with the provider for specific usage rights and restrictions. For more details on common license types, visit the Open Source Initiative at opensource.org/licenses.">
+                    <a href="https://opensource.org/licenses" target="_blank" class="text-muted">License</a>
+                </small>
+            {{ else }}
+                <small data-bs-toggle="tooltip" 
+                    title="Open-Source License: This project is distributed under an open-source license. End users are encouraged to review the license terms to ensure compatibility with their usage. Visit the Open Source Initiative for more details.">
+                    <a href="https://opensource.org/licenses" target="_blank" class="text-muted">License</a>
+                </small>
+            {{ end }}


Suggested change

{{ if eq . "Commercial" }}

<small data-bs-toggle="tooltip"

title="Commercial License: This project has a commercial license. End users may need to check with the provider for specific usage rights and restrictions. For more details on common license types, visit the Open Source Initiative at opensource.org/licenses.">

<a href="https://opensource.org/licenses" target="_blank" class="text-muted">License</a>



{{ else }}

<small data-bs-toggle="tooltip"

title="Open-Source License: This project is distributed under an open-source license. End users are encouraged to review the license terms to ensure compatibility with their usage. Visit the Open Source Initiative for more details.">

<a href="https://opensource.org/licenses" target="_blank" class="text-muted">License</a>



{{ end }}

{{ if eq . "Commercial" }}



License



{{ else }}

<small data-bs-toggle="tooltip"

title="Open-Source License: This project is distributed under an open-source license. End users are encouraged to review the license terms to ensure compatibility with their usage.">

License



{{ end }}

Let's remove the links for now, we can improve on that in a later iteration

svrnm · 2024-12-11T14:06:06Z

thanks for working on this during the outreachy application phase. This PR is stalled for a month now, so I will close it now. We also need to rethink if and how we want to have tool tips in the registry.

crocmons requested a review from a team as a code owner October 8, 2024 14:23

svrnm changed the title ~~Enhance UX with Tooltips for Category Descriptions~~ [Outreachy] Enhance UX with Tooltips for Category Descriptions Oct 9, 2024

svrnm added enhancement New feature or request registry outreachy Issues for Outreachy Participants labels Oct 9, 2024

opentelemetrybot requested review from a team October 9, 2024 13:53

svrnm requested changes Oct 10, 2024

View reviewed changes

opentelemetrybot requested a review from a team October 11, 2024 18:06

github-actions bot added sig:collector blog sig:cpp sig:dotnet sig:go sig:erlang sig:java sig:javascript sig:php sig:python sig:rust sig:ruby sig:swift sig:operator sig:demo sig:enduser labels Oct 24, 2024

svrnm removed sig:demo sig:enduser sig:spec sig:security sig:helm lang:zh lang:ja lang:pt lang:es labels Nov 4, 2024

Merge branch 'main' into feat/tooltip-#5333

10dccb2

crocmons added 3 commits November 6, 2024 01:49

fixed native issue

d430f02

Merge branch 'feat/tooltip-#5333' of https://github.com/crocmons/open…

04dd819

…telemetry.io into feat/tooltip-#5333

fixed native issue

fe85022

opentelemetrybot requested review from a team November 5, 2024 19:51

crocmons added 2 commits November 6, 2024 01:59

fixed native issue

f6073b9

Revert "fixed native issue"

7e91364

This reverts commit f6073b9.

crocmons force-pushed the feat/tooltip-#5333 branch from 6812122 to 7e91364 Compare November 5, 2024 20:37

Merge branch 'main' into feat/tooltip-#5333

2d6b720

crocmons requested a review from chalin November 5, 2024 20:46

crocmons and others added 2 commits November 6, 2024 03:11

update new chnges

17e7574

Merge branch 'main' into feat/tooltip-#5333

d344df9

svrnm requested changes Nov 11, 2024

View reviewed changes

svrnm changed the title ~~[Outreachy] Enhance UX with Tooltips for Category Descriptions~~ add tooltips to registry Nov 11, 2024

svrnm added ux and removed outreachy Issues for Outreachy Participants labels Nov 11, 2024

svrnm closed this Dec 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add tooltips to registry #5351

add tooltips to registry #5351

crocmons commented Oct 8, 2024 •

edited

Loading

linux-foundation-easycla bot commented Oct 8, 2024 •

edited

Loading

svrnm commented Oct 9, 2024

crocmons commented Oct 9, 2024

svrnm commented Oct 10, 2024

crocmons commented Oct 10, 2024

svrnm left a comment

crocmons commented Nov 4, 2024

crocmons commented Nov 5, 2024

svrnm left a comment

svrnm Nov 11, 2024

crocmons Nov 11, 2024

svrnm Nov 11, 2024

crocmons Nov 11, 2024

svrnm Nov 11, 2024

svrnm Nov 11, 2024

crocmons Nov 11, 2024

svrnm Nov 11, 2024

svrnm Nov 11, 2024

svrnm Nov 11, 2024

svrnm commented Dec 11, 2024

	<a href="https://opentelemetry.io/docs/collector/" target="_blank" class="text-muted">Collector</a>
	Collector

add tooltips to registry #5351

add tooltips to registry #5351

Conversation

crocmons commented Oct 8, 2024 • edited Loading

Key Changes:

Example:

Testing:

Demo:

linux-foundation-easycla bot commented Oct 8, 2024 • edited Loading

svrnm commented Oct 9, 2024

crocmons commented Oct 9, 2024

svrnm commented Oct 10, 2024

crocmons commented Oct 10, 2024

svrnm left a comment

Choose a reason for hiding this comment

crocmons commented Nov 4, 2024

crocmons commented Nov 5, 2024

svrnm left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

svrnm commented Dec 11, 2024

crocmons commented Oct 8, 2024 •

edited

Loading

linux-foundation-easycla bot commented Oct 8, 2024 •

edited

Loading