text for progess

[niccokunzmann]

When the mouse hovers above the bubbles on the progress bar, the title of the linked page should be displayed.

[weerox]

Do you want the built-in hover title design, or should we create something of our own?
I like the GitHub implementation (to view this, hover the "Owner" tag in a comment).

[niccokunzmann]

Looks good. As you like.

I think, the more we do although it is fun, the less new people can do and maybe the less contributions we get. How did you decide to contribute? Was it because you fixed a small mistake? If we also find those small issues, we can get more people involved.

[weerox]

Yeah, you're right.

[joshhazelhurst123]

Hi, I am interested in contributing to this project and learning as much as possible. I like the github implementation as mentioned by @weerox. Is there a github api to search through or code for the tag?

[niccokunzmann]

In Firefox (Chrome, Opera and Edge, too) You can inspect websites and tags. You can right-click on the page, click on Inspect Element and then have a look at source code and styling.

It seems like it uses CSS animations to fade in after 0.4 seconds:

[niccokunzmann]

And you can view the animation and the styling by clicking on the file.

I do not know if I could answer your question in any way.

[joshhazelhurst123]

hmmm I can't get edit the progress bar, I look at progress.css and tutorial.html to make the changes that I wanted to make on the progress bar but I can't figure out how it works. Thanks.

[niccokunzmann]

@joshhazelhurst123 Hi, did you set up jekyll locally?

The code for the progress bar starts here:

regex-tutorial/_layouts/tutorial.html

Line 70 in 058c263

<div class="progress">

and this is the link for which the hover effect can be changed:

regex-tutorial/_layouts/tutorial.html

Line 96 in 058c263

<a id="page-{{ p.path }}" class="step {% if page == p %}current{% endif %}" href="..{{ p.url }}">{%- if page == p %}{{ step_index }}{% endif %}</a>

Could I answer some questions? Do you have new questions? Which changes did you try and make?

[joshhazelhurst123]

Yes jekyll works, you have helped me a lot!

Thanks for your comment and reply. I managed to put a basic hover tag in tutorial.html which hovers over all paragraphs, and a href links.
p:hover, a:hover {
background-color: yellow;
}
I would like to make the changes as requested in this issue request, I want the tooltip to appear when hovering over the link in the progress bar.
I think adding the tooltip-appear in tutorial.html under <style> tab might work. Or in progress.css but the next part I am not sure about.
How can I make the tooltip appear when hovering over the link in the progress bar and not over all the links?

Thanks again.

[niccokunzmann]

I think, you may be able to use the id or the class selector, not only the tag selector like "p" or "a".
Maybe this clarifies the difference.

regex-tutorial/_layouts/tutorial.html

Line 96 in 058c263

<a id="page-{{ p.path }}" class="step {% if page == p %}current{% endif %}" href="..{{ p.url }}">{%- if page == p %}{{ step_index }}{% endif %}</a>

generates

<a id="page-de/03-03.html" class="step" href="../de/03-03.html"></a>

so you can use class and step.

[joshhazelhurst123]

Thanks, so I have working,
.step:hover{
background-color: yellow;
}
The next part is adding the tooltip on :hover
I am thinking,
.step:tooltip-appear{
aria-label="This user is a member of the CoderDojo Potsdam organization."
}
<></> closing on brackets below, (can't add them in, they get picked up as links)
div class="links"
a href="https://github.githubassets.com/app/node_modules/@primer/css/tooltips/tooltips.scss"a
How does that look to you? What am I missing? Thanks

[joshhazelhurst123]

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip
https://www.w3schools.com/css/css_tooltip.asp
are my resources I'm looking at. The span, div tag are confusing me.

[niccokunzmann]

You can make code comments by selecting the text and using the <> button above.

<a
    href="http://test.com">test</a>