[Userscript] Radical & Kanji Mnemonic and Vocabulary Tooltip

irrelephant · May 26, 2019, 8:34am

What does it do?
This script shows information (meaning mnemonics and vocabulary in which the item is used) for radicals and kanji in a tooltip. It looks like this:

If you want to see fewer vocabulary items in the tooltip because they take up quite a lot of space, you can override the config at the beginning of the script:

  // CONFIG START ----------------------------------------------------
        var config = {
            //if set to true, tooltips will automatically displayed during reviews when asked for the reading
            automaticallyShowTooltipDuringReviews: false,

            //change these numbers if you want to see fewer vocabulary items in the tooltips
            //number of vocab on desktop
            maxVocabItemsInTooltip: 24,
            //number of vocab on mobile
            maxVocabItemsInTooltipOnMobile:12,

             //could be used to inject custom notes into tooltips; ask in the forum thread in case you are interested about this
            customNoteCsv : ""
        };
        // CONFIG END ------------------------------------------------------

You can install it via Greasyfork: https://greasyfork.org/en/scripts/383530-wanikani-item-hover-details

Support
It is tested only very quickly on Chrome and iOS (because that is how I’m mainly using it myself Running userscripts on iOS: a workaround)

It contains a minified version of a tooltip library, I’m not sure if this will cause a problem with Greasyfork at some point. This was easier for me to do because of my iOS workaround. But if someone is using it and Greasyfork decides to remove the script because I didn’t include the script from an external source, I can update it.

Other than that, I’m not sure if I can provide many bugfixes or enhancements for this since it is just something I quickly threw together for my own use and my free time is unfortunately a bit limited. But I wanted to share it anyway, maybe someone finds it helpful as it is.

Thanks
Thanks to all the other script authors from whom I keep randomly copying code, I forgot which scripts I was looking at so I don’t know whom’s code I’m ripping off here
I do however know that I probably would not have even started doing this if we didn’t have the awesome WKOF available. Thanks @rfindley!

Oshin · May 26, 2019, 1:02pm

Thanks for the script! It worked fine, though I think it’d be better if the background is better.

irrelephant · May 26, 2019, 4:20pm

oh, thanks, I had not seen such an example yet, that is indeed not ideal…

I‘m reusing an existing tooltip library and just picked the first one that was lightweight and worked well on mobile. But I‘ll see if there is something I can do to let it grow when there is more text.

irrelephant · May 30, 2019, 4:22pm

I made an update with a different tooltip library that will hopefully fix the issue.

I also added vocabulary in which the kanji is being used since I find this very helpful for remembering items. This info is truncated after 400 characters. If you want to see less/more of it, you could change that value here in line 130:

vocab = vocab && vocab.trim()!=="" ? "<hr>" + truncateString(vocab,400) : "";

If you don’t want to see the vocabulary at all, you could change that line to be:
vocab = "";

I probably won’t update this a lot in the future since I have my own private version now in which I’m loading the data from a spreadsheet dynamically to also include my own mnemonics and vocabulary. Since I don’t want to bother anyone with my own mnemonics I made one final public update where I hardcoded the vocabulary data directly in the script.

(I mean… I might update it again in case there is suddenly a ton of interest but I guess there won’t be )

Oshin · May 31, 2019, 10:51pm

I LOVE the update! I almost always hover my mouse to the radicals/kanji to reread the mnemonic quickly. Or go to that page to really reread/relearn that specific radical/kanji. And I LOVE the vocab list!

Thoughts: It’s just thoughts. No rush. The decision is yours whether to add these features or not. Or others who can code scripts and are interested in implementing these thoughts.

1 - I went to a kanji page (or could be a vocab page, in this case). https://www.wanikani.com/kanji/術 And saw no hover on radicals. I wonder if it’s a good idea to show hover too on “Go, Angel, and Drop” radicals this page? So that I don’t have to click on each radical to see the mnemonics.

2 - Redacted. I’ll edit this number two post, I think, later, when I found the case again and not too lazy to type that case here.

Edit 1: I’ve just added this userscript to The New and Improved API and Third Party Apps thread under Reviews & Lessons.

irrelephant · June 1, 2019, 5:53am

Oh, I‘m happy to hear that you find it useful I’m also using it very frequently and find the vocab list super helpful.

In my own version I am showing the tooltip also on hover of the main item during reviews and lessons.
I was not sure if that would be considered cheating by some but I just find it so convenient to have it available for all items. That was my second reason for splitting up this script from my own version. Would you like to be able to have the tooltip available for the „big character in the middle“ (the main item) during reviews and lessons so that you view the info all the time?

