or
0 answers
49 views
I have a similar issue to this question [https://www.telerik.com/forums/tooltip-position-incorrect-when-scrolled-down-page], however we are using jQuery 3.7.1.
What I found was that we were using the .Animation property to enhance the UI. If I remove the .Animation property, it renders correctly when scrolling.
We are also using this with .ToClientTemplate() on the ToolTip as well.
Is this a known issue?
@(Html.Kendo().Tooltip()
.For("#image-info")
.Position(TooltipPosition.Left)
.Content("Here is my tooltip text")
.Width(250)
//.Animation(a =>
//{
// a.Open(o =>
// {
// o.Expand();
// });
//})
.ToClientTemplate())
1 answer
390 views
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
Telerik team
answered
on
23 May 2022
1 answer
307 views
Hi All,
May I ask about what will happen if the date over 30 days trial?
Regards
Mihaela
Telerik team
answered
on
03 Dec 2021
1 answer
71 views
The item data is not transferred via the hash syntax to the custom template ("tooltip-tamplate") for the tooltip. But it works for other templates "task-templat" and "column-template". Please help me to find out the solution. Below is my code in View:
<!--Style progress bar-->
<script id="task-template" type="text/x-kendo-template">
<div class="template" style="background-color: #= Color #;">
<a href="#= Link #">
<h5 style="font-family: "Open Sans",sans-serif;">#= title #<\h5>
</a>
</div>
</script>
<!--Style columns-->
<script id="column-template" type="text/x-kendo-template">
@*<i class="tio-bookmark-outlined tio-lg text-primary"></i>*@
<span>#= ProjectGenre #</span>
</script>
<!--Style ToolTip-->
<script id="tooltip-tamplate" type="text/x-kendo-template">
<div style="padding: 1rem;">
<p>Genre: #= ProjectGenre # </p>
</div>
</script>
@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>((IEnumerable<TaskViewModel>)ViewData["tasks"], (IEnumerable<DependencyViewModel>)ViewData["dependencies"])
.Name("gantt")
.Columns(columns =>
{
columns.Bound(c => c.Studio).Title("Студія").Width(200).Sortable(true);
columns.Bound(c => c.ProjectGenre).Title("Жанр").Width(300).Sortable(true).TemplateId("column-template");
})
.Views(views =>
{
views.YearView(yearView => yearView.Selected(true));
})
.ShowWorkHours(false)
.ShowWorkDays(false)
.Editable(false)
.Height(600)
.TaskTemplateId("task-template")
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.TaskID);
m.ParentId(f => f.ParentID);
m.Field(f => f.Expanded).DefaultValue(true);
m.Field(f => f.Start).ToString();
m.Field(f => f.End).ToString();
})
)
.Tooltip(t =>
{
t.Visible(true);
t.TemplateId("tooltip-tamplate");
})
.DependenciesDataSource(d => d
.Model(m =>
{
m.Id(f => f.DependencyID);
m.PredecessorId(f => f.PredecessorID);
m.SuccessorId(f => f.SuccessorID);
})
)
)
<!--Style progress bar-->
<script id="task-template" type="text/x-kendo-template">
<div class="template" style="background-color: #= Color #;">
<a href="#= Link #">
<h5 style="font-family: "Open Sans",sans-serif;">#= title #<\h5>
</a>
</div>
</script>
<!--Style columns-->
<script id="column-template" type="text/x-kendo-template">
@*<i class="tio-bookmark-outlined tio-lg text-primary"></i>*@
<span>#= ProjectGenre #</span>
</script>
<!--Style ToolTip-->
<script id="tooltip-tamplate" type="text/x-kendo-template">
<div style="padding: 1rem;">
<p>Genre: #= ProjectGenre # </p>
</div>
</script>
@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>((IEnumerable<TaskViewModel>)ViewData["tasks"], (IEnumerable<DependencyViewModel>)ViewData["dependencies"])
.Name("gantt")
.Columns(columns =>
{
columns.Bound(c => c.Studio).Title("Студія").Width(200).Sortable(true);
columns.Bound(c => c.ProjectGenre).Title("Жанр").Width(300).Sortable(true).TemplateId("column-template");
})
.Views(views =>
{
views.YearView(yearView => yearView.Selected(true));
})
.ShowWorkHours(false)
.ShowWorkDays(false)
.Editable(false)
.Height(600)
.TaskTemplateId("task-template")
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.TaskID);
m.ParentId(f => f.ParentID);
m.Field(f => f.Expanded).DefaultValue(true);
m.Field(f => f.Start).ToString();
m.Field(f => f.End).ToString();
})
)
.Tooltip(t =>
{
t.Visible(true);
t.TemplateId("tooltip-tamplate");
})
.DependenciesDataSource(d => d
.Model(m =>
{
m.Id(f => f.DependencyID);
m.PredecessorId(f => f.PredecessorID);
m.SuccessorId(f => f.SuccessorID);
})
)
)
1 answer
196 views
I can not figure out how I can pass a function for content in an Asp.net core to tooltip. In the JQuery examples you can do something like this:
$("#Name").kendoTooltip({
content: function (e) {
return $(e.target).data('tooltip');
}
})@(Html.Kendo().Tooltip()
.For("#Name")
.AutoHide(true)
.Position(TooltipPosition.Top)
.Content("TEST TEST")
.Width(120)
//.Events(events => events.ContentLoad("showTooltip"))
)
Ivan Danchev
Telerik team
answered
on
26 Jul 2021
1 answer
182 views
I have attached the error, using the kendo tooltip error, and a sample of my code as well.
Petar
Telerik team
answered
on
02 Jun 2021
5 answers
305 views
Been trying to determine the correct configuration using tag helpers for the tool tip and so far, documentation nor demos have helped. According to docs, the "content" property could call a script which does not seem to work. Using the property "context-hander" does but ten the template set does not work. GetPersonData below returns a JSON object with one property: EmployeeId.
HTML
<div> <span id="PersonInfo" class="fas fa-info-circle"> </span> <kendo-tooltip name="PersonInfo" position="bottom" width="300" height="300" content-handler="GetPersonData" content-template-id="PersonTooltipTemplate"></kendo-tooltip></div>
JS
function GetPersonData(e){ var personId = document.getElementById("hidPersonId").value; $.ajax( { async: true, url: "", data: { id: personId }, contentType: "application/json", success: function (data) { return data; //{ EmployeeId: "12345" } }, error: function (errorThrown) { console.log("bad"); console.log(errorThrown); } });}<script type="text/x-kendo-template" id="PersonTooltipTemplate"> <div class="d-flex"> <div class="col-12 col-md-4 col-lg-4 col-xl-4 order-0"> <label class="control-label">Employee Id</label> </div> <div class="col-12 col-md-4 col-lg-4 col-xl-4 order-1"> #= data.EmployeeId # </div> </div></script>
Veselin Tsvetanov
Telerik team
answered
on
17 Jan 2020
2 answers
869 views
Hello,
I noticed a bug with your Tooltip that I haven't been able to find a solution for in your forums. When using your tooltip, when I'm scrolled up to the very top of the page and mouse over the button with the tooltip, it displays perfectly fine. However, when I scroll further down the page and then mouse over the button with the tooltip, the tooltip's position gets pushed down. It seems to remain static where it is, and doesn't update based on where the element is that it's targeting. I've attached a couple screenshots to show what I mean by this, and the arrows in each screenshot show what element I'm hovering over to display the tooltip. The tooltip just displays in the wrong position if I scroll a little bit down the page. If anyone can help me with the solution to this, please let me know. Here's my code for the tooltip below:
@(Html.Kendo().Tooltip() .For("#denyCredit") .Position(TooltipPosition.Bottom) .Content("Denied Credit - Follow Up with Vendor using Interrogation Report"))
Petar
Telerik team
answered
on
20 Aug 2019
