Formatting and tooltip with a CSS snippet

[Transtromer]

Hi there

What I’m trying to do

I’m trying to use a css snippet to display and formating a tooltip. I can share the whole code, but the issue is this part

:root {
–tpcolor: blue;
–textcolor: white;
}

span[data-tooltip] {
text-decoration: underline;
text-decoration-style: dashed;
text-decoration-color: var(–tpcolor);
text-decoration-thickness: 3px;
}

span[ttp-color=green]{
–tpcolor: green;
–textcolor: white;
}

and I use this html:

<span data-tooltip="aunque" data-tooltip-position="top" ttp-color="green">Fastän</span>

As there is a ttp-color attribute, I would wait for --tpcolor to take the value green. But at least in Obsidian it doesn’t work. any idea? Thanks a lot!

[gapmiss]

For tooltips, use aria-label.

e.g.
<span aria-label="aunque" data-tooltip-position="top" ttp-color="green">Fastän</span>

For CSS vars, use double hyphen -- and [aria-label] selector

e.g.

:root {
   --tpcolor: blue;
   --textcolor: white;
}

span[aria-label] {
   text-decoration: underline;
   text-decoration-style: dashed;
   text-decoration-color: var(--tpcolor);
   text-decoration-thickness: 3px;
}

span[ttp-color=green] {
   --tpcolor: green;
   --textcolor: white;
}

[Transtromer]

Thank you @gapmiss . is it possible to change background, borders, font-family , etc only in the context of tooltip through aria-label? The reason of my quesion is controling the aspect of a tooltip wihout affecting the active theme. In addition having different styles (colors) controlled by an attribute.

[gapmiss]

Yes, should be able to target specific tooltips.

I would start by trying the CSS selector:

span[aria-label="aunque"] {
  /* --your-targeted-styles: here; */
  
}

[Transtromer]

I’m having a similar problem. With this code, introducing aria-label. I want to change only the style of aria-label within a span, not in the general style

:root {
--ttp-color: pink;
}


span[aria-label] {
--ttp-color: green;
}

span.green {
--ttp-color: green;
}



.tooltip  {
	background-color: var(--ttp-color);
	font-size: 1em;
	
}

The color is taken from :root, but I’m not able to change it depending or a class or certain attribute value. I’m using this html

<span aria-label="something" aria-label-position="top" class="green">prueba</span>

Putting span[aria-label=“something”] doesn’t have any sense since the style should be independent of the context of tooltip. .tooltip is a propper class in Obsidian.

I know I’m just a beginner in CSS and obsidian is tricky in that aspect.

[gapmiss]

Using the :has() and :hover pseudo selectors, you can target which tooltip is being displayed.

:root {
	--ttp-color: pink;
}

body:has(span.green:hover) {
	--ttp-color: green;
}

body:has(span.orange:hover) {
	--ttp-color: orange;
}

.tooltip {
	background-color: var(--ttp-color);
}

.tooltip.mod-right .tooltip-arrow {
	border-right-color: var(--ttp-color);
}

<span aria-label="default tooltip" data-tooltip-position="right">default</span>

<span aria-label="green tooltip" data-tooltip-position="right" class="green">green</span>

<span aria-label="orange tooltip" data-tooltip-position="right" class="orange">orange</span>

Hope this helps…