I‘ll have a look at what I can do for the item pages. I usually don‘t go there so I didn’t implement it but I hope it should be easy enough.

I also sometimes wish I had the radical info in the tooltip. This was not what I had initially in mind when writing the script but I will look into it, should be easy enough.

Oshin · June 1, 2019, 6:11am

Yes, I would. Though probably if you implement it for public I think it’ll be better if user has a setting where she can set to turn it on/off freely.

irrelephant · June 1, 2019, 6:13am

Yeah, I was already thinking that some settings would make sense. I will look try to into it on the weekend.

irrelephant · June 16, 2019, 8:43pm

I just posted an update of the script. I’m focusing more on vocabulary now since seeing the vocabulary this way has become quite a central part of my studies.

Added more vocabulary (in total around 20.000 words)
Added JLPT info, you’ll see “N5” - “N1” in the text of some of the items now
Changed the layout a bit; it needs more space now but I find it easier to read this way
Show tooltips on a couple more areas: item info pages, in the summary after reviews and lessons and when hovering over the main item during lessons

Let me know what you think @Oshin (or anyone else who might be interested).

At the top of the script there are now a few (very few! ) config options. I’m not sure how anyone else is using this script so the tooltip might be too big and bulky for other now? If yes, you can decrease the maximum number of vocabulary items that are displayed. If you decrease 24 to e.g. 4 or 8, things should get more manageable:

  // CONFIG START ----------------------------------------------------
        var config = {
            //if set to true, tooltips will automatically displayed during reviews when asked for the reading
            automaticallyShowTooltipDuringReviews: false,

            //change these numbers if you want to see fewer vocabulary items in the tooltips
            //number of vocab on desktop
            maxVocabItemsInTooltip: 24,
            //number of vocab on mobile
            maxVocabItemsInTooltipOnMobile:12,

             //could be used to inject custom notes into tooltips; ask in the forum thread in case you are interested about this
            customNoteCsv : ""
        };
        // CONFIG END ------------------------------------------------------

This is what it looks like now:

Seeing this, I’m now a bit disappointed that 紅芋 didn’t make it into the vocabulary list for 芋 (I love 紅芋! ). I limited the vocabulary to only the most common 20k words based on various sources. Maybe I’ll look into extending it one day – I would have a list of 40k or so words available but I thought that could be a bit of an overkill and I would then also have to start sorting the items by frequency.

Oshin · June 16, 2019, 9:01pm

Awesome! Overall I like it! It’s bulky but easier to read. Where’s the config options? I just woke up. It’s early in the morning here. I didn’t see it.

Also, I saw the bubble on the main rad/kanji/vocab which is great, but I also saw empty bubble. Is that a bug?

irrelephant · June 16, 2019, 9:04pm

Sorry if I didn’t make it clear enough, the “config option” is currently just in the code where you have to override it :-/ .

What do you think would be a good default? I can just set that in the public version of the script so that it works better for you.

And aaaah, that little bubble thingie! I’ve been seeing it for weeks now in my own version of the script and have gotten so used to it that I didn’t even notice that it was there anymore. I’ll fix that.

irrelephant · June 16, 2019, 9:07pm

I posted an updated version 1.3 now. You will only see 8 vocabulary items per default (does that work better for you?) and the little empty bubble should be gone.

Oshin · June 16, 2019, 9:12pm

I saw it’s 8 now. Right, it’s better for me too (on show kanji/vocab detail page like this). I’ll use my second account to test the review. My current main account has 0 reviews just now.

Edit 1: Now sometimes I saw no bubble on some main vocab. Like this

Edit 2: Sometimes I also saw bubble for previous kanji/vocab, not the current one. That wide kanji was the previous one, should’ve displayed machine kanji.

Feature request that I redacted long ago: I will have to collect which text that’s kinda useless. I wonder if after I collect those texts, you could by pass them to the radical explanation instead of the kanji explanation. sub (text1) “The origin radical and the origin kanji are the same! Know your radicals!” to (text2) “You have two and legs making up this radical. Between two legs is where you came from, no matter how you look at it. These two legs are your origin.”

wojtek · May 1, 2021, 9:38am

Would it be possible to also add reading mnemonics? I know that in vocabulary the reading is just there but when failing it would be nice to quickly refresh one’s memory without having to open separate page