我怎么能有HTML工具提示在他们时，CKEditor的轧液<span>的</span>

Question

我一直在使用随附的CSS / HTML来实现工具提示，我可以在其中使用HTML来丰富它们。 问题在于，该网站专门用于使用CKEditor （4）的CMS前端，而CKEditor不喜欢span元素-它似乎是复制它们并将复制的元素移到div之外。 这似乎是一个已知问题/功能。

我也没有FTP访问权限，因此绕过CKEditor并不是一个选择，无论如何，我实际上发现所见即所得非常有用，尤其是对于表格。

我的问题是：使用JavaScript在页面完成加载后执行（从某个地方抓取HTML）（我猜是在javascript中声明的字符串常量）并将其包装在<span>..</span>然后执行该操作是否可行？将其注入页面中的正确位置？ 我已经准备好尝试一下，但是我想我应该先检查一下这是否是个脑筋大的想法/它行不通/有很多简单的方法。

 .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 400px; background-color: lightyellow; color: maroon; text-align: left; font-family: Tahoma; border-radius: 6px; padding: 5px 5px; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } 

 <div class="tooltip">Hover over me (tooltip HTML is inside a &lt;span&gt; - CKEditor breaks this HTML) <span class="tooltiptext"> <h3>Tooltip using &lt;span&gt; and allowing HTML</h3><hr> <br> <table align="center" border="1" cellpadding="3" cellspacing="1" style="width:80%;"> <tr> <td style="color:red;">Label 1:</td><td>data</td> </tr> <tr> <td style="color:blue;">Label 2:</td><td>data</td> </tr> <tr> <td style="color:green;">Label 3:</td><td><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/5bzH6DGdLHw.png" style="height: 24px; width: 24px; display: block; margin-left: auto;margin-right: auto;"/></td> </tr> </table> </span> </div> <br> <br> <div class="tooltip">Hover over me (tooltip HTML is inside a &lt;div&gt; - CKEditor doesn't break this HTML) <div class="tooltiptext""> <h3>Tooltip using &lt;div&gt; and allowing HTML</h3><hr> <br> <table align="center" border="1" cellpadding="3" cellspacing="1" style="width:80%;"> <tr> <td style="color:red;">Label 1:</td><td>data</td> </tr> <tr> <td style="color:blue;">Label 2:</td><td>data</td> </tr> <tr> <td style="color:green;">Label 3:</td><td><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/5bzH6DGdLHw.png" style="height: 24px; width: 24px; display: block; margin-left: auto;margin-right: auto;"/></td> </tr> </table> </div> </div> <br> <br> 

Answer 1

为回答您的问题，是的，您可以使用javascript在页面加载后动态插入元素，但是，如果您只想使用跨度但有一个错误阻止了该特定标签，那为什么不使用其他内联级别元素（ <i> or <label> ）。 毕竟，所有的跨度都是。

编辑

我刚刚看了看您的html标记，意识到您将内嵌水平范围内的h3和table之类的块级元素包装为无效html。 我认为这实际上不是错误。 尝试在没有h3和桌子的情况下尝试它，看看它是否仍在移动您的跨度。 另外，为什么在这里使用跨度？ 如果要使h3和table的容器内联，则将跨度更改为div并将div设置为display: inline-block