Tooltip is always transparent

4 posts, 0 answers
  1. Andrew
    Andrew avatar
    2 posts
    Member since:
    May 2011

    Posted 09 Dec 2013 Link to this post

    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>
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 09 Dec 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Andrew
    Andrew avatar
    2 posts
    Member since:
    May 2011

    Posted 09 Dec 2013 Link to this post

    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


  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 11 Dec 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready