mdb-select is missing tooltip

web
mobile

Topic: mdb-select is missing tooltip

itay pro asked 4 months ago

mdb-select has [label] but is missing mdbTooltip while <label> has it


Arkadiusz Idzikowski staff answered 4 months 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 months ago

I know but it is still missing. And if the select has no value, the label is missing


Arkadiusz Idzikowski staff commented 4 months 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 months 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 months 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 months ago

It should not be the expected behavior because the label, not the place holder, is missing


Arkadiusz Idzikowski staff commented 4 months 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 months 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 months 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 months ago

I started a new question https://mdbootstrap.com/support/angular/label-is-hidden-on-mdb-select-without-value/


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.8.2
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: No
Tags