工具提示在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

我无法解决如何使用罗盘轴承调用样式

所以我只是在默认的工具提示类

中使用了几种样式来移动工具提示

以粗体突出显示

.mce-工具提示{位置：绝对的;左：100像素;填充：5px的;不透明度：0.8;过滤器：α（不透明度= 80）;放大：1} .mce-tooltip-inner { position：relative; top：-10px; font-size：11px; background-color：＃000; color：#fff; min-width：400; max-width：600px; padding：5px 8px 4px 8px; text-align：center; white-space：normal}

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

对代码的添加将工具提示推到了正确的位置以便

Answer 2

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

这是该按钮的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 */ 
}

请参考这个小提琴，例如：http://jsfiddle.net/va3jn2qy/1/