For heavy hashtag users, is it possible to hide hashtags from blocks but show them on mouse hover?

Hello, #Hashtags seem for me to be breaking the fluidity of reading a few paragraphs and I would like the have them hidden from the view but still appear if I hover the mouse over that block of text. Of course they are shown if I am in editing mode on that block but it would be so nice to have them shown on mouse hover (toggle ther visibility ON or have a popup just like when hovering over a page name).

Is such thing possible with Logseq?

Hi :slightly_smiling_face: Unless there is particular reason you want to use hashtags you could use page links [[hashtag]] instead of #hashtag. The two ways of linking are not distinguished in Logseq, so I usually use the former in text, and the latter when adding a “tag” to a block. See The difference between [[page links]], #tags, and properties::.

1 Like

I, too, use page tags [[ ]] whenever permitted by the text and for the actual #Hashtags i add them at the end of the paragraph, but i use maybe 2 or 3 and they are often long so they are distrating and I don’t really like to see them when reading my notes.

As for hiding them, at least the most rudimentary way would be to style the text of any word that starts with a #-symbol and there is no other punctuation till the end of the line (some quite simple REGEX would do here) to be the same color with the background, but I really hope there is a more clever idea, ideally the one I described (show on mouse hover, hide otherwise).

Ah, I see, I misunderstood it to mean you only wanted to hide the # and not the rest of the word. Sorry about that!

I probably shouldn’t be answering this given my very limited knowledge of css, but I found a possible, but not very elegant solution. Add the following to custom.css.

a.tag{
  visibility: hidden;
  width: 10px;
  white-space: nowrap;
}

a.tag::before {
  visibility: visible;
  content: "#";
}

a.tag:hover {
  visibility: visible;
}

This places a # in place of the full tag, and shows the tag on hover. However, I wasn’t able to make it so that there is no overlap when hovering over the tags. If you would rather the tags be separated according to the lengths of the words, just remove the width and white-space lines.

Hopefully someone else can give you a proper and more elegant solution :slight_smile:

1 Like

Nice start, maybe if the visible text that appears on hover would have a background color this way it wouldn’t show the other # signs for other hashes that might be there. ChatGPT got me to this one:

  visibility: hidden;
  width: 10px;
  white-space: nowrap;
}

a.tag::before {
  visibility: visible;
  content: "#";
}

a.tag:hover {
  visibility: visible;
  background-color: #ccc;
  text-decoration: none;
}

a.tag:hover::before {
  content: "";
}
1 Like

That’s a good idea! Unfortunately I couldn’t quite get it to work. However, by changing the width upon hover, I got something that seems to work OK. Is that close to what you wanted?

a.tag{
  visibility: hidden;
  width: 10px;
  white-space: nowrap;
}

a.tag::before {
  visibility: visible;
  content: "#";
}

a.tag:hover {
  visibility: visible;
  width: fit-content;
}

a.tag:hover::before {
  content: "";
}
1 Like

It’s better than before and yes, it’s quite close to what I envisioned, although there is delay in showing and hiding that is not pleasant.

What I envisioned I think it’s not possible via CSS: my idea was that all the hashtags on a block (bulletpoint paragraph) would only show the hash symbol and, when that block is active, either via mouse hover or via navigating with the arrow keys through blocks, then, togehter with showing a different background color (to show that it is active), the hashtags would get visible all at once, so that the user can then click on them if he wants to. It’s more of an UX thing that most likely can be solved via .js but not .css alone.

1 Like

thank you all,

this is a nice hint, how about if i would like just to hide the “#” and remind the text (not care about hover), how to configure the css ?

thank you

so far tried

.tag :: first-letter {
display: none;
}

but in vain

I have solved this request of mine when I managed to get Logseq Properties play nice with markdown by embedding them in a multi-line Markdown Link.
I currently have css setup to hide block properties in main viewer (working pane) so I have lots of tags that are not visible in the block text:

/* ========================================================================== */
/* Styles for Auto-Hiding and Revealing on Mouse Hover for Block Properties */
/* Styles for displaying block properties */
.block-properties {
  display: none;
  position: absolute;
  transform: translateX(0%); /* Move the properties horizontally aligned with the ".block-content-inner" DIV Left Margin */
  border-radius: 5px;
  padding: 10px;
  border: 1px solid var(--ls-secondary-border-color); /* Add custom border color from pre-defied variables */
  background: var(--ls-primary-background-color)
}
/* Show block properties on hovering .block-content-inner */
.block-content-inner:hover ~ .block-properties {
  display: block;
  opacity: 1;
  z-index: 999;
}

/* Override styles for block properties in right sidebar */
#right-sidebar .block-properties {
  display: block;
  position: relative;
}
1 Like

@FlorianF

thank you for your reply.

after i posted my question, soon later i found it more complicated than i guessed, i will read into your posts, thank you