工具提示在 Tinymce 中的位置

Question

我有一个 tinymce 编辑器实例，默认情况下工具提示位于对象的南边（按钮菜单项等）

我想把它们放在右边（或东边）

我可以在 css 的工具提示中看到似乎有类操作此行为，但我只是不知道如何使用它们

默认css片段

.mce-tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-nw .mce-tooltip-arrow{top:0;left:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-ne .mce-tooltip-arrow{top:0;right:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-s .mce-tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-sw .mce-tooltip-arrow{bottom:0;left:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-se .mce-tooltip-arrow{bottom:0;right:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-e

你能看到像 .mce-tooltip-ne 这样的东西吗 - 我假设控件将工具提示放在东北部

但我什至无法实现它

请帮忙

Answer 1

如果您指的是上图中显示的工具提示，那只是一个本机浏览器工具提示，显示包含图标的锚标记的标题属性。

这是该按钮的 HTML：

<a title="Bold (Ctrl+B)" 
   onclick="return false;"
   onmousedown="return false;"
   class="mceButton mceButtonEnabled mce_bold"
   href="javascript:;" id="story_content_bold">
    <span class="mceIcon mce_bold"></span>
</a>

根据以上所述，对您的问题的简短回答是：不，您不能更改浏览器的本机工具提示的位置。

然而，可能有一些方法可以操纵工具提示的显示方式，这将需要您更改 tinyMCE 源代码。

一个想法是使用另一个属性来包含标题文本。这样您就可以使用 CSS 根据替代属性设置工具提示的样式，而不是使用本机浏览器工具提示。

例如，您可以使用 data-alt 属性：

<a data-alt="Bold (Ctrl+B)" class="specialtooltip"></a>

然后使用 CSS 将其设置为工具提示的样式：

a.specialtooltip[data-alt]:hover:after { 
    /* style to achieve tooltip effect */ 
}

请参考这个fiddle例如：http://jsfiddle.net/va3jn2qy/1/

Answer 2

我不知道如何用罗盘方位调用样式

所以我只是使用默认工具提示中的几种样式移动了工具提示 class

下面以粗体突出显示

.mce-tooltip{position:absolute;left:100px;padding:5px;opacity:.8;filter:alpha(opacity=80);zoom:1} .mce-tooltip-inner{ position:relative;top:-10px; font-size:11px;background-color:#000;color:#fff; 最小宽度:400;最大宽度:600px; padding:5px 8px 4px 8px;text-align:center;white-space:normal}

这是来自 /tinymce/skins/lightgray/skin.min.css

代码的添加将工具提示推到了足够右的位置，以满足需要

工具提示在 Tinymce 中的位置

Position of tooltip in Tinymce

html

css

tinymce