всплывающие подсказки в тегах P

Question

Я пытаюсь реализовать функциональность всплывающей подсказки, используя jQueryTools, для контента, поступающего из CMS (Alterian). Идея состоит в том, чтобы редакторы отмечали слова в своих текстах хешем и скобками там, где им нужна всплывающая подсказка, т.е. «#triggerword (содержимое всплывающей подсказки). Во время запроса HTML-код изменяется с помощью регулярного выражения, и после каждого элемента вставляются div-подсказки. триггерное слово, вот так:

...replace(/#(\w[\s\S]*?)\(([\s\S]*?)\)/g, "<span class='tipword'>$1</span><div class='tooltip'>$2</div>");

Это прекрасно работает во многих случаях, но триггерные слова, вероятно, также появляются внутри P-тегов. Редакторы пишут свои тексты, и они хранятся в виде HTML в CMS. Я не могу контролировать использование P-тегов. Когда вы помещаете div в P-тег, P-тег автоматически закрывается перед вставкой div. Это, конечно, нарушает структуру текста, и так как триггерное слово и подсказка-div больше не являются смежными, всплывающая подсказка не работает.

Когда HTML из CMS выглядит примерно так:

<P>
    some text with a #triggerword (it's a word that triggers a tooltip to appear)
    and the text goes on....
</P>

затем после преобразования всплывающей подсказки DOM читает:

<P>
    some text with a <SPAN class='tipword'>triggerword</SPAN>
</P>
<DIV class='tooltip'>it's a word that triggers a tooltip to appear</DIV>"); 
and the text goes on....
<P></P>

... а макет и всплывающая подсказка не работают.

Решение, которое было мне предложено, заключается в том, чтобы обернуть всплывающую подсказку span и div в тег объекта:

...replace(/#(\w[\s\S]*?)\(([\s\S]*?)\)/g, "<object><span class='tipword'>$1</span><div class='tooltip'>$2</div></object>");

Это действительно работает! Даже в P-тэгах! Для Firefox и Chrome, но НЕ для IE. IE изменяет DOM и помещает подсказку HTML в свойство altHtml тега object:

<object altHtml="<span ..... /div>"/>

Более 90% моих (некомпетентных) пользователей используют IE, поэтому я не могу игнорировать этот браузер (как бы мне этого ни хотелось).

У кого-нибудь есть предложения, что попробовать дальше? Вы, ребята, мое последнее средство. Боюсь, что мне придется забыть мои приятные div-подсказки и вместо этого прибегнуть к стандартным подсказкам браузера (title-attribute).

Спасибо!

Барт

Answer 1

Ответ ниже отредактирован, чтобы согласиться с конкретным подходом, из оригинального расплывчатого ответа.

Основная проблема в том, что p абсолютно не может содержать элементы уровня блока (например, другой p, div ).В chrome для таких страниц браузер меняет html, и это трудно понять с помощью стандартных инструментов проверки .html.Так что следите за этим.

Итак, вы в основном вынуждены поместить содержимое всплывающей подсказки в другое место.Я думаю, что самый простой и самый элегантный подход - это собрать div , принадлежащий подсказкам, в строку и добавить их в конец веб-страницы, как скрытые.(Я никогда не использовал Alterian, но, полагаю, он должен поддерживать такую ​​штуку для плагинов?) Затем перемещайте и показывайте эти дивы при нажатии / наведении.Я попытался показать, как будет выглядеть такая веб-страница: http://jsfiddle.net/NaDeh/1/ длиной в несколько десятков строк.

В принципе, вы также можете поместить содержимое div в другое место, например, в строку javascript, но вам нужно будет тщательно избегать экранирования;или на другой странице для загрузки с ajax, но такие дополнительные загрузки кажутся ненужными.