Adding a tooltip to an input box

Question

I am using the CSS Tooltips library to try an get a tooltip to show up on an input tag   I can get it to work on a p tag but not an input tag   Any ideas  Here is link to the fiddle  http   jsfiddle net cwlanca BumU5 1  Code  x000D   x000D   data-tip      position relative      data-tip  before     content          hides the tooltip when not hovered      display none    content       display none    border-left  5px solid transparent    border-right  5px solid transparent    border-bottom  5px solid  1a1a1a    position absolute    top 30px    left 35px    z-index 8    font-size 0    line-height 0    width 0    height 0    position absolute    top 30px    left 35px    z-index 8    font-size 0    line-height 0    width 0    height 0     data-tip  after     display none    content attr data-tip     position absolute    top 35px    left 0px    padding 5px 8px    background  1a1a1a    color  fff    z-index 9    font-size  0 75em    height 18px    line-height 18px    -webkit-border-radius  3px    -moz-border-radius  3px    border-radius  3px    white-space nowrap    word-wrap normal     data-tip  hover before   data-tip  hover after     display block    x000D   lt p data-tip  This is the text of the tooltip  gt This is a paragraph of text that has a tooltip  lt  p gt   lt  br gt   lt  br gt   lt  br gt   lt input data-tip  This is the text of the tooltip  value  44   gt  x000D   x000D   x000D

User · Answer

I know this is a question regarding the CSS Tooltips library  However  for anyone else came here resulting from google search  tooltip for input box  like I did  here is the simplest way    lt input title  This is the text of the tooltip  value  44   gt

User · Answer

It seems to be a bug  it work for all input type that aren t textbox  checkboxes  radio       There is a quick workaround that will work    lt div data-tip  This is the text of the tooltip2  gt       lt input type  text  name  test  value  44   gt   lt  div gt    JsFiddle

User · Answer

Apart from HTML 5 data-tip You can use css also for making a totally customizable tooltip to be used anywhere throughout your markup     x000D   x000D     ToolTip classses     x000D   tooltip   x000D      display  inline-block      x000D    x000D   tooltip  tooltiptext   x000D      margin-left 9px  x000D      width   320px  x000D      visibility  hidden  x000D      background-color   FFF  x000D      border-radius 4px  x000D      border  1px solid  aeaeae  x000D      position  absolute  x000D      z-index  1  x000D      padding  5px  x000D      margin-top   -15px   x000D      opacity  0  x000D      transition  opacity 0 5s  x000D    x000D   tooltip  tooltiptext  after   x000D      content       x000D      position  absolute  x000D      top  5   x000D      right  100     x000D      margin-top  -5px  x000D      border-width  5px  x000D      border-style  solid  x000D      border-color  transparent  aeaeae transparent transparent  x000D    x000D   x000D   x000D   tooltip hover  tooltiptext   x000D      visibility  visible  x000D      opacity  1  x000D    x000D   lt div class  tooltip  gt  x000D     lt input type  text    gt  x000D     lt span class  tooltiptext  gt  x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua    lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you are using bootstrap  I am using version 4 0   feel free to try the following code     lt input data-toggle  tooltip  data-placement  top  title  This is the text of the tooltip  value  44   gt    data-placement can be top  right  bottom or left

User · Answer

lt input type  name  placeholder  First Name  title  First Name    gt    title  First Name  solves my proble  it worked with bootstrap

User · Answer

lt input  type  text  placeholder  specify  gt   This adds  specify  as tool-tip text inside the input box

[html] Adding a tooltip to an input box

Examples related to html

Examples related to css

Examples related to tooltip