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>

[niccokunzmann]

The span, div tag are confusing me.

Hm. I do not know how that expresses itself. I think, for confusion, one has an inconsistent model with at least two different conflicting strains of thought. Could you write down all of them, so I can see what is there? Currently, I could not phrase it better into the uncertain than the tutorial.

[joshhazelhurst123]

Ah Yes you have read my mind. There are two different conflicting strains of thought. I am using w3school online tutorials and I am looking at your example about implementing the tooltip on the regextutorial site. On the w3schools example of tooltip, they use a span and div tag to implement the tooltip, with CSS defining the tooltip.
Then trying to apply what I have learnt from w3schools here, I don't want to add a div and span tag into tutorial.html but would rather use the id or the class selector, not only the tag selector like "p" or "a". As you mentioned earlier.

In summary, can I implement the tooltip from w3schools without the div and span tags. Hopefully you understand me. Thank you.

[niccokunzmann]

can I implement the tooltip from w3schools without the div and span tags

I think, you can do something like this:

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

span and div are only slightly different. Using CSS, you can convert one into the other. a span differs form div in values of some attributes.
For CSS, span or div or jahdkjahsdkhasd can be used to style <span>, <div> and <jahdkjahsdkhasd> elements from html. Hm, so I think, you will need to edit some of the code and add new tags for the new structure but you can choose whether you like to have span or div or anything else.

[joshhazelhurst123]

I have a tooltip connected as shown above. Not sure why the progress bar has halfway disappeared. I updated tutorial.html with the following code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<script>

$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({title: "Hooray", placement: "bottom"});
});
</script>

And I put in the a tags
data-toggle="tooltip" title="Hooray!"

[niccokunzmann]

Can you, instead of sending the code in the issue, create a Pull Request with the code? This way, I can exactly see what is going on and we can discuss it line by line. This is the workflow we usually take.

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> I will not add these libraries and we can work later around them. It is not necessary to include megabytes of code and break offline usability.

…

On 2/27/19 6:48 AM, Josh wrote: image <https://user-images.githubusercontent.com/30138699/53468629-e2380f00-3abf-11e9-8a82-1bce1f1c5e6a.png> I have a tooltip connected as shown above. Not sure why the progress bar has halfway disappeared. I updated tutorial.html with the following code. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> |<script> | $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip({title: "Hooray", placement: "bottom"}); }); </script> And I put in the a tags data-toggle="tooltip" title="Hooray!" — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#11 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAieIBNRoOoTblCh-UUpPp2OxQ39DCFdks5vRhw_gaJpZM4M-TiB>.

[joshhazelhurst123]

pull request. #119
Creating a tooltip then merging it with the progress bar was unsuccessful for me. I then added in the bootstrap libraries for a tooltip in order to produce the tooltip as shown above. I understand that you wouldn't want them as they would include megabytes to the website.