tooltip for multiselect clear button when two multiselects or more are present

[Pavel]

Hello, 

I have two multiselect dropdowns and each have a tooltip attached to the clear button.

However the incorrect tooltip content displays after both have been opened.

I have attached a sample and a recording

Thank you.

Attachment: MultiTooltip_a7d60385.zip

[Pavel]

any updates?

[LeoLavanya Dhanaraj]

Hi Pavel,

Greetings from Syncfusion support.

Currently, we are validating your reported issue in the Blazor Tooltip component with the shared details and able to reproduce the reported issue at our end. We need some additional time to identify the exact root cause for this issue. We will update you with further details on Oct 07, 2022. We appreciate your patience.

Regards,

Leo Lavanya Dhanaraj

[Indhumathy Loganathan]

Hi Pavel,

Thanks for your patience.

We have validated your reported query in the shared sample. The reported issue occurs due to the same element set as the Target for both the MultiSelect component. So the recent updated Content value of the Tooltip appeared on both the Target elements. To overcome this issue, we suggest you set the data-title attribute to set proper content on the multiple targets. Check the below code snippet for changes.

[MultiOne.razor]

 

<SfTooltip @ref="TooltipObj1" ID="TooltipForMultiOne" Target=".e-clear-icon[data-title]"></SfTooltip>

 

 

<SfMultiSelect ID="MultiOneID" TValue="List<string>" TItem="Country" CssClass="@((MultiVal != null && MultiVal.Count > 0) ? VALUE_IS_PRESENT_CSS_CLASS : FILTER_DEFAULT_CSS_CLASS)">

  ...

  <MultiSelectEvents TValue="List<string>" TItem="Country" ValueChange="@ValueChangeHandler1" OnValueSelect="@OnValueSelecthandler1" Opened="OnOpen" OnClose="OnClose"></MultiSelectEvents>

</SfMultiSelect>

@code {

  private const string FILTER_DEFAULT_CSS_CLASS = "defaultClass";

  private const string VALUE_IS_PRESENT_CSS_CLASS = "selectedClass1";

  ...

  private async Task OnValueSelecthandler1(SelectEventArgs<Country> args)

  {

    await JsRuntime.InvokeAsync<string>("JsInterop1",args);

  }

[MultiTwo.razor]

 

<SfTooltip @ref="TooltipObj2" ID="TooltipForMultiTwo" Target=".e-clear-icon[data-title]"></SfTooltip>

 

<SfMultiSelect ID="MultiTwoID" TItem="GameFields" TValue="string[]" Placeholder="Select games" @bind-Value="@MultiVal" DataSource="@Games" HideSelectedItem="false" CssClass="@((MultiVal != null && MultiVal.Length > 0) ? VALUE_IS_PRESENT_CSS_CLASS : FILTER_DEFAULT_CSS_CLASS)">

  ...

  <MultiSelectEvents TValue="string[]" TItem="GameFields" Opened="OnOpen" OnClose="OnClose" OnValueSelect="@OnValueSelecthandler2" ValueChange="@ValueChangeHandler2"></MultiSelectEvents>

</SfMultiSelect>

@code {

  private const string FILTER_DEFAULT_CSS_CLASS = "defaultClass";

  private const string VALUE_IS_PRESENT_CSS_CLASS = "selectedClass2";

     ...

  private async Task OnValueSelecthandler2(SelectEventArgs<GameFields> args)

  {

      await JsRuntime.InvokeAsync<string>("JsInterop2", args);

  }

[_Host.cshtml]

 

<script>

  function JsInterop1(x) {      

      setTimeout(() => {

          var element = document.getElementsByClassName("selectedClass1")[0].querySelector(".e-clear-icon");

          element.setAttribute("data-title", "TooltipForMultiOne");

      }, 100);        

  }

 

  function JsInterop2(x) {

      setTimeout(() => {

          var element = document.getElementsByClassName("selectedClass2")[0].querySelector(".e-clear-icon");

          element.setAttribute("data-title", "TooltipForMultiTwo");

      }, 100);

  }

</script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Tooltip1216872917

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Indhumathy L