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:
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.
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
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.
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.
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).
/*
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.
Yeah, sort of … I thought about it and played with it but really liked the two-line mode on longer URIs that can be wrapped. You can of course add it, maybe I’ve already ruined that feature by using block display … hmm.
EDIT: Added a single line/multi-line “option”, see code in original post.