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

[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;
}

<p data-tip="This is the text of the tooltip">This is a paragraph of text that has a tooltip.</p>
</br>
</br>
</br>
<input data-tip="This is the text of the tooltip" value="44"/>

user227353 · Accepted Answer · 2015-01-29 17:04:25Z

229

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:

<input title="This is the text of the tooltip" value="44"/>

answered Jan 29, 2015 at 17:04

user227353

2,8022 gold badges17 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user227353 Over a year ago

There seems to be a bug in some of the older chrome versions. Try to use alt and title together. see stackoverflow.com/questions/10391327/…

Marcus Junius Brutus Over a year ago

Note that for narrow input types (such as radio) this obviously only appears when hovering over the actual radio button, not over the associated legend which is not what your user might expect

Justin Lessard · Accepted Answer · 2013-10-20 16:58:10Z

55

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.

<div data-tip="This is the text of the tooltip2">
    <input type="text" name="test" value="44"/>
</div>

JsFiddle

answered Oct 20, 2013 at 16:58

Justin Lessard

12.2k7 gold badges53 silver badges63 bronze badges

6 Comments

user497087 Over a year ago

This appears to break if you add the HTML 5 "required" attribute to the input field. When you hover over the input field, the tooltip is displayed as expected, but then is partially overwritten by the browser supplied "Please fill out this field" tooltip

patmood Over a year ago

It's not a bug - the tooltip css relies on :before and :after pseudo selectors which do not work on input elements. It needs to be a container so the pseudo elements can be appended.

GileBrt Over a year ago

I can see that this works in the JsFiddle, but for some reason it doesn't work for me at all... any idea what I should pay attention to?

Jilles van Gurp Over a year ago

<input tip="Tip!" type="text"/> works in current browsers. No more need for the div

Cees Over a year ago

I had the need for a disappearing tooltip. With a bit of JavaScript and a small update to the JsFiddle i was able to achieve this. if anyone is interested i attached it here jsfiddle.net/e4qo6dmz

|

Tayyab Hayat · Accepted Answer · 2019-09-20 05:32:49Z

7

<input type="name" placeholder="First Name" title="First Name" />

title="First Name" solves my proble. it worked with bootstrap.

answered Sep 20, 2019 at 5:32

Tayyab Hayat

9631 gold badge11 silver badges24 bronze badges

Comments

Kushan Randima · Accepted Answer · 2019-03-14 01:37:32Z

4

If you are using bootstrap (I am using version 4.0), feel free to try the following code.

<input data-toggle="tooltip" data-placement="top" title="This is the text of the tooltip" value="44"/>

data-placement can be top, right, bottom or left

answered Mar 14, 2019 at 1:37

Kushan Randima

2,2985 gold badges38 silver badges64 bronze badges

1 Comment

user2682863 Over a year ago

in order for this to work you must enable tooltips via $('[data-toggle="tooltip"]').tooltip() after the document is ready

T.Todua · Accepted Answer · 2020-03-03 07:59:15Z

4

Apart from HTML 5 data-tip You can use css also for making a totally customizable tooltip to be used anywhere throughout your markup.

/* ToolTip classses */ 
.tooltip {
    display: inline-block;    
}
.tooltip .tooltiptext {
    margin-left:9px;
    width : 320px;
    visibility: hidden;
    background-color: #FFF;
    border-radius:4px;
    border: 1px solid #aeaeae;
    position: absolute;
    z-index: 1;
    padding: 5px;
    margin-top : -15px; 
    opacity: 0;
    transition: opacity 0.5s;
}
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 5%;
    right: 100%;  
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #aeaeae transparent transparent;
}


.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

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

edited Mar 3, 2020 at 7:59

T.Todua

57.1k22 gold badges261 silver badges266 bronze badges

answered Jun 23, 2016 at 6:29

Partha Roy

1,61516 silver badges16 bronze badges

3 Comments

Irfan Raza Over a year ago

This doesn't work for input type. Please look the question carefully.

Partha Roy Over a year ago

this is just the styling I have given, you can tweek the css bit for your own usage. :)

Moritz Schmidt Over a year ago

When scrolling down on a large page, you cant see the tooltip anymore.

Collectives™ on Stack Overflow

Adding a tooltip to an input box

5 Answers 5

2 Comments

6 Comments

Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

6 Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related