jQuery inword Plugin Example

inword is a jQuery plugin that's converts any numeric value to word.

Written in HTML, CSS, JavaScript (jQuery, Bootstrap)...

Back to Tutorial View on GitHub
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:'left'})
$('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'});