Hello,

I want the tooltip to remain open when trying to click on the content of tooltip. Below is my code.

---Grid

 @(Html.Kendo().Grid<AgeInformation>()
    .Name("AgeInformationGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.FundAge).Title("Agency").ClientTemplate("#=FundAge.FedAgeDesc#").Sortable(false).Width(175).HeaderHtmlAttributes(new { @class = "FundAgeClass" });

  })

    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:500px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .AutoSync(false)
        .Batch(false)
        .PageSize(20)
        .ServerOperation(false)
        .Events(events => events.Error("errorHandler"))
        .Events(events => events.RequestEnd("onAgeInformationRequestEnd"))
        .Model(model => {
            model.Id(p => p.AgeInformationId);
            model.Field(p => p.AgeInformationId).Editable(false);
           model.Field(p => p.FundAge).DefaultValue(new FedAgency());
        })
        .Create(update => update.Action("AddAgeInformation", "Coversheet").Type(HttpVerbs.Post))
        .Read(read => read.Action("GetAgeInformation", "Coversheet").Type(HttpVerbs.Get))
        .Update(update => update.Action("EditAgeInformation", "Coversheet").Type(HttpVerbs.Post))
        .Destroy(update => update.Action("DeleteAgeInformation", "Coversheet").Type(HttpVerbs.Post))
    )
    //.Events(events => events.Edit("onAgeInformationEdit"))
    )    

 function ToolTipsForAgency() {

        $(".FundAgeClass").append("&nbsp;<i class='far fa-question-circle'></i>");       

}

Any help is appreciated

my application uses kendo version 2017.3.1026 

In my application I have user name DOM in UI,  

Hi, 

I'm trying to get the tooltips to show when hovering over the chart when there's a selector on the chart.

Without the select the tooltips show but not with it. (Images attached)

The select uses a mask that covers the chart, I tried changing the css z-indexes but had no luck and can't find any possible work around.

We have Kendo spreadsheet which is getting the data source set up in JQuery from an array of objects.

After setting up the data source, the comments are setup using range method to the cells.

Then checkboxes are added to the first column of spreadsheet based on the value present in the first column.

With these setup, when we run the page, and do mouse over to the cells with comments, then comments tooltip shows up and also the checkboxes added in the first column is replaced with the value which was assigned using the data source.

Please suggest us some solution for this issue.

-Poorani

I've got a scenario where a tooltip is not hiding when another tooltip is shown, and here is a dojo for reference.

If you move your mouse up and down the colors, the tooltips show and hide as they should. If you stop on a color, move the mouse right into the tooltip, then straight back out of the tooltip and back into the color for that tooltip, then move the mouse up or down over another color, the first tooltip doesn't hide. You can repeat this sequence for the other tooltips as well, resulting in multiple tooltips showing.

Here is a jam so you can see what I mean as well. You can't see the mouse move, but you can see the multiple tooltips.

How to add a tool tip to the category label on axis in a chart?

I need multi tooltips always show in the page, and the tooltips will hide only when users click close icon of the tooltips.

but tooltips will hide when click other elements in the page, how to prevent this ?

Following is my code and screenshot.

<div class="point" title="A">1</div>
<div class="point" title="B">2</div>
<div class="point" title="C">3</div>

$('.point').kendoTooltip({
      position: "top",
      width: 200,
      autoHide: false,
      showOn: "click",
      hide:(e)=>{
            console.log(e)
            e.preventDefault()
      }
})


const $allEl = $(`.point`)

 for(let i=0;i<$allEl.length;i++){
        const $this = $allEl.eq(i)
        $this.data('kendoTooltip').show($this)
      }
     

I have an element need to inited both Draggable and Toolips, and I want to prevent tooltips show event when dragend, I use e.preventdefault() , but it don't work.

The version I'm using is 2017.3.913

For some reason, I can't update to the latest.

My  html

<div class="edit-tooltips" style="left: ${xPx};top: ${yPx}">
        <div class="sensor-point new-point" > content
          ${ index }
        </div>
</div>

My js

$(".edit-tooltips").kendoTooltip({
   autoHide:false,
   showOn: "click"
  .....
})


$(".sensor-point").kendoDraggable({
        hint: (element)=>{
             return ....
        },
        dragstart: (e:any)=>{

        },
        dragend: (e:any)=> {
           ....
          e.preventDefault()  // this dot'n work, tooltips show event will still be triggered
        }
      })

I have a grid where I have some buttons with icons for every row. For those buttons I need to display some tooltips. To do this I am using the kendo tooltip however when the user hovers the button and after the tooltip is displayed the user clicks on the button, the button is hidden but the tooltip is still shown.

How can I close the tooltip when the element is no longer visible on the screen?