如何使 kendo 工具提示内容左对齐

Question

我有一个 kendo 工具提示，当我将鼠标悬停在 kendo 网格中的一行上时会显示该提示。工具提示的内容有多行。这些线默认居中显示，而我想让它们左对齐显示。

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

Answer 1

您可以覆盖 .k-tooltip-content CSS class。

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

看到这个jsFiddle example

Answer 2

对于那些不想覆盖 css class 的人。我在内容上添加了 "in-line" 样式。

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

Answer 3

Codingbadger 的答案是正确的，但它覆盖了页面上所有工具提示的样式。

这是一个仅针对特定工具提示更改样式的示例：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;
}

如何使 kendo 工具提示内容左对齐

How to make the kendo tooltip content left justified

html

javascript

css

tooltip

kendo-ui