In Word

Shows any numeric value in word in different styles, so you don't have to count your input

Just add $('element').inword(), nothing else!
Just use $('element').inword(type: 'tooltip')
To put it just next to input, use $('element').inword({type : 'placer'})
Do you want the 'placer' in your custom position? $('element').inword({type: 'placer', placerId : 'placer1'})
'helper' block can be any where with your custom design! $('element').inword({type: 'placer', placerId : 'placer2'})
You can use it like $('element').inword({prefix: '$', suffix : 'only'})
Click on the Input
See the documentation how to handle with disabled Input
Support for Negative Figure & Decimal Point
  • 38437983
  • 45,450.03
  • -45,609
  • 670.002
  • What about me!
  • How you know I'm 24?!
  • 3564.852
Some example of Non-input element, any DOM element can hold the numeric figure
The 'helper' can be anywhere, with any design!
$('element').inword({helper:'top', color : '#191970'})
$('element').inword({helper:'top', backgroundColor : '#000000'})
'helper' is the default behaviour $('element').inword()
If you want it of tooltip style, use 'tooltip'
  • Tooltip on Right $('#tooltipExample1').inword({type: 'tooltip'})
  • Tooltip on Top $('#tooltipExample2').inword({type: 'tooltip', position : 'top', backgroundColor: '#D91E18'})
  • Tooltip on Bottom $('#tooltipExample3').inword({type: 'tooltip', position : 'bottom', color: '#000', backgroundColor: '#E9EDEF'})
  • Tooltip on Left $('#tooltipExample4').inword({type: 'tooltip', position : 'left', backgroundColor: '#4B77BE'})
What about 'readonly' input
  • Readonly Helper $('#readonlyExample1').inword()
  • Readonly Tooltip $('#readonlyExample2').inword({type: 'tooltip'})
  • Readonly Placer $('#readonlyExample3').inword({type: 'helper'})

Fixed Data Example

# First Last Basic (Helper on Hover) Home Rent (Helper on Click) Medical (Tooltip on Right) Conveyance (Placer) Mobile Bill (Helper on Left) Total (Tooltip on Bottom)
1 Mark Otto 11000 4000 1,320 2000 600.50 15,320
2 Jacob Thornton 24000 5000 2,900 3040 700.66 32,600
3 John Wick 14000 6000 1900 2600 850.01 20,900
4 John Doe 14000 7000 3000 2060 920.88 21,600
  • Helper on Hover $(".fix-helper-hover").inword({hover: true});
  • Helper on Click $(".fix-helper-click").inword();
  • Tooltip on Right $(".fix-tooltip-right").inword({type: 'tooltip'});
  • Placer $(".fix-placer").inword({type: 'placer', placerId: 'placer1', hover: true});
  • Helper on Left $(".fix-helper-left").inword({ type: 'helper', position: 'left', hover: true});
  • Tooltip on Bottom $(".fix-tooltip-bottom").inword({type: 'tooltip', position: 'bottom'});

Input Data Example

# First Last Basic (Helper on Bottom) Home Rent (Helper on Right) Medical (Tooltip on Right) Conveyance (Placer) Mobile Bill (Helper on Left) Total (Tooltip on Bottom)
1 Mark Otto
2 Jacob Thornton
3 John Wick
4 John Doe
  • Helper on Bottom $(".input-helper-bottom").inword({position: 'bottom'});
  • Helper on Right $(".input-helper-right").inword();
  • Tooltip on Right $(".input-tooltip-right").inword({type: 'tooltip'});
  • Placer $(".input-placer").inword({type: 'placer', placerId: 'placer2'});
  • Helper on Left $(".input-helper-left").inword({position: 'left'});
  • Tooltip on Bottom $(".input-tooltip-bottom").inword({type: 'tooltip', position: 'bottom'});

How to Use

InWord works with it jQuery and Bootstrap. After Jquery and Bootstrap, just add the inword.js and inword.css, and see the magic!

<!-- CSS -->
<link rel="stylesheet" href="">
<link rel="stylesheet" href="inword.css">

<!-- SCRIPT-->
<script src=""></script>
<script src=""></script>
<script src="inword.js"></script>

Basic Usage

Just add $('element').inword() to your DOM element, and nothing else!

Key Features

  • Three Different Styles, use which you require!
  • Responsive Design/Mobile Friendly
  • All Modern Browser Compatibility
  • Up to Trillion support
  • Negative Figure, Decimal Point detection
  • Prefix/Suffix Support
  • Case Utilization Support
  • Full Customization is possible

Extended Usage

    type: "helper",                     //default#helper, tooltip, placer
    value: null,                        //if value is given, it will be override origina value
    position: "right",                  //applicable for 'tooltip/helper' only; values : right, left, top, bottom; default: right
    color: "#ffffff",
    backgroundColor: "#47a3da",         
    prefix: null,
    suffix: null,
    placerId: null,                     //DOM id where you want to show the placer, applicable for placer only
    hover: false,                       //applicable for non-input element only
    case: 'ucfirst',                    //ucfirst, upper, lower
    wordJoiner: '-',                    //twenty-five, forty-five, if revoked twenty five, forty five
    thousandSeperator: '',              //nine thousand four hundred sixty, if ',' given, nine thousand, four hundred sixty
    ignoreDecimal: false,               //decimal value will not be shown

Disabled Input

InWord has nothing to do with the disabled Input, in such case, take the disabled input inside any DOM element i.e. span, div etc. and define the value and other properties applied on the parent DOM element

<span class="d-inline-block" id="disabledHelper">
    <input type="number" class="form-control" disabled value="546898">
$('#disabledHelper').inword({value: 546898})

Full Documentation

Parameter Data Type Values Default Description
type string helper | tooltip | placer helper
value numeric If 'value' is given, it will ignore the original value of the DOM and this value will be shown in words
position string right | left | top | bottom right applicable for type helper & tooltip, defines which position in words will be shown
color string #fff text color, any valid hex color code
backgroundColor string #47a3da background color, any valid hex color code
prefix string prefix will be shown at the front of in words, useful for showing data like '$ forty five'
suffix string prefix will be shown at the end of in words, useful for showing data like 'forty five only'
placerId string applicable for 'placer' only, DOM ID of where to show the inwords value. If this value is given, in word will be shown inside this element in your page. Inword does not handle any event/design of this element except showing the word value inside this element, for any event/design i.e. show/hide this element, user must do it by himself
hover boolean true | false false applicalble for only non-input element, decide whether to show Inword on the hover of the element
case string ucfirst | upper | lower ucfirst handle word case of Inwords
wordJoiner string - shows Inwords like 'twenty-five', 'forty-five', if empty string '' is given for this value, Inwords will be shown as 'twenty five', 'forty five'
thousandSeperator string shows Inwords like 'nine thousand four hundred sixty', if ',' given for this value, 'nine thousand, four hundred sixty'
ignoreDecimal boolean true | false false if true, decimal value will not be shown