Tooltips not appearing on Vue Editor Toolbar Buttons

[JoseiToAoiTori]

Describe the bug

When using the Vue component for the Editor, tooltips do not appear when you hover over buttons on the toolbar. Codemirror and Editor CSS is imported as ESModules and the toolbar buttons are not customized in any way.

To Reproduce

Steps to reproduce the behavior:

1. yarn add @toast-ui/vue-editor
2. Inside a new Vue component, import Codemirror and Editor CSS along with the editor itself. Also register the Editor component.
3. Create an Editor component with props like these:

<Editor initialEditType="wysiwyg" :options="editorOptions" :ref="`editor-${id}`" :initialValue=`anObject[key]" @focus="changed = true" @change="handleInput(id)"/>

Expected behavior

When the Editor is rendered out, hovering over the toolbar buttons should bring up tooltips describing what the button does.

Screenshots

No tooltips appear on the Editor when it's a vue component.

However, on the demo hosted at https://ui.toast.com/tui-editor/, tooltips do appear.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome (Latest)

Additional context

The full code in question can be found here.

[seonim-ryu]

@JoseiToAoiTori When I run it from @toast-ui/vue-editor's storybook, it works fine. So I think this problem is caused by the overlapping styles of your service code and tooltip. Would you like to check if the tooltip is generated well in the page you developed as follows, and check if the style of the service code has affected it?

[JoseiToAoiTori]

The tui-tooltip element doesn't seem to be part of the DOM here.

I also don't have any styles that would affect the editor other than this:

.tui-editor-contents ol > li::before {
        color: initial;
}

.tui-editor-contents ul > li::before {
        background-color: initial;
}

[seonim-ryu]

@JoseiToAoiTori The tui-tooltip element is appended to an element outside the Editor's container. Could you check if it is found when searching in the entire document?

[JoseiToAoiTori]

It's not found in the document but it does appear if you search in one of the bundles generated by webpack. It's just not being rendered on the DOM.

[pandavenger]

Hi, I'm working on the same project as @JoseiToAoiTori and we were able to manage a workaround by patching in a check to see if the tooltip is in the DOM, and re-adding it if it is not.

https://github.com/pandavenger/tui.editor/commit/6f274f3ab1510b5a40c9d4c9bc9a32ff5abee618

However, this just outright does not seem like good coding practice, nor do we want to fix the problem by applying a patch every time. Do you have any suggestions on how to proceed from here?

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[JoseiToAoiTori]

The issue still persists even after upgrading to v2.5.0. Is this going to be fixed or is the patch our only option?

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale[bot]]

This issue will be closed due to inactivity. Thanks for your contribution!