Flux progress wrapped inside `flux:tooltip` not showing the progress bar
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 72/100
Research direction
Start by reviewing the tooltip change in pull request #2746, then inspect the tooltip and progress component styling. Reproduce the issue with the provided Blade snippet, with and without the tooltip wrapper. Done means the progress bar remains visible when wrapped in flux:tooltip without needing the w-full workaround.
Written by the indexing model from the issue text.
Description
Flux version
v2.20
Livewire version
v4.47
Tailwind version
v4.3.3
Browser and Operating System
Chrome on Windows
What is the problem?
When using flux:tooltip as a wrapper for flux:progress, the progress bar not showing.
The regression comes from https://github.com/livewire/flux/pull/2746. It set the display to inline-flex where flux:progress as a child is block.
Blaze has nothing to do with this as it has same result whether Blaze enabled/disabled
Workaround
Add class w-full to flux:tooltip
Code snippets to replicate the problem
<flux:tooltip content="{{ $this->currentProgress . ' / ' . $this->pointsToNextLevel }}">
<flux:progress :max="$this->pointsToNextLevel"
:value="$this->currentProgress"
class="h-3"
color="green" />
</flux:tooltip>
Screenshots/ screen recordings of the problem
Without flux:tooltip
With flux:tooltip
How do you expect it to work?
It should show the progress bar as expected
Please confirm (incomplete submissions will not be addressed)
- I have provided easy and step-by-step instructions to reproduce the bug.
- I have provided code samples as text and NOT images.
- I understand my bug report will be closed if I haven't met the criteria above.
- Dominant language
- Blade
- Stars
- 979
- Forks
- 110
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 7
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- No contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from livewire/flux
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
-
Difficulty 1/5 Under an hour Newbie friendliness 92/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Similar issues
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 83/100
awslabs/visual-asset-management-system#1278 ·
Maintainers usually reply within 1 day
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
VoteIT/voteit_frontend#446 ·
-
status: waiting for maintainer
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
mui/material-ui#49751 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
fourzkw/dsh-drawai#39 ·
Maintainers usually reply within 1 day
-
NCMEC
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
Maintainers usually reply within 3 days