How can I change to look of tooltips?

5 posts, 0 answers
  1. Sumith Jayasuriya
    Sumith Jayasuriya avatar
    25 posts
    Member since:
    Jan 2010

    Posted 10 Apr 2013 Link to this post

    Was wondering how I can change the overall look of the tooltip.

    I haven't seen any documentation on this or if this is even possible, but I would like to change the look of the tooltips and was not sure what classes the tooltips are inherited from or where to begin.  Currently it seems the background colors are being inherited from my page background.

    It seems currently the tooltip attributes are concrete and I would like to attempt to make one where the size of the tooltip is determined by content.

    Can someone please point me in the right direction on how to change look and feel.

    Thanks
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 11 Apr 2013 Link to this post

    Hi Sumith,

    Generally speaking, you can customize the appearance of any particular widget in Kendo UI using custom CSS and the widget-specific class (take a look at this help article). Also you can use any browser inspector to see what HTML output and CSS rules are applied in a given situation. For example the following CSS can be used in order to change the background and metrics of the Kendo UI Tooltip: 
    .k-tooltip{
       background: red !important; //specify tooltip's color
       width: 300px; //specify tooltip's width
       height: 300px//specify tooltip's height
    }

    Regards,

    Iliana Nikolova
    the Telerik team
    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. Masaab
    Masaab avatar
    15 posts
    Member since:
    Nov 2013

    Posted 09 Apr 2014 Link to this post

    you can also try

    .k-widget.k-tooltip{
    background: red !important; //specify tooltip's color   
    width: 300px; //specify tooltip's width
       height: 300px; //specify tooltip's height
    }
  5. Terence
    Terence avatar
    1 posts
    Member since:
    Jun 2014

    Posted 27 Jun 2014 in reply to Masaab Link to this post


    Am having quite a difficult time styling the tooltips for sliders.  I want to have two different styles for two different sliders.

    Could you please explain for example, why I can apply apply styles with

    .k-widget.k-tooltip.k-slider-tooltip {}

    but not with
    .k-widget .k-tooltip.k-slider-tooltip {}

    With the only working specificity being .k-widget.k-tooltip.k-slider-tooltip, I cannot for example specify

    #style1 .k-widget .k-tooltip.k-slider-tooltip {}
    #style2 .k-widget .k-tooltip.k-slider-tooltip {}

    Neither achieves anything with the widget wrapped in the relevent div.  Have lost hours on this... ouch.
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 01 Jul 2014 Link to this post

    Hello Terence,

    Please find my comments below: 
     - k-widget.k-tooltip.k-slider-tooltip
    This selector targets the slider tooltip element;
    - .k-widget .k-tooltip.k-slider-tooltip
    This selector targets .k-tooltip.k-slider-tooltip elements which have parent with .k-widget class.

    In the rendered HTML you can observe that the tooltip is attached to the body element, not to .k-widget.

    Regards,
    Iliana Nikolova
    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