External link hover - view url

Just like in the browser, it would be helpful to hover over a named external link in preview mode and see the url. A more advanced version might show metadata for the externally linked document.

21 Likes

Yes! The other day, out of reflex, I hovered over a link and looked down.

I was getting ready to post this request –– thinking no one had requested it yet, as my searches for status bar URL and status bar link came up empty. Glad I’m not the only one who habitually asks, before clicking on a link, which website it points to.

2 Likes

I agree, but not solely for external links.

I think that when hovering over any link, especially so in preview mode, the status bar should give an indication as to where it points.

1 Like

For external links, I managed to achieve this with a CSS snippet. It’s not perfect (especially for long URIs or link text) but for me it’s working nicely:

a.external-link {
  position: relative;
}

a.external-link:before {
  position: absolute;
  padding: 0px 8px 0px 8px;
  color: var(--text-normal);
  background-color: var(--background-primary-alt);
  border-radius: 3px;
  font-size: 80%;
  display: none;
  z-index: 1000;
  top: 1.8em;
  content: attr(href)
}

a.external-link:hover:before {
  display: inline; 
}
6 Likes

I would definitely love this, but not if it slowed down Obsidian. Sounds like it would require Obsidian to basically have a web browser engine built in, which could create increase the size of the app greatly, slow down render times, possibly require a lot more upkeep from the devs.

If they did do it, it might be better if it could load and render the link the first time you hover, and then cache the screenshot for reuse later.

1 Like

@DandyLyons This feature request is about showing only the URL as provided by @narand in post above ↑

Preview for external resources is requested in Show preview on hover over external link (e.g. to a webpage)
Your comment and vote is welcome there.

2 Likes

Oh I see, sorry I didn’t notice that he was talking about preview mode.

Not sure why no one else reacted to this but this works super well. I’ve never seen something like content: attr(href), seems like this is what’s doing the trick. Great stuff

Great stuff!

I maked some customized changes to show the link at the bottom.

a.external-link {
  position: relative;
}

a.external-link:before {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 0.2em 0.6em 0 0.6em;
  color: var(--text-normal);
  background-color: var(--background-primary-alt);
  border-radius: 0 0.4em 0 0;
  font-size: 80%;
  display: none;
  z-index: 1000;
  content: attr(href)
}

a.external-link:hover:before {
  display: inline; 
}
4 Likes

great workaround. thanks for sharing

1 Like

Works like a charm! Great work, thank you!

I’m using conbas2019’s code since I prefer to have the link at the bottom 'cause on a page with a lot of links, the popup obscures a lot of text… though I would imagine you could easily code in a transparency?

Then the individual users could modify the code to their preferred level of transparency.

Nice adaptation conbas2019,

I’m using this code since I prefer to have the link at the bottom 'cause on a page with a lot of links, the popup obscures a lot of text… though I would imagine you could easily code in a transparency?

Then the individual users could modify the code to their preferred level of transparency.

Would adding transparency to narand’s code be easy? I’m thinking that with sufficient transparency having the URL show up on the cursor might be handy, or better yet, having that transparency at the cursor, along with the URL showing on the status bar as you have it now.

Hi, @N1755L. Thanks for your review.

It is possible to add a transparency feature for the popup link. You can follow the steps below:

First, copy the @narand’s snippet into your local one.

Next, add the following snippet to the bottom of the same file. Changing the number not greater than 1 can adjust the transparency.

a.external-link:before {
  opacity: 0.6;
}

And now, you can see the effect in the App.

The following quote describe how the attribute opacity works. More detail for configuring transparency here.

The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

Hmmm… yes, just as I suspected, it works great, but at other times the background makes the transparent text a bit more difficult to read, which is why I was earlier thinking about having both the transparent text at the cursor and the link showing on the status bar at the bottom simultaneously.

I thought I would look at yours and narand’s code above and copy/paste the relevant sections into the .css file, but I see that the coding for both functionalities is not as distinct and clear-cut as I thought it would be. Is it even possible? Thanks again.

Oh, forgot to ask, is there a quick key combination to reload the styles sheet, to see the effect of the changes to the .css file, instead of shutting down and re-opening Obsidian (I’m sure there must be one)?

Don’t we all love to tweak? Here is my version. It has a decent unobtrusive border to distinguish it from the page content, slightly less padding and larger font size (I’m getting older).

Looks good in both light and dark mode, I think.

Thanks to @narand for the idea, and @conbas2019 for the modifications!

Code:

/*
    show-links.css snippet

    by @narand, modified by @conbas2019, again by @Moonbase59
    see https://forum.obsidian.md/t/external-link-hover-view-url/2876/10?u=moonbase59

    2021-05-26 Matthias C. Hormann (Moonbase59)
    Made it more robust, for those who use crazy link styles. ;-)
    Added cutoff long links with an ellipsis.
    Added wrap/no-wrap option, see end of file. Best of both worlds! ;-)

    TODO:
      - With presentations, shows shifted towards the middle.
      - In Obsidian Leaflet popups, appears in the popup.

*/

a.external-link {
  position: relative;
}

a.external-link:before {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 0 0.5em;
  color: var(--text-normal);
  background-color: var(--background-primary-alt);
  border: 1px solid var(--background-modifier-border);
  border-radius: 0 0.4em 0 0;
  font-family: var(--default-font);
  font-size: initial;
  font-style: initial;
  font-weight: initial;
  text-decoration: initial;
  display: none;
  z-index: 1000;
  content: attr(href);
}

a.external-link:hover:before {
  display: block;
  max-width: 98%;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Use one of these for multi-line */
  /*word-wrap: break-word;*/
  word-wrap: break-all;

  /* Enable this for one line only */
  white-space: nowrap;
}

Astonishingly, I missed this feature a lot. Years of looking at the left bottom of the page when hovering over links forms a habit, I guess …

EDIT: Made it more robust, to work with both kinds of zooming and real crazy link styling.

EDIT: Added cutting too long links off, and adding an ellipsis.

EDIT: Added “option” (comment/uncomment at end of file) for displaying one line or multi-line for long URIs.


The “multi-line option”.


The “single line option”.

9 Likes

I am not sure, because the style updated automatically after I saved the snippet, which is active in settings, after I modified.

By the way, my App version is v0.12.3 on macOS.

I am sorry I cannot help. Because both of @narand edit the same element, and an element cannot display on different place at the same time.


Edited.

Maybe I found the solution. Try this one, @N1755L :

a.external-link {
  position: relative;
}

a.external-link:before {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 0.2em 0.6em 0 0.6em;
  color: var(--text-normal);
  background-color: var(--background-primary-alt);
  border: 1px solid var(--background-modifier-border);
  border-radius: 0 0.4em 0 0;
  font-size: 80%;
  font-family: var(--default-font);
  font-style: initial;
  display: none;
  z-index: 1000;
  content: attr(href);
  white-space: nowrap;
  max-width: 98%;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.external-link:hover:before {
  display: block;
}

a.external-link:after {
  position: absolute;
  padding: 0px 8px 0px 8px;
  color: var(--text-normal);
  background-color: var(--background-primary-alt);
  border-radius: 3px;
  font-size: 80%;
  display: none;
  z-index: 1000;
  top: 1.8em;
  content: attr(href)
}

a.external-link:hover:after {
  display: inline; 
}
1 Like

Ok, for now I’ll just keep restarting the application. Thanks.