Add Hyperlink [Official thread]

[gbrl.sc]

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

1. 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

2. 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&nbsp;<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:

1. This is the dialog box from “Add Hyperlink” with title, labels and placeholder text modified:
   

2. 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).
   

   

3. This is how the HTML should look like:
   

   

4. 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.

5. 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.