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

Multiple tooltips overlapping div

1 Answer 284 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 17 Aug 2018, 07:18 PM

Hi I have a grid that requires two different tooltips (1 for column a and 1 for column b) yet when I hover over either column, I see both tooltips overlaying each other.  Is there something I'm doing wrong, or can you tell me a strategy to fix this?

 

Sorry for the strange formatting.  My grids are embedded inside a Telerik TabStrip, and that just sends the Visual Studio Editor crazy!!  (Do you happen to have a solution for that also?  It's extremely hard to read)

 

@(Html.Kendo().Grid<DemandVM>()
                                                .Name("initialGrid")
                                                .Columns(columns =>
                                                {
                                                        columns.Bound(c => c.Title).ClientTemplate(" <a href='" + Url.Action("DemandDetail", "Demand") + "/#= RequirementId #'" + ">#= changeNewLine(data.Title)#</a>");
                                                        columns.Bound(c => c.SkillsDisplayName).ClientTemplate("<div class=\"forTooltips\">#=SkillsDisplayName#</div>").HtmlAttributes(new { @class = "overridePadding" });
                                                        columns.Bound(c => c.WorksiteLocationsDisplayName).ClientTemplate("<div class=\"forTooltips\">#=WorksiteLocationsDisplayName#</div>").HtmlAttributes(new { @class = "overridePadding" });
                                                                                                        })
                                                .Events(e =>
                                                {
                                                        e.Change("GridRowSelected");
                                                    })
                                                .ToolBar(toolbar =>
                                                {
                                                        toolbar.Excel();
                                                        toolbar.Pdf();
                                                    })
                                                .ColumnMenu()
                                                .Pageable()
                                                .Navigatable()
                                                .Selectable()
                                                .Sortable(sortable =>
                                                {
                                                        sortable.SortMode(GridSortMode.SingleColumn);
                                                    })
                                                .Filterable(filterable => filterable.Mode(GridFilterMode.Menu))
                                                .Scrollable(s => s.Height("auto"))
                                                .DataSource(dataSource => dataSource
                                                .Ajax()
                                                .ServerOperation(false)
                                                .Read(read => read.Action("Search", "Demand").Data("filterList"))
 
                                )
                                .NoRecords("No Demands Found")
                                )
                                @(Html.Kendo().Tooltip()
                                    .For("#initialGrid")
                                    .Filter(".forTooltips")
                                    .ContentHandler("getSkillsToolTipInitial")
                                    .Position(TooltipPosition.Right)
                                    .AutoHide(true)
 
                                )
 
                                @(Html.Kendo().Tooltip()
                                .For("#initialGrid")
                                .Filter(".forTooltips")
                                .ContentHandler("getWorksiteLocationsToolTipInitial")
                                .Position(TooltipPosition.Right)
                                .AutoHide(true)
 
                                )

 

 

1 Answer, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 17 Aug 2018, 07:22 PM

Disregard this post.  I immediately saw my mistake.  I just needed to create a new style called .forTooltips2 and use .forTooltips on one and .forTooltips2 on the other. 

 

Thanks

Tags
ToolTip
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Share this question
or