# \[Userscript\] WaniKani Lesson Hover Details

**URL:** <https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312>\
**Category:** API And Third-Party Apps\
**Created:** [March 7, 2018, 1:35am UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312 "2018-03-07T01:35:22Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![seanblue](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/seanblue/32/579844_2.png) [@seanblue](https://community.wanikani.com/u/seanblue)\
**Post date:** [March 7, 2018, 1:35am UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/1 "2018-03-07T01:35:22Z")

</div>

> ⚠ This is a third-party script/app and is not created by the WaniKani team. By using this, you understand that it can stop working at any time or be discontinued indefinitely.

## What is it?

This script lets you see the lesson breakdown by type (radicals, kanji, vocab) when you hover over the _Lessons_ icon in the menu bar.

 ![image](https://global.discourse-cdn.com/wanikanicommunity/original/4X/7/e/6/7e6dde429440b6cc413705d42ce4f74172162cb7.png)

## Settings

By default the script will show the total number of lessons available per type, followed by the total number of lessons for the current level in parentheses. This can be changed by modifying the variable `levelSetting` in the script. The following settings are available:

- `None` - Only show the totals, with nothing in parentheses. This is equivalent to the behavior the script had before this feature was introduced.
- `CurrentLevel` - Shows the total number of lessons for the current level in parentheses. This is the default setting for the script.
- `PriorLevels` - Shows the total number of lessons for all prior levels in parentheses _instead of_ showing the total number of lessons for the current level.

## How to Install?

1. As always, make sure you have a script manager installed. If you don’t, follow [these instructions](https://community.wanikani.com/t/Visual-Guide-on-How-To-Install-A-Userscript/12136).
2. This script depends on the WaniKani Open Framework. Make sure you have that installed by following [these instructions](https://community.wanikani.com/t/instructions-installing-wanikani-open-framework/28549).
3. Get the script here: [WaniKani Lesson Hover Details](https://greasyfork.org/en/scripts/39245-wanikani-lesson-hover-details)

## Support

- This script has only been tested in Chrome using Tampermonkey, but will likely work in Firefox as well.
- Please post any bugs/requests and I’ll get back to you as soon as I can.

## Revision History

**1.2.1** - Show a count for kana vocab.  
**1.2.0** - Add config to optionally show current level or prior level counts in parentheses. The default is to show current level counts.  
**1.1.0** - Added support for new dashboard buttons.  
**1.0.4** - Fixed for the new WaniKani header… again.  
**1.0.3** - Fixed for the new WaniKani header.  
**1.0.2** - Only redirect users to install the Open Framework if they want to.  
**1.0.1** - Fixed a layout issue.  
**1.0.0** - Initial release.

---

<div class="post-metadata">

**Author:** ![gojarappe](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/gojarappe/32/201940_2.png) [@gojarappe](https://community.wanikani.com/u/gojarappe)\
**Post date:** [March 7, 2018, 1:37am UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/2 "2018-03-07T01:37:52Z")

</div>

Thank you so much, seanblue! I can’t wait to use this!

---

<div class="post-metadata">

**Author:** ![jprspereira](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/jprspereira/32/389740_2.png) [@jprspereira](https://community.wanikani.com/u/jprspereira)\
**Post date:** [March 7, 2018, 1:38am UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/3 "2018-03-07T01:38:08Z")

</div>

Why do I have the impression that people will release a bunch of crazy awesome scripts these coming days?? ❤

---

<div class="post-metadata">

**Author:** ![Raionus](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/raionus/32/201626_2.png) [@Raionus](https://community.wanikani.com/u/Raionus)\
**Post date:** [March 7, 2018, 2:07am UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/4 "2018-03-07T02:07:34Z")

</div>

I feel like this website is 95% CS majors.

---

<div class="post-metadata">

**Author:** ![Powerpuncher](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/powerpuncher/32/231125_2.png) [@Powerpuncher](https://community.wanikani.com/u/Powerpuncher)\
**Post date:** [March 7, 2018, 9:12am UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/5 "2018-03-07T09:12:53Z")

</div>

I don’t know why, but when your script is active, it does this to the layout:

 ![ok](https://global.discourse-cdn.com/wanikanicommunity/original/3X/a/a/aa50d7a4300a1f718dc114b14bcaa7a547de7f60.PNG)

Edit: Seems to only happen with the breeze dark skin, so it’s probably not your fault.

---

<div class="post-metadata">

**Author:** ![seanblue](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/seanblue/32/579844_2.png) [@seanblue](https://community.wanikani.com/u/seanblue)\
**Post date:** [March 7, 2018, 12:58pm UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/6 "2018-03-07T12:58:51Z")

</div>

That would definitely be odd since I didn’t change anything on the page other than when you hover. So the layout shouldn’t change when the script is active. Does this not happen with the dark layout when my script is disabled?

---

<div class="post-metadata">

**Author:** ![Aeioryu](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/aeioryu/32/163753_2.png) [@Aeioryu](https://community.wanikani.com/u/Aeioryu)\
**Post date:** [March 7, 2018, 1:18pm UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/7 "2018-03-07T13:18:01Z")

</div>

The layout does indeed seem to shift a little when the script is active. I am using Mozilla Firefox!

 ![26](https://global.discourse-cdn.com/wanikanicommunity/original/3X/9/c/9cc1440bcbe38481117c2a4edfc7fe4393dea12c.png) ![40](https://global.discourse-cdn.com/wanikanicommunity/original/3X/5/2/527bafe42c8ba9b4e66ed28301f6a12aedab9770.png)

---

<div class="post-metadata">

**Author:** ![musera](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/musera/32/3943_2.png) [@musera](https://community.wanikani.com/u/musera)\
**Post date:** [March 7, 2018, 1:26pm UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/8 "2018-03-07T13:26:53Z")

</div>

It shifts on mine as well, using the default layout on chrome. It shifted to the left by about 30 pixels. Doesn’t bother me but I figured I would chime in as well.

Awesome script regardless. I’m getting get a lot of use out of it.

---

<div class="post-metadata">

**Author:** ![Powerpuncher](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/powerpuncher/32/231125_2.png) [@Powerpuncher](https://community.wanikani.com/u/Powerpuncher)\
**Post date:** [March 7, 2018, 1:26pm UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/9 "2018-03-07T13:26:58Z")

</div>

It only happens when your script is enabled, yes. And as @chrisjwelly said, the entire site body shifts a little to the right. For some reason it shifts before the script is even loaded, though, and the shift doesn’t happen when the script is diasbled. 🤔

Edit: It actually shifts to the right.  
Edit2: Made some screenshots showing the script enabled and disabled:

Enabled

 ![enabled](https://global.discourse-cdn.com/wanikanicommunity/original/3X/6/d/6dc7ffebb85f2b1e1f77d043f6f4f55f596013da.PNG)

Disabled

 ![disabled](https://global.discourse-cdn.com/wanikanicommunity/original/3X/f/8/f8a21ba3739b6d87aea5be403eb1134ec773bd9b.PNG)

---

<div class="post-metadata">

**Author:** ![Kumirei](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/kumirei/32/480522_2.png) [@Kumirei](https://community.wanikani.com/u/Kumirei)\
**Post date:** [March 7, 2018, 1:48pm UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/10 "2018-03-07T13:48:57Z")

</div>

@seanblue in case you haven’t figured it out already it’s the `display: table-row` on `.row` which causes it.

If anyone wants a temporary manual fix change line 23 to

```nohighlight
			'.lessonHoverDetails .row { display: table-row; margin: 0; padding: 0; }' +

```

and line 82 to

```nohighlight
		return `<div class="table lessonHoverDetails">

```

---

<div class="post-metadata">

**Author:** ![seanblue](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/seanblue/32/579844_2.png) [@seanblue](https://community.wanikani.com/u/seanblue)\
**Post date:** [March 7, 2018, 2:54pm UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/11 "2018-03-07T14:54:54Z")

</div>

Thanks, I’ll look into it more when I’m done work. I want to make sure the hover box is formatted nicely, but obviously I don’t want to change the rest of layout at all.

I’m open to suggestions if you have css that formats the hover box nicely and doesn’t have any side effects. My main goal is to have the numbers lined up nicely.

---

<div class="post-metadata">

**Author:** ![Kumirei](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/kumirei/32/480522_2.png) [@Kumirei](https://community.wanikani.com/u/Kumirei)\
**Post date:** [March 7, 2018, 3:04pm UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/12 "2018-03-07T15:04:32Z")

</div>

This should make sure the css doesn’t affect anything else. Using the class you already put on the popover (which I missed in my previous post):

```css
	var style =
		'<style>' +
			'.review-time .table { display: table; margin: 0; padding: 0; }' +
			'.review-time .row { display: table-row; margin: 0; padding: 0; }' +
			'.review-time .cell { display: table-cell; margin: 0; }' +
			'.review-time .cell-title { font-weight: bold; padding: 0 10px 0 0; text-align: right; }' +
			'.review-time .cell-value { text-align: left; }' +
		'</style>';

```

---

<div class="post-metadata">

**Author:** ![Radish8](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/radish8/32/206088_2.png) [@Radish8](https://community.wanikani.com/u/Radish8)\
**Post date:** [March 7, 2018, 3:10pm UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/13 "2018-03-07T15:10:19Z")

</div>

_Ah, finally. The script I never knew I needed._

---

<div class="post-metadata">

**Author:** ![seanblue](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/seanblue/32/579844_2.png) [@seanblue](https://community.wanikani.com/u/seanblue)\
**Post date:** [March 7, 2018, 5:13pm UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/14 "2018-03-07T17:13:01Z")

</div>

Ah, I see now. That’s a big shame on me. When I made my lesson filter script I made sure all class names would be unique. But I grabbed this html from some sample code online and forgot to clean it up.

---

<div class="post-metadata">

**Author:** ![seanblue](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/seanblue/32/579844_2.png) [@seanblue](https://community.wanikani.com/u/seanblue)\
**Post date:** [March 7, 2018, 6:04pm UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/15 "2018-03-07T18:04:22Z")

</div>

I have an update ready, but greasyfork is having trouble syncing from github for some reason. I’ll post an update when it’s available.

---

<div class="post-metadata">

**Author:** ![seanblue](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/seanblue/32/579844_2.png) [@seanblue](https://community.wanikani.com/u/seanblue)\
**Post date:** [March 7, 2018, 10:38pm UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/16 "2018-03-07T22:38:12Z")

</div>

Version 1.0.1 is available to fix the issue with the layout shifting to the right. Greasyfork is still being weird, but you should be able to get the update. You may have to update manually from greasyfork to get the latest changes.

CC: @Powerpuncher @chrisjwelly @musera @Kumirei

---

<div class="post-metadata">

**Author:** ![Aeioryu](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/aeioryu/32/163753_2.png) [@Aeioryu](https://community.wanikani.com/u/Aeioryu)\
**Post date:** [March 8, 2018, 12:15am UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/17 "2018-03-08T00:15:04Z")

</div>

完璧だ！ありがとう。

Layout’s all good now. Will keep reporting if I find anything else.

---

<div class="post-metadata">

**Author:** ![anon93783493](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/wanikanicommunity/original/3X/f/d/fd4c154120954695f788402f3bcf4e616499bc2d.png) [@anon93783493](https://community.wanikani.com/u/anon93783493)\
**Post date:** [March 8, 2018, 2:18am UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/18 "2018-03-08T02:18:13Z")

</div>

Thank you seanblue

---

<div class="post-metadata">

**Author:** ![seanblue](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/seanblue/32/579844_2.png) [@seanblue](https://community.wanikani.com/u/seanblue)\
**Post date:** [May 22, 2019, 11:12pm UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/21 "2019-05-22T23:12:36Z")

</div>

Version 1.0.3 is out to work with the new WaniKani dashboard.

cc: @lbbtc06

---

<div class="post-metadata">

**Author:** ![lbbtc06](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/lbbtc06/32/220751_2.png) [@lbbtc06](https://community.wanikani.com/u/lbbtc06)\
**Post date:** [May 23, 2019, 12:35pm UTC](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312/22 "2019-05-23T12:35:41Z")

</div>

thank you!

[Next page](https://community.wanikani.com/t/userscript-wanikani-lesson-hover-details/29312.md?page=2)