Span class="tooltip" in the editor creates a tooltip

Bug graveyard
1

Steps to reproduce

Write . in both reading view and live preview, a UI tooltip is rendered, which probably shouldnt happen inside the editor.

Did you follow the troubleshooting guide? Y

Expected result

With any other class, the span renders normally with no interference from obsidian’s css. class=“tooltip” should act the same

Actual result

source view:

image
image802×208 16.9 KB

live preview:

image
image992×246 5.47 KB

reading mode:

image
image858×110 4.43 KB

all produced in the sandbox vault

Environment

SYSTEM INFO:
Obsidian version: 1.13.4
Installer version: 1.7.7
Operating system: Windows 11 Home China 10.0.26200
Login status: not logged in
Language: en
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on
RECOMMENDATIONS:
none

2

I am not sure I understand you.
Download and reinstall Obsidian. Please make a screen recording of this happening in the sandbox vault.

3
4

Hi. If it gets marked as not a bug, I just wanted you to understand about this:

Use any of these classes in an HTML span in your note:

cm-hashtag
notice
modal
prompt
callout
cm-hashtag
is-unresolved
menu
popover
search-input-container
bases-formula-error
workspace-tab-header-container

You should see that they do get rendered.

It doesn’t matter where the styling is defined—a CSS snippet, a theme, Obsidian’s app.css—they all get rendered, as they should (in my opinion), when you call their class.

5

ok, I am gonna mark dawni as the solution

6

i dont think styles defined in obsidian’s css should be rendered bc the editor shouldnt be scoped together if you know what i mean? like for example, if i make a user title span (<span class="user-title">user title span</span>) here in the forum, it doesnt get rendered as a little badge, bc the editor has different scoping. like some donut-scoping thing preventing the ui style from leaking into the editor. i think it should be a bug when a text editor has certain words you cant write without it leading to unexpected behavior

but regardless, is there a way to prevent it from rendering like that while still keeping the tooltips in the app ui? im writing pages for a website and cant really change the class to anything but “tooltip” either.

7

In the default theme without interference from other snippets or plugins, this CSS ought to do it:

.cm-content .tooltip,
.markdown-rendered .tooltip {
	all: unset;
}

(How to use CSS snippets in Obsidian: CSS snippets - Obsidian Help)

If that doesn’t match your surrounding text, it’s probably due to other snippets, a theme, or plugins. You would just have to look into which styles need to be set and to what values. (Or open a help thread with the details so folks can look into it with you).