Tooltip is always transparent

[Andrew]

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>

[Kiril Nikolov]

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

[Andrew]

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

[Kiril Nikolov]

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