Hiding Tooltip

[Taras]

Is there a way to hide or prevent a tooltip from showing if there is no content?

What I'm trying to do is prepopulate fields in a View with Tooltips (so I don't have to code them in later).

Tool tips are then obtained in the Controller from a ToolTip File which would contain Content and Width.  If there is no content for the field in the ToolTip file, I don't want the tool tip to show.  Right now, if Content is NUL and Width is 0 (zero) then you get a small black box as shown in the attached picture

[Petar]

Hi Taras,

Here is a REPL project demonstrating how the targeted functionality can be implemented. To achieve the functionality we are using the filter configuration of the component as follows:

@(Html.Kendo().Tooltip()
        .For(".demo-section")
        .Filter("input:not([value=''])")
        .Position(TooltipPosition.Top)
        .Width(120)
    )

Please check the linked example and let me know if it helps you achieve what you need in your application.

Regards,
Petar
Progress Telerik

[Taras]

Hi Petar,

Thanks, but its  not quite what I'm looking for.

In my Controller, I initiate the Tooltip .Content and .Width values like this.  I would need to make a modification to handle null return.

            ViewBag.ProcTimeToolTip = DatabaseContext.ToolTip.FirstOrDefault(m => m.Name == "ProcedureTime")?.ToolTip1;
            ViewBag.ProcTimeWidth = DatabaseContext.ToolTip.FirstOrDefault(m => m.Name == "ProcedureTime")?.TipWidth;

Then In the View I have this

                    @(Html.Kendo().Tooltip()
                        .For("#Time")
                        .Position(TooltipPosition.Top)
                        .Content(@ViewBag.ProcTimeToolTip)
Width(@ViewBag.ProcTimeWidth)
                        .AutoHide(true)
                    )

I want is to hide the tool tip if @ViewBatProcTimeToolTip = null or @ViewBagProcTimeWidth = 0.  I tried the following but it didn't do what I wanted.

        function onShow(e) {

            if(this.target()[0].Content===""){

                $(".tooltip").addClass("show");

            }    

        }

 

[Petar]

Hi, Taras.

Based on the additional details, I've modified the previous example. Here is a new REPL project in which I am manually switching the Content configuration of the Tooltip - Option 1: Random text and Option 2: An empty string- "". Based on my tests and the information you sent us, the approach in the example should be doing what you need in your application.

The provided example is based on this Knowledge base article from the Kendo UI for jQuery suite.

I hope the above examples will help you achieve what you need in your application.

[Taras]

At issue is the manual setting of Content vs Variable.   I know I can display the ToolTip with variable data.

I tried your code using this for the tooltip and the script you provided.  

@(Html.Kendo().Tooltip()
          .Name("CallLocation")
          .For("#CallLocation")
          .Position(TooltipPosition.Right)
          .Content(@ViewBag.CallLocationTip)
          .Width(@ViewBag.CallLocationWidth)
          .AutoHide(false)
          .Events(ev=>ev.Show("onShow").Hide("onHide"))
)

This gives me an error 

CS1977: Cannot use a lambda expression as an argument to a dynamically dispatched operation without first casting it to a delegate or expression tree type

Trying to replace @ViewBag with @Model and setting the values in the ViewModel doesn't work. 

 

I looks like is not possible to conditionally hide a ToolTip.

[Petar]

Hi, Taras.

Please check the attached example. In it we are using the following code to get the values of the ViewBag variables and pass them to the Tooltip.

@{
    int CallLocationWidth = ViewBag.CallLocationWidth;
    string CallLocationTip = ViewBag.CallLocationTip;
}

Please check the attached example and let me know if it helps you resolve the issue that you experience. 

[Taras]

I see how this works.  I don't know if I can easily incorporate this solution though. 

Having to use the <div id="x"> seems to mess up my CSS.

Are there any known issues with using ToolTip with a DateTimePicker/DateTimePickerFor?  I find that if I just to to use the ToolTip without the content check no tool tip appears

[Petar]

Hi, Taras.

There are no known issues with the usage of the ToolTip with the DateTimePicker component.

If you don't manage to achieve what you need in your application, the thing I can suggest as another approach is to replicate your scenario (as close as possible) in the project I sent in my previous reply. Send us the edited project back and we will furhter check it. 

[Taras]

Hi Petar,

I've modified your file and attached it here.  The corporate standard has other controls placed within the form-group which are not really relevant here.  The other thing is that we use the For control (i.e.: TextboxFor(), DateTimePickerFor())

As you can see there is another box within the two controls when <div id> is included

The Call Description control is how I'm displaying tips now for certain fields, but for whatever reason, it doesn't work here.

Also, the DateTimePicker doesn't work in this demo.

[Petar]

Hi, Taras.

Thank you for the project. Attached to my reply, you will find an edited version of it in which:

• The TextBoxFor and DateTimePickerFor are used
• The Tooltip content and width are passed to the View using a Viewbag
• The Tooltip visibility for each input is controlled based on the values of the CallDescriptionTip, CallLocationTip, and EventDateTimeTip Viewbag variables.

Please check the attached project and compare it to the previous version of the example. Thus you will identify the changes applied to the new example and will know what to edit in your project.

I hope the provided example will help you achieve what you need in your application. Let me know if you have questions about the suggested implementation.

[Taras]

Hi Petar,

This is looks good, but there's one issue with this example.

The DateTimePicker calendar and time controls do nothing when they're clicked.  I can enter a date or time can't change it with the controls.

Any idea why that is?

 

Updated: I added the code to an actual project.  It caused the DateTimePicker to have the same symptom as above.  I had confirmed it was working correctly before adding the ToolTip code

[Petar]

Hi, Taras.

To make the calendar and time controls of the DateTimePicker appear, we can update the onShow method as follows:

function onShow(e) {
    if (this.content.text() !== "") {
        this.content.parents("div[role=\"tooltip\"]").css("visibility", "visible");
    } else {
        this.content.parents("div[role=\"tooltip\"]").css("visibility", "hidden");
    }
}

With the above change, we also have to update the CSS as follows:

.k-animation-container > div[role="tooltip"] {
    visibility: hidden;
}

Attached, you will find a project in which the above changes are applied.

Let me know if you find other issues with the suggested implementation.

[Taras]

This final version works for the most part.  It doesn't display tooltip for the datetimepicker but I think that's because of other HMTL helpers I have to use in the application.  I won't worry about it for now.

One thing I found while debugging the datetimepicker aspect is that this code is not required if you put the .Event prior to the .Content and .Width parameters

@{
    int CallLocationWidth = ViewBag.CallLocationWidth;
    string CallLocationTip = ViewBag.CallLocationTip;
}

So the following works

@(Html.Kendo().Tooltip()
    .For("#CallLocation")
    .Events(ev=>ev.Show("onShow"))
    .Position(TooltipPosition.Bottom)
    .Width(@ViewBag.CallLocationWidth)
    .Content(@ViewBag.CallLocationTip)
    .AutoHide(true)
    
)

Thanks for all of your help

[Petar]

You are welcome, Taras! I am glad I could help. 

Also thank you for sharing your final solution with the community!