If you have a problem with the add-on Add Hyperlink post in this thread. This way I get notified. If you make a new thread I will likely miss it.
Hello.
Thank you for managing this add-ons steadily.
Very useful.
I wish I could edit it after adding the hyperlink!
Currently, I can do this by blocking the phrase and then clicking add hyperlink (or cmd h) and “overwriting” the link address.
However, just as it is easier to implement open url and copy url as a context menu, I hope that you add the “Edit url” to the context menu!
Thanks and Take care!
I agree that this would be useful. But unfortunately this would require some bigger changes in the add-on. I’ve added this to my todo list but it will take some months.
There is a workaround: Use the add-on extended editor for field (for tables, search&replace, …).
Hello, @ijgnd.
I just found this addon and I think it can be a really useful starting point for an addon to create tooltips I’ve thinking about for a few weeks (as I posted here).
I’ve got no coding skills, though.
The only modifications I need are
- Instead of inserting the string
<a href="hyperlink">text</a>I need it to insert the string<a class="tooltip">Selected text in the card here<span>Text of the tooltip here</span></a>
and
- If possible (it’d be very convenient), the addon should paste the CSS styling as well, so the text inside the field don’t get mixed with the tooltip text when editing the note (as it gets when the CSS is taken directly from the styling tab of Anki - or from the Front side/Back side tabs, if I paste it there between
<style> </style>).
The HTML result should look something like this:
This is the CSS I currently use but I think it might be good to let the users change the tooltip traits as they wish - or maybe it’d be better to get the styling from tippy.js as @kleinerpirat suggested in the post I linked above.
`I don't want to make a tooltip for this text, but <a class="tooltip">I want to make a tooltip for this one.<span>I want this text to be in the tooltip</span></a>`
<style>
.tooltip {
display: inline-block;
border-bottom: 1px dashed black;
}
.tooltip span {
display:none;
min-width: 0;
max-width: 500px;
background-color:#fffacd;
color: black;
text-align: justify;
padding: 5px 5px;
border-radius: 4px;
border-style: solid;
border-width: 1px;
border-color: black;
box-shadow: 2px 2px 3px 4px #888888;
white-space: normal;
word-wrap: break-word;
}
.tooltip:hover span {
display: inline-block;
position: absolute;
overflow: visible;
visibility: visible;
left: 50%;
z-index: 5000;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 1px 2px 6px rgba(0,0,0,0.3);
box-shadow: 1px 2px 6px rgba(0,0,0,0.5);
}
This is how I imagine things should work when implemented:
-
This is the dialog box from “Add Hyperlink” with title, labels and placeholder text modified:
-
I first select the text I want to create a tooltip to and then write the text for the tooltip (just like the original addon already does).
-
This is how the HTML should look like:
-
Notice that if I don’t paste the CSS inside the HTML editor the tooltip text becomes visible in the field alongside with the card text.
But it doesn’t happen if I paste the CSS inside the HTML editor.
- This is how the tooltip looks like when I hover the mouse over the text.
I still have to position it better, though. 
So, I hope you feel interested in implementing this.
P.s.
I’ve tried to modify the window.py file but I could just change out = "<a href=\"{0}\">{1}</a>".format(url, text) to out = "<a class=\"{0}\">{1}</a>".format(url, text) successfully, which is not enough.
That’s because the editor is not affected by user template CSS. Furthermore, each field has its own shadow-DOM to make sure the general editor styling doesn’t spill into the fields.
This might change in the future: Include user styles in note editor by hgiesel · Pull Request #1049 · ankitects/anki · GitHub
But currently, styling editor field content means injecting CSS at runtime into the shadow-DOM of each field: CSS Injector.
Content and styling should be separated whenever possible. Among lots of other drawbacks, it’s a pain to edit inline-styles in the future, while it’s easy to do it with a separate stylesheet.
I just figured out how to do it.
That looks promising.
I just installed your addon, but I’m afraid it will overwrite all the styling I put in the Styling tab of the template editor. Am I right?
No, CSS Injector won’t affect the template in any way. Everything you do with that add-on is non-permanent and only affects the way the fields look in the editor 
I know that what I’m about to ask is not what the addon was designed for, but I would like to know if it’s possible to use this addon to also embedded a text using the hyperlink created by the Link cards/notes and preview them in extra window addon just like this other addon (that I’m just not using it 'cause it stopped working in the newers versions of Anki). In my smattering of programming, I think that this is not a difficult tweak, but since I don’t anything about phyton idw. If this workaround will be too complicated, nevermind. But if it was not that difficult would you mind help me with this or at least tell me what I need to know to be able to accomplish this?
I’ve loved your addon and thanks for your attention anyway!
Edit: I just realized that you are the one who created the two addons that I’m desiring to bind. Thanks for sharing your addons with the community. Both of your addons were really handy to me.
I’m not sure if this is what you mean by embedding, but you could use my Tippy Tooltips add-on to hide the nids and cids.
This add-on allows you to create links in this format:
<a data-tippy-content="nidd1628755595321">
There’s a slight conflict that needs to be solved on your side though.
In view.py (of “Link cards…” add-on) in the function actually_transform, you need to change the quotes of the pycmd to ` instead of ", like this:
def actually_transform(txt):
pattern = "(%s)(\\d{13})" % gc("prefix_cid", "cidd")
repl = """<a href='javascript:pycmd(`%s\\2`);'>\\1\\2</a>""" % pycmd_card
txt = re.sub(pattern, repl, txt)
if gc("edit note externally"):
pattern = "(%s)(\\d{13})" % gc("prefix_nid", "nidd")
repl = """<a href='javascript:pycmd(`%s\\2`);'>\\1\\2</a>""" % pycmd_nid
txt = re.sub(pattern, repl, txt)
return txt
Then the links should work.
1 Like
Does this addon of yours was designed to be used in the review? Because the workaround you made works in the editor but not in the preview review. What I did was copy the code that you’ve written in the view.py file. Had I messed up something?
I’m not sure if I said that clear, but my final goal is to can access these linked cards during the review.
Thanks for the reply (it was surprisingly fast)!!
You need an extra script in your template that translates the markup into usable tooltips. I made a sample note type (linked to from the add-on page i think) that shows how it’s done.
Thanks for your replies! Your addon is pretty handy (and has some very smooth animation, I liked it) But just for the sake of my curiosity, why had you only allowed the Wikipedia site to open on the review page? There’s some methodological reason behind this?
Thanks for helping me out!!
I guess by that you mean in the reviewer - as opposed to the editor?
Not really, I just didn’t think about that 
It should be relatively easy to add to the editor too…
1 Like
Hy my friend. Is it possible to config this addon to open links from windows explorer?
Ex: C:\Users\Schmitz\Downloads\PrisĂŁo.emmx
Thank you!
Hi ijgnd, I’m a heavy user of your addon. Thanks a lot for your work!
Unfortunately I’m not seeing the “Open URL” option in the context menu anymore (2.1.51).
Thanks for your help.
@peterkibbel : thanks for the report. I just uploaded a new version that should fix this. update your add-ons, restart anki and try again. let me know if you still run into problems.
1 Like
@Schmitz1 : prepend your link with file:/// and use \ instead of /, i.e. file:///D:/Temp/example.pdf. this should work.
1 Like
I like this add-on, in WIN10 the generated hyperlink defaults to color blue, but for better visibility on a smartphone I change (in WIN10) to color red. That worked well for the previous version 2.1.53.
In the latest version 2.1.54 I’m not able to change the hyperlink color, even not when changing the RGB values in WIN10 Anki HTML editor or in Ankidroid on the smartphone.
@stephanclaes: This add-on is just about creating hyperlinks. The way they are displayed is handled by anki itself.
You could manually create a hyperlink in the html editor (ctrl+shift+x) and see if it’s styled red. For the html hyperlink syntax see e.g. HTML Links Hyperlinks
If this hyperlink that’s not related to my add-on is not styled as you want to you know for sure that it’s not about my add-on. Then ask in the forum in a new post in another category.