Show full URL on hover

Feedback Feature Requests
,
1

Although you can embed clickable links to web pages in your Logseq blocks, they’re not as easy to work with as links in a web page:

  • When hovering the mouse pointer over a web link, it would be good if the URL was visible in a tooltip or in a floating status at the bottom of the window - just like a web browser. This would enable you to see where the link went before you clicked it.
  • It would be good if right-clicking on a web link gave a context menu that included a “Copy URL” option. This would allow you to grab a URL without having to visit the page first.

Both reading and copying a URL can currently be achieved by editing the block but these changes would make those tasks more convenient.

2

If it wouldn’t cause too much of a performance hit, having a thumbnail of the target webpage along with the URL would be nice, like when floating over a tab in some web browsers.

3

I was worried that this might come up when @Bader edited the title to include the word “preview” :slight_smile:

I was simply asking to be able to easily see what URL the link leads to. Whilst I’m sure some users would like a thumbnail-style preview, that sounds like a whole other feature (and not one that I would want enabled by default).

2 Likes
4

For that I think GitHub - pengx17/logseq-plugin-link-preview: Preview links in logseq works well enough.

3 Likes
5

Oh thanks. I didn’t know about that one. (Or I knew, but forgot - it is possible that is where I had the idea from, in the back of my head.)

2 Likes
6

Showing the URL when hovering over a link label can be achieved via CSS. Copy following in custom.css:

a.external-link:hover::after {
  content: attr(href);
  font-size: 80%;
  display:block;
  position: absolute;
  background-color: var(--ls-primary-background-color);
  z-index: 9999;
  pointer-events: none;
}

You can further play around with different colors, e.g. filter: brightness(80%). Looks like this on hover:
url_on_hover

Regarding second point: Voted, these things indeed make life easier!
And while we are at it: “Copy to clibpoard” would also be cool for codeblocks to quickly copy/paste a snippet.

5 Likes
7

My bad I updated the title. Feel free to edit it if you still think it doesn’t fit.

8

Thanks for the idea, the snippet works very well!

For code blocks the plugin (desktop) solution would be GitHub - vyleung/logseq-copy-code-plugin: a Logseq plugin to copy code from code blocks and inline code to your clipboard which also works for inline code.

1 Like
9

I’ve revised that CSS snippet to add a delay before the tool-tip appears, so that moving your mouse across links does cause visual noise:

/* Show external link URLs on hover */
a.external-link::after {
  content: attr(href);
  font-size: 80%;
  display: block;
  position: absolute;
  background-color: var(--ls-secondary-background-color);
  z-index: 9999;
  pointer-events: none;
  padding: 0.3em 0.6em;
  border-radius: 0.2em;
  opacity: 0;
  transition: opacity 0;
}
a.external-link:hover::after {
  opacity: 1;
  transition: opacity 100ms 900ms;
}
1 Like
10

In case it wasn’t obvious, I intended to say: “does not cause visual noise”

1 Like
11

Grant, you are awesome!

Thank you so much for sharing!
I have modified it slightly to make it work better for me.

changelog:

  • position tooltip right underneath the link
  • add borders to tooltip
  • use em unit for font size (personal preference)
  • use link color instead of text color
  • modify the transition for a smother experience
  • only enable for desktop
/* Show external link URLs on hover */
/* Desktop devices only */
@media (min-width: 768px) {
  a.external-link {
    position: relative;
  }

  a.external-link::after {
    content: attr(href);
    font-size: 0.8em;
    display: block;
    position: absolute;
    background-color: var(--ls-secondary-background-color);
    color: var(--ls-external-link-color);
    z-index: 9999;
    pointer-events: none;
    padding: 0.3em 0.6em;
    border-radius: 0.2em;
    opacity: 0;
    transition: opacity 300ms 600ms;
    border-color: var(--ls-border-color);
    border-width: 2px;
    left: 0;
    top: 100%;
    white-space: nowrap;
    margin-top: 0.3em;
  }

  a.external-link:hover {
    opacity: 1;
  }

  a.external-link:hover::after {
    opacity: 1 !important;
    transition: opacity 500ms 200ms;
  }
}

I am adding this to my upcoming Nord theme.

I highly recommend sharing this in #look-what-i-built; if you can’t, I’ll be happy to do so and add reference and credit.

2 Likes
12

By all means share away!

2 Likes