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

Posted 2023-05-07

【中文标题】如何使剑道工具提示内容左对齐

【英文标题】：How to make the kendo tooltip content left justified

【发布时间】：2015-06-28 20:53:12

【问题描述】：

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

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

【参考方案1】：

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

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

看到这个jsFiddle example

【讨论】：

非常感谢！这完美地回答了我的问题。我已经为此修改了 kendo.common.min.css 文件并且它起作用了。

请注意，这将覆盖应用程序中所有工具提示的样式。为了不干扰其他工具提示，请参阅 Sergey_T 的回答。

【参考方案2】：

对于那些不想覆盖 css 类的人。我在内容上添加了“内嵌”样式。

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

【参考方案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;