How to make the kendo tooltip content left justified

Question

I have a kendo tooltip that is displayed when I hover over a row in a kendo grid. The content of the tooltip has multiple lines. The lines are displayed centered by default whereas I would like to have them displayed left justified.

    rowTable.kendoTooltip({
                               content: textToBeDisplayed,
                               position: "bottom"
                           });

Answer 1

You can override the .k-tooltip-content CSS class.

 .k-tooltip-content {
        text-align:left;
    }

See this jsFiddle example

Answer 2

For those of you who don't want to override the css class. I added "in-line" styling on the content.

.Content("<div style='text-align:left;'> " + myContent + "</div>")

Answer 3

Codingbadger's answer is correct, but it overrides styles for all tooltips that you have on a page.

Here is an example where styles are changed only for the specific tooltip: http://jsfiddle.net/NameGrey/d4b0ez4n/5/

$(document).ready(function() {
  $("#target").kendoTooltip({
    position: "right",
    width: "200px",
    content: "<div class='my-tooltip'>Tooltip content with <b>solid example</b></div>"
  });
});

Css:

.my-tooltip {
    text-align: left;
  font-size: 20px;
}