yakudatsu logo

yakudatsu! v1.3

Copyright (c) 2025 Eric R Outen | MIT License

What is Yakudatsu

This is yakudatsu!

Yakudatsu is a lightweight JavaScript plugin that makes it easy to add inline help or explanatory text directly within your content. By simply wrapping text in a <span> with a special class, Yakudatsu enhances readability and user guidance without cluttering your layout. It's perfect for tooltips, definitions, or context-aware help — all without needing a full UI framework.

Getting Started

  1. Download the latest release of yakudatsu.js from the Github Release Page.
    Or add using CDN method.
    Include this Javascript at the bottom of your page before the closing </body> tag.
    <`script src="https://outendesigns.github.io/yakudatsu/yakudatsu.js"><`/script>
    
  2. Yakudatsu displays helper text that appears after another element.

    Add a regular element such as <h1>, <p>, <a>, etc.
    Immediately after it, add a <span> element.
    Give that <span> the class 'yakudatsu'.
    Put the helper text inside the <span>
    <`p>Here is a sample paragraph element.<`/p>
    <`span class="yakudatsu">This is additional helpful text.<`/span>
    

    Here is a sample paragraph element.

    This is additional helpful text.
  3. Optionally, you can add additional classes to change the style of your yakudatsu.
    <`h1>Header Text<`/h1>
    <`span class="yakudatsu helper-bgcolor-red helper-fontcolor-black helper-fontsize-22">Customized styles are used on this yakudatsu.<`/span>
    

    Header Text

    Customized styles are used on this yakudatsu.