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

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_

/* 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_

<div class="tooltip">_x000D_
  <input type="text" />_x000D_
  <span class="tooltiptext">_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </span>_x000D_
</div>

_x000D_

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

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

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

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