Change font size of tooltips

[holroy]

I’m having troubles locating the CSS selectors to change the size and appearance of tooltips. So given the code below, I would like for the tooltip to be larger and possibly formatted differently than it currently is under the Minimal theme.

<span title="My tooltip&#013On two lines">Test</span>

Which currently displays as:

I really would like for this text to be larger.

Things I’ve tried

I’ve tried using Developers Tools in Elements pane, but I’m having a hard time getting it to show styles in action when a tooltip is activated. I’ve tried setting various Focus state’s, but there’s something I’m missing related to that, as it doesn’t have any effect that I can see.

So this doesn’t show the tooltip, and thusly not the CSS selectors to use.

I’ve also tried doing stuff related to .tooltip, and setting the --color-tooltip-bg just to see if that somehow targeted the tooltips. But no luck in either case.

[holroy]

So after writing this post I did a different google search, and came across this stackoverflow post:

How to change the style of the title attribute inside an anchor tag?

It basically says, that you can’t change the tooltip from the title attribute, as it default to the display by the browser in use. Bummer. However, it continues to show some alternate stylings related to the title attribute, or other attributes, which also provides me with a solution for single line attributes.

So if I change my markup to be:

<span data-tip="One liner">test</span>

And add the following CSS:

 span[data-tip]:hover::after {
  content: ": " attr(data-tip);
  position: relative;
 }

It allows for this to be displayed:

I would however really love being able to have multiple lines, and potentially in a box related to the <span> element. I tried a few variations using position: absolute, but my attempts have failed so far.

They could possibly fail because in addition to the tooltip, I’m also having this CSS to relocate the <span> element to the right margin:

span[data-tip] {
  display: inline-box;
  float: right;
}

[ariehen]

Not ideal, but you could play around with width to fake at least two lines.

<span data-tooltip="My tooltip&#013On two lines">Test</span>

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 60px;
    width: 120px;

    opacity: 0;
    font-size: 16px;

    background: yellow;
    padding: 1px 1px;
    border: 1px solid #c0c0c0;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

Maybe something here that could work (fifth post from the top; 19 upvotes).

Add a tooltip to a div

[holroy]

Too much time spent fiddling around, but here is a more complete example of what I’m trying to achieve, and my current result:

## Original random task list

- [x] Completed task  📅 2023-05-02 🛫 2023-04-28 ⏳ 2023-04-29 ✅ 2023-04-28
- [ ] Some other task  🛫 2023-04-28  📅 2023-05-02⏳ 2023-04-29 🔁 every 
- [ ] #task Some taggy task #MayBePartial #AndAnotherOne  📅 2023-05-02 

## Beautified(?) tags and icons task query

```dataview
TASK 
FLATTEN join(tags, "
") as joinTags
FLATTEN regexreplace(text, "(#[^ ]+ *)", "") as noTags  
FLATTEN regexreplace(noTags, "(📅|🛫|✅|⏳) *(\d{4}-\d{2}-\d{2})", "<span data-tip='$2'>$1 </span>") as noIcon
FLATTEN noIcon + choice(joinTags, "<span data-tipbox='" + joinTags + "'> \#️⃣ &nbsp;</span>", "") as visual
WHERE file = this.file
```

Using the following CSS:

span[data-tip] {
  float: right;
  position: relative;
}

span[data-tip]:hover::after {
  content: ": " attr(data-tip);
  padding-right: 5px;
}

span[data-tipbox] {
  display: inline-box;
  float: right;
  /* position: relative; /* */
}

span[data-tipbox]:hover::after {
  content: attr(data-tipbox);
  white-space: pre;
  position: relative;
  top: 100%;
  right: 0;
  width: auto; 
  min-width: 100px;
  padding: 6px;
  border: 1px solid var(--ui1);
  background-color: var(--bg2);
  z-index: 5;
}

This will keep the inline expansion for the various dates, and use a multi-line tipbox for any tags present in a task. Everything will still keeping the link related to the task origin intact. This displays as the following image when hovering over the tags icon on the lower task:

I tried uncommenting the position: relative for the tipbox, but I got some issues related to containing box. So this a 90% solution for me, but I would love for the tipbox to hover related to hash emoji and above the text below.

Update: Fixed a minor thingy in the query, and would also like to point out that removing the two float: right lines would leave the icons at the end of the task, which is also a rather nice alternative visually speaking.

[holroy]

@ariehen

Maybe something here that could work (fifth post from the top; 19 upvotes).

It’s code very similar to this I utilised in my 90% solution above, but this still gets clipped off, or displays the scrollbars if used in the task context for multiple tags, and it’s the last task in the list. (That is if you also include the position: relative option you didn’t include )