Add tag descriptions on hover.

You are here: Home > Clarity > Adding tag descriptions on hover.

---

Preface

Want to explain your tag system to your list visitors, or perhaps just remind yourself? Tag descriptions can be useful! The code on this page will add some text that appears when you hover over a tag.

Please check the limitations & notes on use before reporting an issue.

Installation & How-To

Firstly, choose which of these codes you need and append it to the bottom of your CSS. The code required for normal tags compared to if you have installed horizontal tags is different, so make sure to use the correct one.

[Code for Vertical (normal) Tags]

[Code for Horizontal Tags]

Then, we need to add the actual descriptions. To do this we will use a template piece of code. For each description, we will copy and paste this template and then feed the desired tag and description text into it.

Description Template

.data.tags span a[href$="=TAGNAME"]:after {
	content: "TAGDESC"
}

Once you've pasted the template to the bottom of your CSS, you can add information. First, replace the TAGNAME text with the URL-formatted version of your tag.

For help with URL-formatted tags, see getting the tag in URL format.

Next, we need to add the description itself. You will be replacing the TAGDESC text. Do not delete the quotation marks surrounding this text. There are some things you must make note of while editing the description...

• The description cannot contain any linebreaks. This will break the code! For any linebreak you must instead use \a . This will add a linebreak in the final result but in your code looks more like this:

content: "This is a paragraph.\a With a linebreak after it.\a\a You can stack multiple linebreaks in sequence.\a\a I always put a space after the slash-a to avoid mistakes, but don't worry, it doesn't add a space on the new line once the code has been processed.";

If you want to put quotations into the description you will need to 'escape' them by preceding them with a backslash. This prevents them from breaking the CSS. So instead of "this is a quote" it would be \"this is a quote\".

Here is an example of a working tag description that targets the tag "Bad Comedy". Make note of the %20 in place of the space, the \a 's that give it multiple linebreaks, and the escaped quote marks.

.data.tags a[href*="=Bad%20Comedy"]:after {
    content: "\"Funny\".\a \a Definitely not my thing, and not for anyone else either.\a ...\a \a I am running out of filler text I can think up."
}

Which comes out looking like this:

And that's it, you're good to go and your tags should have a description! The more descriptions you edit the more instinctual this becomes.

---

Notes & References

Getting the tag in URL format.

As mentioned earlier, when putting the tag in your code it has to be the URL version of your tag. The easiest way to find the URL version of your tag is by hovering your mouse over your tag while on your anime/mangalist. In one of your screen corners (generally bottom left) it should display the URL, including the tag section, and you can copy it into the code as seen there. It will be after the tag= text.

Alternatively, you can run the text through a URL encoder. Just use your favourite search engine to find one.

Limitations & Notes on Use

• If you have multiple paragraph length descriptions then the page flow can develop problems. Specifically, you can extend the page below the footer. [Visual Example]

• Please note that due to the selectors these templates use, they will not show up in the list preview. They will only show up on the live versions of lists when you view them outside of the MAL editor. While I understand this can be frustrating, it is a calculated trade-off. If you use selectors that display in the preview window it means either more complicated code or opening yourself up to issues with accidentally colouring tags you didn't intentionally select. I hope you can understand.