The 'helper' can be anywhere, with any design!
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'});