CODEWITHSUNDEEP
csskendo-uikendo-gridkendo-asp.net-mvc
Lyly
Lyly

Reputation: 726

How to change the background color of the tooltip only in grid in Kendo UI MVC?

In my page,I use tooltip which class name is .tooltipcell to the grid cell,and also use tooltip which class name is .tooltipbtn to the button.Now I want to change the background color of the tooltip in grid,but I do not want to affect the background color of the button tooltip.How to do that?I use to codes below,it affects the two tooltip.

method1:both effect 

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

method2:both effect 

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

Upvotes: 0

Views: 8496

Answers (5)

Qiimiia
Qiimiia

Reputation: 607

You can do use ng-deep followed by the class name of the tooltip you would like to effect as follow:

::ng-deep .tooltipcell .k-tooltip {
  background-color: desired-color;

  .k-callout {
    color: desired-color;
  }
}

Upvotes: 1

Suciu Eus
Suciu Eus

Reputation: 189

JS

 show: function (e) {
        e.sender.popup.element.addClass('red-tooltip');
    },

and CSS

.red-tooltip {
    background-color: #f00 !important;
}

Upvotes: 1

andrescpacheco
andrescpacheco

Reputation: 696

I had the same problem where I was using kendo tooltip. I wanted to change the CSS of the tooltips only in one place leaving the rest of the tooltips intact.

Using css the normal way to do this would be to use target .widget and .k-tooltip CSS classes.

Although this would change all the tooltips within a page.

So, since I wanted to change only one tooltip (same problem as this post) I had to do a JS approach. So, I had to use the show function of kendo's tooltip. Example: 

                   $('.target')..kendoTooltip({
                        position: 'bottom',
                        showAfter: 1000,
                        content: 'test',
                        function(e) {
                            e.sender.popup.element.addClass('customClass');
                            }
                    }).data('kendoTooltip');

I will try to post here a jsfiddle in few moments.

André

Upvotes: 0

LOTUSMS
LOTUSMS

Reputation: 10250

The is an amendment to MarioD Answer.

I didn't test it but given that it works, a better practice would be to concatenate these classes. It saves size in the css and improves loading time. Do this:

div .k-widget.tooltipcell, div .k-widget.tooltipbtn {
      background-color:green;
}

Upvotes: 0

MarioD
MarioD

Reputation: 1703

You can do this:

.tooltipcell{background-color:green;}

.tooltipbtn{background-color:green;}

Just incase your div .k-widget.k-tooltip might overwrite the style you may have to target it deeper like this:

div .k-widget.tooltipcell{background-color:green;}

div .k-widget.tooltipbtn{background-color:green;}

Upvotes: 0

Related Questions