Tooltip on ALL Inputcheckboxes

5 posts, 1 answers
  1. Jonathan
    Jonathan avatar
    112 posts
    Member since:
    Jan 2014

    Posted 08 May Link to this post

    Hi

    How can I apply the same ToolTip  on all InputCheckBox controls 

     

     

     

       <TelerikTooltip TargetSelector=" ?????? "  Position="@TooltipPosition.Right" ShowOn="@TooltipShowEvent.Hover" Id="position-tooltip">
            </TelerikTooltip>

           <td><InputCheckbox id="cust" class="form-control" style="width: 50px;" @bind-Value="Customer.Active" /> </td>

     

    thx in advance

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5325 posts

    Posted 11 May Link to this post

    Hi Jonathan,

    The TargetSelector is a CSS selector, so that's how you can target all such components with a standard selector.

    Here's a sample I made for you that will target all checkboxes:

     

    @using System.ComponentModel.DataAnnotations;
    
    <EditForm Model="@exampleModel" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
    
        <table>
            <tr>
                <td>
                    <InputCheckbox id="cust1" class="form-control" style="width: 50px;" @bind-Value="@exampleModel.Field1" title="first" />
                </td>
                <td>
                    <InputCheckbox id="cust2" class="form-control" style="width: 50px;" @bind-Value="@exampleModel.Field2" title="second" />
                </td>
                <td>
                    <InputCheckbox id="cust3" class="form-control" style="width: 50px;" @bind-Value="@exampleModel.Field3" title="third" />
                </td>
                <td>
                    <InputCheckbox id="cust4" class="form-control" style="width: 50px;" @bind-Value="@exampleModel.Field4" title="fourth" />
                </td>
            </tr>
        </table>
        <button type="submit">Submit</button>
    </EditForm>
    
    <TelerikTooltip TargetSelector="input[type='checkbox']" />
    
    @code {
        private ExampleModel exampleModel = new ExampleModel();
    
        private void HandleValidSubmit()
        {
            Console.WriteLine("OnValidSubmit");
        }
    
        public class ExampleModel
        {
            public bool Field1 { get; set; }
            public bool Field2 { get; set; }
            public bool Field3 { get; set; }
            public bool Field4 { get; set; }
        }
    }

     

     

    Regards,
    Marin Bratanov
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Jonathan
    Jonathan avatar
    112 posts
    Member since:
    Jan 2014

    Posted 11 May in reply to Marin Bratanov Link to this post

    How to I make the tooltip - "Check for YES / Uncheck for  NO" ?

    thx again!


  4. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    5325 posts

    Posted 11 May Link to this post

    Hello Jonathan,

    Have you tried setting the title attribute of the checkboxes themselves? The Telerik Tooltip takes that as its content by default: https://docs.telerik.com/blazor-ui/components/tooltip/overview.

    Alternatively, you can set the desired content in the tooltip template.

     

    Regards,
    Marin Bratanov
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Jonathan
    Jonathan avatar
    112 posts
    Member since:
    Jan 2014

    Posted 11 May in reply to Marin Bratanov Link to this post

    thx again!
Back to Top