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;
}
5 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”.
11 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.
The specification of font-family is great! Thanks for sharing.
1 Like
Edited again (code in original post), now cutting off links too long.
Great job! This is also what I want! 
By the way. I think you meight missing the attribute white-space: nowrap.
1 Like
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. 
+1 really
I’d be happy to just have the tooltip you get in reading view in preview mode.
1 Like
Instead of in reading view, it would also be convenient to have the link show tooltip when hovering in editing view + live preview mode.
My use case of Obsidian is mainly in editing view + live preview mode, which IIRC is the default environment for the first entry of Obsidian. Currently, I can click the link while holding Alt to show the source without opening the link. However, it requires extra keystrokes. A simple mouse movement such as hovering would have been enough to accomplish this.
1 Like
OK. I found another post about this feature which was noticed by Obsidian team recently . Hoping this soon.