Update knowledge-base/combobox-multiselect-conditional-tooltip.md

Co-authored-by: Tsvetomir Hristov <[email protected]>

Author: georgedautov

knowledge-base/combobox-multiselect-conditional-tooltip.md

@@ -45,58 +45,59 @@ To ensure tooltips are displayed only when text is ellipsed, use JavaScript to c
 
 ```razor
 @inject IJSRuntime JS
-
-<script suppress-error="BL9992">
-    window.isTextOverflowing = () => {
-        const el = document.querySelector('.example-cb .k-input-inner');
-        if (!el) {
-            return;
-        }
-        
-        return el.scrollWidth > el.clientWidth;
-    };
-</script>
+@inject IJSRuntime JS
 
 @if (SelectedHobbyId != 0)
 {
-    <TelerikTooltip TargetSelector="#products-multiselect[title]"/>
+    <TelerikTooltip TargetSelector="#products-multiselect[title]" />
 }
 
 @{
-    <span
-    id="@(IsCurrentOverflowing ? "products-multiselect" : "products-multiselect-none")"
-    @onmouseenter="OnMouseEnter"
-    title="@CurrentHobbyName">
+    <span id="@(IsCurrentOverflowing ? "products-multiselect" : "products-multiselect-none")"
+          @onmouseenter="OnMouseEnter"
+          title="@CurrentHobbyName">
         <TelerikComboBox @bind-Value="@SelectedHobbyId"
-                    Data="@Hobbies"
-                    Placeholder="Select your favourite sport..."
-                    TextField="@nameof(HobbiesDto.HobbyName)"
-                    ValueField="@nameof(HobbiesDto.HobbyId)"
-                    Filterable="true"
-                    Width="20%"
-                    Class="example-cb">
+                         Data="@Hobbies"
+                         Placeholder="Select your favourite sport..."
+                         TextField="@nameof(HobbiesDto.HobbyName)"
+                         ValueField="@nameof(HobbiesDto.HobbyId)"
+                         Filterable="true"
+                         Width="20%"
+                         Class="example-cb">
         </TelerikComboBox>
     </span>
 }
 
-@code {
-    public int SelectedHobbyId { get; set; }
+<script suppress-error="BL9992">
+    window.isTextOverflowing = () => {
+        const el = document.querySelector('.example-cb .k-input-inner');
+        if (!el) {
+            return;
+        }
 
+        return el.scrollWidth > el.clientWidth;
+    };
+</script>
+
+@code {
+    private int SelectedHobbyId { get; set; }
     private bool IsCurrentOverflowing { get; set; } = false;
-    private string CurrentHobbyName => FindCurrentHobby()?.HobbyName;
+    private string CurrentHobbyName => FindCurrentHobby()!.HobbyName;
 
-    private async Task OnMouseEnter() {
-        @if (SelectedHobbyId != 0) {
+    private async Task OnMouseEnter()
+    {
+        @if (SelectedHobbyId != 0)
+        {
             IsCurrentOverflowing = await JS.InvokeAsync<bool>("isTextOverflowing");
         }
     }
 
-    public HobbiesDto? FindCurrentHobby() 
+    private HobbiesDto? FindCurrentHobby()
     {
         return Hobbies.FirstOrDefault(x => x.HobbyId == SelectedHobbyId);
     }
 
-    public IEnumerable<HobbiesDto> Hobbies { get; set; } = new List<HobbiesDto>()
+    private IEnumerable<HobbiesDto> Hobbies { get; set; } = new List<HobbiesDto>()
     {
         new HobbiesDto(1, "This is a test for a very very very very long sentance."),
         new HobbiesDto(2, "This is some long test sentance."),
@@ -118,7 +119,6 @@ To ensure tooltips are displayed only when text is ellipsed, use JavaScript to c
         public string HobbyName { get; set; }
     }
 }
-```
 
 ### MultiSelect Implementation