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

Tooltip is always transparent

3 Answers 533 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 09 Dec 2013, 02:01 PM
I have tooltip to my asp.net mvc kendo application - i followed some of the sample code shown in the kendo ui demos.  The tool tip will display and show the content correctly but no matter what I do the tooltip alway has a transparent background.  Even if i use the content template and set the background color of a DIV to a solid color it still shows up transparent.  I've had no trouble with the Kendo PanelBar or Menu - just the tooltip.  Here is my markup:

<div class="float-right">
@*<nav>*@
<ul id="menu">
                 
<li><a href="#" id="Welcome" title="">Welcome @Html.DisplayFor(Function(model)model.FullName)</a></li>
    
</ul>

                    @Code
                        Html.Kendo.Tooltip() _
                    .Content("Test 1") _
                    .Position(TooltipPosition.Top) _
                    .For("#Welcome").Render()
                
                   End Code

@*</nav>*@
</div>

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 09 Dec 2013, 02:46 PM
Hello Andrew,

You can create a CSS rule that will set the background color of the tooltip using its built-in classes. It should be something like this:

.k-widget.k-tooltip{
  background-color:red; //set the desired color
}

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andrew
Top achievements
Rank 1
answered on 09 Dec 2013, 04:43 PM
Ok thanks ... so now I have my content template working correctly and i set the CSS for the tooltip to have no background but i'm still seeing a faint outline of the tooltip border outside of my content.  Here is the css that i changed for the tooltip:

.k-widget.k-tooltip {
  /*border-color: #dbdbde;
  background-color: rgba(0, 0, 0, 0);
  color: #000000;*/
  background:none;
  border:none;
}

I also attached a screenshot of the way my tooltip displays


0
Kiril Nikolov
Telerik team
answered on 11 Dec 2013, 08:42 AM
Hello Andrew,

The faint outline that you are talking about is due to the box-shadow property set on the popup element. You can set it to none if you do not want to display it using a CSS rule.

div.k-tooltip.k-popup{
 box-shadow: none;
 -webkit-box-shadow:none;
}

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ToolTip
Asked by
Andrew
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Andrew
Top achievements
Rank 1
Share this question
or