This is a migrated thread and some comments may be shown as answers.

Tooltip on ALL Inputcheckboxes

4 Answers 167 Views
Tooltip
This is a migrated thread and some comments may be shown as answers.
Jonathan
Top achievements
Rank 1
Veteran
Jonathan asked on 08 May 2020, 11:04 PM

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

4 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 11 May 2020, 02:06 PM

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.
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 11 May 2020, 05:27 PM

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

thx again!


0
Accepted
Marin Bratanov
Telerik team
answered on 11 May 2020, 05:32 PM

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.
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 11 May 2020, 05:33 PM
thx again!
Tags
Tooltip
Asked by
Jonathan
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Jonathan
Top achievements
Rank 1
Veteran
Share this question
or