Add tooltip to multi select options


Topic: Add tooltip to multi select options

Saban pro premium asked 1 months ago

Expected behavior A tooltip should apear on each option in the muli selct

Actual behavior There is ot tooltip

Resources (screenshots, code snippets etc.)


Konrad Stępień staff answered 1 months ago

Hi @Saban,

I did this example:enter image description here

Code:

HTML

<div class="col-md-2 mx-5">
  <div class="md-form">
    <mdb-select-2 [multiple]="true" placeholder="Choose your option" label="Example label">
      <mdb-select-all-option>Select all</mdb-select-all-option>
      <span *ngFor="let option of options" [mdbTooltip]="option.tooltip" placement="right">
        <mdb-select-option [value]="option.value">
          {{ option.label }}
        </mdb-select-option>
      </span>
    </mdb-select-2>
  </div>
</div>

TS

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  options = [
    { value: '1', label: 'Option 1', tooltip: 'Tooltip 1' },
    { value: '2', label: 'Option 2', tooltip: 'Tooltip 2' },
    { value: '3', label: 'Option 3', tooltip: 'Tooltip 3' },
  ];
}

styles.scss

.mdb-select-custom-content {
  padding: 0 !important;
}

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 9.2.0
  • Device: browther
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No