Topic: mdb-select is missing tooltip
Arkadiusz Idzikowski staff answered 4 years ago
You can add label with html tag and use mdbTooltip
directive on it:
<div class="row">
<div class="col-md-6">
<div class="md-form">
<mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
<label mdbTooltip="Select label tooltip">Example label</label>
</div>
</div>
</div>
itay pro commented 4 years ago
I know but it is still missing. And if the select has no value, the label is missing
Arkadiusz Idzikowski staff commented 4 years ago
That's because label is hidden behind select input when it's not active. You could change that by modifying label z-index styles, but please note that it will affect input functionality (you won't be able to open select dropdown by clicking on inactive label).
.md-form mdb-select + label {
z-index: 900;
}
itay pro commented 4 years ago
The problem is that if there is no value (value is undefined), even if the label is marked with class="active"
, once rendered, the class is cleared.
Adding it manually in dev tools, does lift the label to its location.
Why is the class cleared ?
<div class="md-form">
<mdb-select formControlName="start" id="start" [options]="periods" [visibleOptions]="10" [disabled]="!show"></mdb-select>
<label for="start" class="active" mdbTooltip="this is a tip">start ?</label>
</div>
Arkadiusz Idzikowski staff commented 4 years ago
It is expected behavior. The active
class will be automatically removed if there is no selected option/placeholder.
In this case you can add placeholder if there is no default value.
itay pro commented 4 years ago
It should not be the expected behavior because the label, not the place holder, is missing
Arkadiusz Idzikowski staff commented 4 years ago
I'm not sure if I understand the problem correctly.
If the components detects that there is no selected value/placeholder it remove active class from the label. This is expected behavior and it doesn't matter whether the active class was added automatically or manually.
You should use labels and placeholders to add description. Using additional tooltip is not common use case for this component, but it's still possible with the workaround I provided in the answer.
itay pro commented 4 years ago
Now, the issue is not the tooltip.
When the value is missing, the label also doesn't appear.
Check this screenshot: https://imgur.com/a/W0ow1DW
Arkadiusz Idzikowski staff commented 4 years ago
In this case it would be better to move the discussion to another ticket to avoid confusion. Please start a new thread and add some more information about the problem and reproduction steps (you can also consider updating the original question in this thread with new information if you think that this issues are related).
I just tried to reproduce this problem on different select configurations but without success. If you use any custom styles please include them as well in your new post.
itay pro commented 4 years ago
I started a new question https://mdbootstrap.com/support/angular/label-is-hidden-on-mdb-select-without-value/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.8.2
- Device: NA
- Browser: NA
- OS: NA
- Provided sample code: Yes
- Provided link: No
itay pro commented 4 years ago
https://mdbootstrap.com/docs/angular/forms/select/