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"/>

score 210 · Answer 1 · answered Jan 29 '15 at 17:04

210

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 '15 at 17:04

user227353

2,594
2
15
13

1

There seems to be a bug in some of the older chrome versions. Try to use alt and title together. see http://stackoverflow.com/questions/10391327/is-there-a-way-to-make-title-attribute-work-on-chrome – user227353 Feb 06 '17 at 17:30
2

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 – Marcus Junius Brutus Aug 16 '18 at 17:49

score 53 · Accepted Answer · answered Oct 20 '13 at 16:58

53

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 '13 at 16:58

Justin Lessard

10,804
5
49
61

3

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 – user497087 Dec 09 '14 at 09:43
2

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. – patmood Apr 07 '18 at 05:55
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? – GileBrt Sep 04 '18 at 10:06
1

works in current browsers. No more need for the div – Jilles van Gurp Jan 30 '19 at 15:21
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 https://jsfiddle.net/e4qo6dmz/ – Cees Jul 20 '22 at 05:36

score 6 · Answer 3 · answered Sep 20 '19 at 05:32

6

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

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

answered Sep 20 '19 at 05:32

Tayyab Hayat

815
1
9
22

score 4 · Answer 4 · edited Mar 03 '20 at 07:59

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>

This doesn't work for input type. Please look the question carefully. — Irfan Raza, Mar 03 '18 at 07:35
this is just the styling I have given, you can tweek the css bit for your own usage. :) — Partha Roy, Mar 04 '18 at 08:45
When scrolling down on a large page, you cant see the tooltip anymore. — Moritz Schmidt, Mar 30 '22 at 11:29

score 4 · Answer 5 · answered Mar 14 '19 at 01:37

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 '19 at 01:37

Kushan Randima

2,174
5
31
58

1

in order for this to work you must enable tooltips via `$('[data-toggle="tooltip"]').tooltip()` after the document is ready – user2682863 Jan 14 '20 at 14:06

Adding a tooltip to an input box

5 Answers5

Linked