Javascript - Add A Tooltip To A Div - Stack Overflow

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs Add a tooltip to a div Ask Question Asked 13 years, 4 months ago Modified 1 year, 9 months ago Viewed 1.0m times 753

I have a div tag like this:

<div> <label>Name</label> <input type="text"/> </div>

How can I displaying a tooltip on :hover of the div, preferably with a fade in/out effect.

• javascript
• html
• css
• tooltip

Share Improve this question Follow edited Sep 12, 2019 at 1:57 KyleMit♦ 29.3k7272 gold badges501501 silver badges696696 bronze badges asked Aug 19, 2011 at 4:49 user475685user475685 8,30988 gold badges2828 silver badges2424 bronze badges 4

• 2 For a simple CSS+JavaScript solution, I don't think you can beat Daniel Imms' post at stackoverflow.com/questions/15702867/… – Rick Hitchcock Commented Sep 8, 2014 at 1:04
• 2 CSS3 only – Andrea Ligios Commented Nov 14, 2014 at 15:08
• stackoverflow.com/questions/36275678/… – Pooja Kedar Commented Feb 23, 2017 at 5:36
• 1 It's surprising no one is talking about the ARIA standard; it should be the starting point for a tooltip. See Mozilla. – Kalnode Commented Dec 23, 2021 at 16:06

Add a comment |

25 Answers 25

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 1175

For the basic tooltip, you want:

<div title="This is my tooltip">

like:

.visible { height: 3em; width: 10em; background: yellow; } <div title="This is my tooltip" class="visible"></div>

For a fancier javascript version, you can look into:

https://jqueryhouse.com/best-jquery-tooltip-plugins/

The above link gives you 25 options for tooltips.

Share Improve this answer Follow edited Mar 19, 2021 at 19:00 YakovL 8,2561313 gold badges7373 silver badges112112 bronze badges answered Aug 19, 2011 at 4:54 sscirrussscirrus 56.6k4242 gold badges137137 silver badges235235 bronze badges 8

• 2 One thing to watch out for with a title tool tip is if the user click on the the your div the tooltip won't appear. This can be very frustrating... especially if your div looks like it should be clicked. eg: style="cursor: pointer;" – RayLoveless Commented Mar 19, 2014 at 15:07
• 3 @RayL It isn't standard behavior for a tooltip to be clickable - this blurs links and tooltips, preventing the user from knowing whether a highlighted word will 1) give them more information or 2) take them to another page entirely. In general, bad practice. – sscirrus Commented Apr 14, 2014 at 22:33
• @sscirrus I agree. That's why you should NOT style your tooltips with "cursor: pointer;" (encourages clicking) which I see too often. – RayLoveless Commented Apr 15, 2014 at 17:52
• 35 If you only want to show a tooltip for some piece of text, like "details" for some keyword or something like that, use <abbr title="...">...</abbr> instead; browsers usually style this underlined with dashes / dots, indicating "there is more to tell, see my tooltip". – leemes Commented Aug 6, 2014 at 12:57
• 7 On Chrome, it can take a few seconds for the tooltip to appear. Kind of slow in my opinion. – Johann Commented May 30, 2017 at 6:13

| Show 3 more comments 408 +200

It can be done with CSS only, no javascript at all

running demo

[data-tooltip]::before { /* needed - do not touch */ content: attr(data-tooltip); position: absolute; opacity: 0; /* customizable */ transition: all 0.15s ease; padding: 10px; color: #333; border-radius: 10px; box-shadow: 2px 2px 1px silver; } [data-tooltip]:hover::before { /* needed - do not touch */ opacity: 1; /* customizable */ background: yellow; margin-top: -50px; margin-left: 20px; } [data-tooltip]:not([data-tooltip-persistent])::before { pointer-events: none; } /* FOR TEST PURPOSES ONLY */ div { border: 1px solid silver; background: #ddd; margin: 20px; padding: 10px; } <div>Standard div, no tooltip here</div> <div data-tooltip="Hi, I'm a tooltip. Pretty easy uh ? ;)">Div with standard tooltip. Hover me to see the tooltip. <br/>Hovering the tooltip doesn't matter: <br/>if you hover out of my boundaries, the tooltip will disappear.</div> <div data-tooltip="Hi, I'm a persistent tooltip. I won't disappear when hovering me even if out of my parent boundaries. I'll also prevent other tooltips to fire :)" data-tooltip-persistent="foo">Div with persistent tooltip. Hover me to see the tooltip. <br/>The tooltip won't expire until you hover on me OR it.</div>

1. Apply a custom HTML attribute, eg. data-tooltip="bla bla" to your object (div or whatever):

   <div data-tooltip="bla bla"> something here </div>

2. Define the ::before pseudoelement of each [data-tooltip] object to be transparent, absolutely positioned and with data-tooltip="" value as content:

   [data-tooltip]::before { position : absolute; content : attr(data-tooltip); opacity : 0; }

3. Define :hover::before hovering state of each [data-tooltip] to make it visible:

   [data-tooltip]:hover::before { opacity : 1; }

4. Apply your styles (color, size, position etc) to the tooltip object; end of the story. In the demo I've defined another rule to specify if the tooltip must disappear when hovering over it but outside of the parent, with another custom attribute, data-tooltip-persistent, and a simple rule:

   [data-tooltip]:not([data-tooltip-persistent])::before { pointer-events: none; }

Note 1: The browser coverage for this is very wide, but consider using a javascript fallback (if needed) for old IE.

Note 2: an enhancement might be adding a bit of javascript to calculate the mouse position and add it to the pseudo elements, by changing a class applied to it.

Share Improve this answer Follow edited Mar 14, 2023 at 9:11 Kartik Soneji 1,23611 gold badge1515 silver badges2727 bronze badges answered Sep 12, 2014 at 17:04 Andrea LigiosAndrea Ligios 50.2k2929 gold badges122122 silver badges247247 bronze badges 24

• 1 @AndreaLigios Could this be changed, so that the tooltip is scaled to 1x1px when not shown and that pixel should be somewhere at 0,0 coordinates of the text? Currently there is a glitch in the demo: When putting the mouse at the area below the third div in the demo, the tooltip starts appearing, but then is moving away from the mouse-pointer, and so goes back to it's starting position, which again trickers the appearing. That's happening impressivly fast and shows a flickering. – John Commented Mar 17, 2016 at 14:47
• 2 This is awesome! But: how can we add a line break here? It seems to ignore <br> and others like \n or \r as these just appear as plain text in the rest of the string. Update: I just noticed setting a max-width makes it automatically adjust its content and put line breaks. Really neat! (However, if someone knows an answer, I'd still appreciate that) – LinusG. Commented Nov 28, 2017 at 11:42
• 3 @LinusGeffarth you can do it with white-space: pre-wrap; on current Chrome. I haven't tested other browsers though. – Taugenichts Commented Mar 9, 2020 at 22:47
• 3 I forked @AndreaLigios solution above to use css animations instead of transitions, because opacity was causing problems with my setup in edge cases when the tooltip was near the edge of the screen in mobile devices. Here it is: jsfiddle.net/dimitrisscript/d634bqtn/2 – Dimitris Siakavelis Commented Aug 26, 2020 at 9:09
• 4 What @Luc said: if the tooltip content is very long it might lay over other clickable elements. The opacity is a purely visual effect. The element is still there and may overlap others. Better solution would be to use display: none as default and block on hover. – Frank Drebin Commented Dec 17, 2021 at 14:06

| Show 19 more comments 150

You don't need JavaScript for this at all; just set the title attribute:

<div title="Hello, World!"> <label>Name</label> <input type="text"/> </div>

Note that the visual presentation of the tooltip is browser/OS dependent, so it might fade in and it might not. However, this is the semantic way to do tooltips, and it will work correctly with accessibility software like screen readers.

Demo in Stack Snippets

<div title="Hello, World!"> <label>Name</label> <input type="text"/> </div>

Share Improve this answer Follow edited Sep 12, 2019 at 1:53 KyleMit♦ 29.3k7272 gold badges501501 silver badges696696 bronze badges answered Aug 19, 2011 at 4:53 cdhowiecdhowie 168k2525 gold badges298298 silver badges318318 bronze badges 0 Add a comment | 19

Here's a pure CSS 3 implementation (with optional JS)

The only thing you have to do is set an attribute on any div called "data-tooltip" and that text will be displayed next to it when you hover over it.

I've included some optional JavaScript that will cause the tooltip to be displayed near the cursor. If you don't need this feature, you can safely ignore the JavaScript portion of this fiddle.

If you don't want the fade-in on the hover state, just remove the transition properties.

It's styled like the title property tooltip. Here's the JSFiddle: http://jsfiddle.net/toe0hcyn/1/

HTML Example:

<div data-tooltip="your tooltip message"></div>

CSS:

*[data-tooltip] { position: relative; } *[data-tooltip]::after { content: attr(data-tooltip); position: absolute; top: -20px; right: -20px; width: 150px; pointer-events: none; opacity: 0; -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; display: block; font-size: 12px; line-height: 16px; background: #fefdcd; padding: 2px 2px; border: 1px solid #c0c0c0; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4); } *[data-tooltip]:hover::after { opacity: 1; }

Optional JavaScript for mouse position-based tooltip location change:

var style = document.createElement('style'); document.head.appendChild(style); var matchingElements = []; var allElements = document.getElementsByTagName('*'); for (var i = 0, n = allElements.length; i < n; i++) { var attr = allElements[i].getAttribute('data-tooltip'); if (attr) { allElements[i].addEventListener('mouseover', hoverEvent); } } function hoverEvent(event) { event.preventDefault(); x = event.x - this.offsetLeft; y = event.y - this.offsetTop; // Make it hang below the cursor a bit. y += 10; style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px }' } Share Improve this answer Follow edited Mar 2, 2015 at 16:41 answered Sep 11, 2014 at 21:49 Steven LinnSteven Linn 68855 silver badges1414 bronze badges 0 Add a comment | 17

Here's a nice jQuery Tooltip:

https://jqueryui.com/tooltip/

To implement this, just follow these steps:

1. Add this code in your <head></head> tags:

   <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> <script type="text/javascript"> $("[title]").tooltip(); </script> <style type="text/css"> /* tooltip styling. by default the element to be styled is .tooltip */ .tooltip { display:none; background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png); font-size:12px; height:70px; width:160px; padding:25px; color:#fff; } </style>

2. On the HTML elements that you want to have the tooltip, just add a title attribute to it. Whatever text is in the title attribute will be in the tooltip.

Note: When JavaScript is disabled, it will fallback to the default browser/operating system tooltip.

Share Improve this answer Follow edited Aug 6, 2015 at 14:14 honkingForMoreSleeptime 11322 silver badges1111 bronze badges answered Aug 19, 2011 at 5:15 NathanNathan 12k1111 gold badges5353 silver badges9494 bronze badges 1

• I used your solution here. stackoverflow.com/questions/71043039/…. But I am not getting a good result. Thanks. – abu abu Commented Mar 2, 2022 at 23:17

Add a comment | 16

I did something that should be able to be adapted to a div as well.

HTML

<td> <%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%> <span class="showonhover"> <a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a> <span class="hovertext"> <%# Eval("Name") %> </span> </span> </td>

CSS

.showonhover .hovertext { display: none;} .showonhover:hover .hovertext {display: inline;} a.viewdescription {color:#999;} a.viewdescription:hover {background-color:#999; color: White;} .hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}

For a more in-depth discussion, see my post:

A simple Formatted ToolTip text on hover

Share Improve this answer Follow answered Oct 6, 2011 at 13:41 NarnianNarnian 3,89811 gold badge2727 silver badges2929 bronze badges 3

• 11 Question was for a html solution not some .net server-side magic. – Michał Šrajer Commented Dec 22, 2011 at 23:22
• 6 The .net code is in there to show truncation. The approach using html and css is still valid. – Mark Swardstrom Commented Apr 22, 2013 at 20:03
• 1 This is the easiest and best solution, as it doesn't rely on JS. Just make the span.showonhover focusable or move the span.hovertext into the link and you are fully accessible for screen readers (and therefore better than the title-attribute solution). Oh, and forget about <%# ... %> – chaenu Commented Sep 8, 2014 at 15:26

Add a comment | 15

Okay, here's all of your bounty requirements met:

• No jQuery
• Instant appearing
• No dissapearing until the mouse leaves the area
• Fade in/out effect incorporated
• And lastly.. simple solution

Here's a demo and link to my code (JSFiddle)

Here are the features that I've incorporated into this purely JS, CSS and HTML5 fiddle:

• You can set the speed of the fade.
• You can set the text of the tooltip with a simple variable.

HTML:

<div id="wrapper"> <div id="a">Hover over this div to see a cool tool tip!</div> </div>

CSS:

#a{ background-color:yellow; padding:10px; border:2px solid red; } .tooltip{ background:black; color:white; padding:5px; box-shadow:0 0 10px 0 rgba(0, 0, 0, 1); border-radius:10px; opacity:0; }

JavaScript:

var div = document.getElementById('wrapper'); var a = document.getElementById("a"); var fadeSpeed = 25; // a value between 1 and 1000 where 1000 will take 10 // seconds to fade in and out and 1 will take 0.01 sec. var tipMessage = "The content of the tooltip..."; var showTip = function(){ var tip = document.createElement("span"); tip.className = "tooltip"; tip.id = "tip"; tip.innerHTML = tipMessage; div.appendChild(tip); tip.style.opacity="0"; // to start with... var intId = setInterval(function(){ newOpacity = parseFloat(tip.style.opacity)+0.1; tip.style.opacity = newOpacity.toString(); if(tip.style.opacity == "1"){ clearInterval(intId); } }, fadeSpeed); }; var hideTip = function(){ var tip = document.getElementById("tip"); var intId = setInterval(function(){ newOpacity = parseFloat(tip.style.opacity)-0.1; tip.style.opacity = newOpacity.toString(); if(tip.style.opacity == "0"){ clearInterval(intId); tip.remove(); } }, fadeSpeed); tip.remove(); }; a.addEventListener("mouseover", showTip, false); a.addEventListener("mouseout", hideTip, false); Share Improve this answer Follow edited Sep 12, 2014 at 17:06 answered Sep 12, 2014 at 14:43 Anshu DwibhashiAnshu Dwibhashi 4,67533 gold badges3030 silver badges5959 bronze badges 3

• Quickly moving the cursor in and out spawns multiple tooltips that won't disappear in your jsfiddle. – Ke Vin Commented Sep 12, 2014 at 15:42
• I wonder, if tooltip apears at mouse position. Great customization. – Andre Mesquita Commented Aug 6, 2015 at 17:24
• "newOpacity = ..." should be "var newOpacity = ...", right? – Fumisky Wells Commented Feb 9, 2022 at 4:19

Add a comment | 7

I have developed three type fade effects :

/* setup tooltips */ .tooltip { position: relative; } .tooltip:before, .tooltip:after { display: block; opacity: 0; pointer-events: none; position: absolute; } .tooltip:after { border-right: 6px solid transparent; border-bottom: 6px solid rgba(0,0,0,.75); border-left: 6px solid transparent; content: ''; height: 0; top: 20px; left: 20px; width: 0; } .tooltip:before { background: rgba(0,0,0,.75); border-radius: 2px; color: #fff; content: attr(data-title); font-size: 14px; padding: 6px 10px; top: 26px; white-space: nowrap; } /* the animations */ /* fade */ .tooltip.fade:after, .tooltip.fade:before { transform: translate3d(0,-10px,0); transition: all .15s ease-in-out; } .tooltip.fade:hover:after, .tooltip.fade:hover:before { opacity: 1; transform: translate3d(0,0,0); } /* expand */ .tooltip.expand:before { transform: scale3d(.2,.2,1); transition: all .2s ease-in-out; } .tooltip.expand:after { transform: translate3d(0,6px,0); transition: all .1s ease-in-out; } .tooltip.expand:hover:before, .tooltip.expand:hover:after { opacity: 1; transform: scale3d(1,1,1); } .tooltip.expand:hover:after { transition: all .2s .1s ease-in-out; } /* swing */ .tooltip.swing:before, .tooltip.swing:after { transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg); transform-origin: 0 0; transition: transform .15s ease-in-out, opacity .2s; } .tooltip.swing:after { transform: translate3d(0,60px,0); transition: transform .15s ease-in-out, opacity .2s; } .tooltip.swing:hover:before, .tooltip.swing:hover:after { opacity: 1; transform: translate3d(0,0,0) rotate3d(1,1,1,0deg); } /* basic styling: has nothing to do with tooltips: */ h1 { padding-left: 50px; } ul { margin-bottom: 40px; } li { cursor: pointer; display: inline-block; padding: 0 10px; } <h1>FADE</h1> <div class="tooltip fade" data-title="Hypertext Markup Language"> <label>Name</label> <input type="text"/> </div> <h1>EXPAND</h1> <div class="tooltip expand" data-title="Hypertext Markup Language"> <label>Name</label> <input type="text"/> </div> <h1>SWING</h1> <div class="tooltip swing" data-title="Hypertext Markup Language"> <label>Name</label> <input type="text"/> </div>

Share Improve this answer Follow answered Nov 23, 2017 at 6:11 Nims PatelNims Patel 1,05699 silver badges1919 bronze badges Add a comment | 6

You can create custom CSS tooltips using a data attribute, pseudo elements and content: attr() eg.

http://jsfiddle.net/clintioo/gLeydk0k/11/

<div data-tooltip="This is my tooltip"> <label>Name</label> <input type="text" /> </div>

.

div:hover:before { content: attr(data-tooltip); position: absolute; padding: 5px 10px; margin: -3px 0 0 180px; background: orange; color: white; border-radius: 3px; } div:hover:after { content: ''; position: absolute; margin: 6px 0 0 3px; width: 0; height: 0; border-top: 5px solid transparent; border-right: 10px solid orange; border-bottom: 5px solid transparent; } input[type="text"] { width: 125px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Share Improve this answer Follow answered Sep 11, 2014 at 1:50 user3982863user3982863 Add a comment | 6

You can use title. it'll work for just about everything

<div title="Great for making new friends through cooperation.">

<input script=JavaScript type=button title="Click for a compliment" onclick="window.alert('Your hair reminds me of a sunset across a prairie')" value="making you happy">

<table title="Great job working for those who understand the way i feel">

just think of any tag that can be visible to html window and insert a title="whatever tooltip you'd like" inside it's tag and you got yourself a tooltip.

Share Improve this answer Follow answered Jun 6, 2016 at 17:38 Correct ButCorrect But 47355 silver badges1313 bronze badges 0 Add a comment | 5

you can also use this as tooltip...It works same but you have to write extra tag thats it..

<abbr title="THis is tooltip"></abbr> Share Improve this answer Follow answered Nov 22, 2017 at 17:24 user8507674user8507674 Add a comment | 5

Here's a simple tooltip implementation that keeps into account the position of your mouse as well as the height and width of your window :

function showTooltip(e) { var tooltip = e.target.classList.contains("tooltip") ? e.target : e.target.querySelector(":scope .tooltip"); tooltip.style.left = (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth) ? (e.pageX + 10 + "px") : (document.body.clientWidth + 5 - tooltip.clientWidth + "px"); tooltip.style.top = (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight) ? (e.pageY + 10 + "px") : (document.body.clientHeight + 5 - tooltip.clientHeight + "px"); } var tooltips = document.querySelectorAll('.couponcode'); for(var i = 0; i < tooltips.length; i++) { tooltips[i].addEventListener('mousemove', showTooltip); } .couponcode { color: red; cursor: pointer; } .couponcode:hover .tooltip { display: block; } .tooltip { position: absolute; white-space: nowrap; display: none; background: #ffffcc; border: 1px solid black; padding: 5px; z-index: 1000; color: black; } Lorem ipsum dolor sit amet, <span class="couponcode">consectetur adipiscing<span class="tooltip">This is a tooltip</span></span> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span class="couponcode">reprehenderit<span class="tooltip">This is another tooltip</span></span> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est <span class="couponcode">laborum<span class="tooltip">This is yet another tooltip</span></span>.

(see also this Fiddle)

Share Improve this answer Follow edited Apr 10, 2018 at 15:35 answered Apr 10, 2018 at 14:55 John SlegersJohn Slegers 47k2323 gold badges203203 silver badges172172 bronze badges Add a comment | 5

You can toggle a child div during onmouseover and onmouseout like this:

function Tooltip(el, text) { el.onmouseover = function() { el.innerHTML += '<div class="tooltip">' + text + '</div>' } el.onmouseout = function() { el.removeChild(el.querySelector(".tooltip")) } } //Sample Usage Tooltip(document.getElementById("mydiv"),"hello im a tip div")

Example in Stack Snippets & jsFiddle

function Tooltip(el, text) { el.onmouseover = function() { el.innerHTML += '<div class="tooltip">' + text + '</div>' } el.onmouseout = function() { el.removeChild(el.querySelector(".tooltip")) } } //Sample Usage Tooltip(document.getElementById("mydiv"), "I'm a tooltip") #mydiv { position: relative; display: flex; align-items: center; justify-content: center; width: 120px; height: 50px; padding: 5px 10px; background-color: #e2f7ff; box-shadow: 1px 1px 1px 0px #cecece; } .tooltip { position: absolute; display: inline-block; white-space: nowrap; width: auto; height: auto; background-color: #11121b; color: white; padding: 4px 6px; border-radius: 3px; z-index: 99; left: 100%; top: 0; } <div id="mydiv"> This is just a div </div>

Share Improve this answer Follow edited Sep 12, 2019 at 2:19 KyleMit♦ 29.3k7272 gold badges501501 silver badges696696 bronze badges answered Sep 11, 2014 at 4:51 ProllyGeekProllyGeek 15.8k99 gold badges5454 silver badges7777 bronze badges Add a comment | 4

The simplest way would be to set position: relative on the containing element and position: absolute on the tooltip element inside the container to make it float relative to the parent (containing element). For example:

<div style="background: yellow;"> <div style="display: inline-block; position: relative; background: pink;"> <label>Name</label> <input type="text" /> <div style="background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0;"> Tooltip text </div> </div> </div> Share Improve this answer Follow edited Sep 11, 2014 at 9:40 answered Sep 11, 2014 at 9:30 designcisedesigncise 4,36211 gold badge2121 silver badges1919 bronze badges Add a comment | 4

Try this. You can do it with only css and I have only added data-title attribute for tooltip.

.tooltip{ position:relative; display: inline-block; } .tooltip[data-title]:hover:after { content: attr(data-title); padding: 4px 8px; color: #fff; position: absolute; left: 0; top: 110%; white-space: nowrap; border-radius: 5px; background:#000; } <div data-title="My tooltip" class="tooltip"> <label>Name</label> <input type="text"/> </div>

Share Improve this answer Follow answered Nov 20, 2017 at 4:11 ankita patelankita patel 4,25111 gold badge1414 silver badges2828 bronze badges Add a comment | 3 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI tooltip</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script> <script> $(function() { $("#tooltip").tooltip(); }); </script> </head> <body> <div id="tooltip" title="I am tooltip">mouse over me</div> </body> </html>

You can also customise tooltip style. Please refer this link: http://jqueryui.com/tooltip/#custom-style

Share Improve this answer Follow answered Jul 23, 2014 at 6:15 sanmansanman 78011 gold badge77 silver badges1515 bronze badges Add a comment | 3

A CSS3-only solution could be:

CSS3:

div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0; z-index: 1000;}

HTML5:

<div style="background: yellow;"> <div id="tooltip-1" data-title="Tooltip Text" style="display: inline-block; position: relative; background: pink;"> <label>Name</label> <input type="text" /> </div> </div>

You could then create a tooltip-2 div the same way... you can of course also use the title attribute instead of data attribute.

Share Improve this answer Follow edited Sep 11, 2014 at 9:58 answered Sep 11, 2014 at 9:53 designcisedesigncise 4,36211 gold badge2121 silver badges1919 bronze badges 2

• 1 Why the hell would you use an id to style something you want more instances of, and then use the [id^=tooltip] selector when you could have just used a class and .tooltip? – Stephan Muller Commented Sep 11, 2014 at 19:21
• You're right. I started off with ids, so followed it on and totally missed it. But hey, someone might benefit from it. Oh and by the way, we could even use an attribute selector for that matter to select "data-title" (e.g. div[data-title]) without having to add extra markup. – designcise Commented Sep 15, 2014 at 18:44

Add a comment | 3

you can do it with simple css... jsfiddle here you can see the example

below css code for tooltip

[data-tooltip] { position: relative; z-index: 2; cursor: pointer; } /* Hide the tooltip content by default */ [data-tooltip]:before, [data-tooltip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; } /* Position tooltip above the element */ [data-tooltip]:before { position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tooltip); text-align: center; font-size: 14px; line-height: 1.2; } /* Triangle hack to make tooltip look like a speech bubble */ [data-tooltip]:after { position: absolute; bottom: 150%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } /* Show tooltip content on hover */ [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } Share Improve this answer Follow answered Nov 19, 2017 at 13:37 satyajit routsatyajit rout 1,6511212 silver badges2121 bronze badges Add a comment | 2

Without using any API You can do something like this too by using pure CSS and Jquery Demo

HTML

<div class="pointer_tooltip"> Click & Drag to draw the area </div>

CSS

.pointer_tooltip{ width : auto; height : auto; padding : 10px; border-radius : 5px; background-color : #fff; position: absolute; }

Jquery

$(document).mousemove(function( event ) { var pageCoords = "( " + event.pageX + ", " + event.pageY + " )"; //set the actuall width $('.pointer_tooltip').width($('.pointer_tooltip').width()); var position_top = event.pageY+18; var position_left = event.pageX-60; var width=$('body').width()-$('.pointer_tooltip').width(); //check if left not minus if(position_left<0){ position_left=10; }else if(position_left > width){ position_left=width-10; } $('.pointer_tooltip').css('top',position_top+'px'); $('.pointer_tooltip').css('left',position_left+'px'); }); Share Improve this answer Follow answered Nov 30, 2015 at 4:25 Amin KodaganurAmin Kodaganur 66666 silver badges1919 bronze badges Add a comment | 2

You can make tooltip using pure CSS.Try this one.Hope it should help you to solve your problem.

HTML

<div class="tooltip"> Name <span class="tooltiptext">Add your tooltip text here.</span> </div>

CSS

.tooltip { position: relative; display: inline-block; cursor: pointer; } .tooltip .tooltiptext { visibility: hidden; width: 270px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 1s; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } Share Improve this answer Follow answered Jan 28, 2017 at 6:27 FaisalFaisal 4,76733 gold badges4242 silver badges5151 bronze badges 1

• I used this here. stackoverflow.com/questions/71320946/…. But didn't get any good result. Thanks. – abu abu Commented Mar 2, 2022 at 23:10

Add a comment | 2

Tooltips Position pure css

div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ text-align: center; } .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; //text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } .toolLeft { top: -5px; right: 105%; } .toolRight { top: -5px; left: 105%; } .toolTop { bottom: 100%; left: 50%; margin-left: -60px; } .toolBottom { top: 100%; left: 50%; margin-left: -60px; } <div> <div class="tooltip">Top <span class="tooltiptext toolTop">Tooltip text</span></div><br /> <div class="tooltip">Left <span class="tooltiptext toolLeft">Tooltip text</span></div><br /> <div class="tooltip">Right <span class="tooltiptext toolRight">Tooltip text</span></div><br /> <div class="tooltip">Bottom <span class="tooltiptext toolBottom">Tooltip text</span></div><br /> </div>

Share Improve this answer Follow answered Oct 15, 2017 at 17:37 anteloveantelove 3,3482828 silver badges2020 bronze badges Add a comment | 1

There are lots of answers to this question but still may be it will help someone. It is for all left, right, top, bottom positions.

Here is the css:

.m-tb-5 { margin-top: 2px; margin-bottom: 2px; } [data-tooltip] { display: inline-block; position: relative; cursor: help; padding: 3px; } /* Tooltip styling */ [data-tooltip]:before { content: attr(data-tooltip); display: none; position: absolute; background: #000; color: #fff; padding: 3px 6px; font-size: 10px; line-height: 1.4; min-width: 100px; text-align: center; border-radius: 4px; } /* Dynamic horizontal centering */ [data-tooltip-position="top"]:before, [data-tooltip-position="bottom"]:before { left: 50%; -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } /* Dynamic vertical centering */ [data-tooltip-position="right"]:before, [data-tooltip-position="left"]:before { top: 50%; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } [data-tooltip-position="top"]:before { bottom: 100%; margin-bottom: 6px; } [data-tooltip-position="right"]:before { left: 100%; margin-left: 6px; } [data-tooltip-position="bottom"]:before { top: 100%; margin-top: 6px; } [data-tooltip-position="left"]:before { right: 100%; margin-right: 6px; } /* Tooltip arrow styling/placement */ [data-tooltip]:after { content: ''; display: none; position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } /* Dynamic horizontal centering for the tooltip */ [data-tooltip-position="top"]:after, [data-tooltip-position="bottom"]:after { left: 50%; margin-left: -6px; } /* Dynamic vertical centering for the tooltip */ [data-tooltip-position="right"]:after, [data-tooltip-position="left"]:after { top: 50%; margin-top: -6px; } [data-tooltip-position="top"]:after { bottom: 100%; border-width: 6px 6px 0; border-top-color: #000; } [data-tooltip-position="right"]:after { left: 100%; border-width: 6px 6px 6px 0; border-right-color: #000; } [data-tooltip-position="left"]:after { right: 100%; border-width: 6px 0 6px 6px; border-left-color: #000; } /* Show the tooltip when hovering */ [data-tooltip]:hover:before, [data-tooltip]:hover:after { display: block; z-index: 50; }

And the HTML tag can be like this:

<p data-tooltip-position="right" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="left" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="top" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="bottom" data-tooltip="Some tooltip text here" title="">Text Here</p>

Share Improve this answer Follow answered Mar 24, 2017 at 7:02 M JM J 2,98144 gold badges2525 silver badges3636 bronze badges Add a comment | 1

You can try bootstrap tooltips.

$(function () { $('[data-toggle="tooltip"]').tooltip() })

further reading here

Share Improve this answer Follow answered Nov 22, 2017 at 9:12 1inMillion1inMillion 6577 bronze badges Add a comment | 1

And my version

.tooltip{ display: inline; position: relative; /** very important set to relative*/ } .tooltip:hover:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); /**extract the content from the title */ left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px; } .tooltip:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; }

Then the HTML

<div title="This is some information for our tooltip." class="tooltip">bar </div> Share Improve this answer Follow edited Apr 5, 2020 at 7:03 Federico Navarrete 3,26455 gold badges4747 silver badges8686 bronze badges answered Nov 17, 2017 at 16:47 Olubodun AgbalayaOlubodun Agbalaya 49344 silver badges1010 bronze badges Add a comment | 0

I created a kind of formula for it. First this is the html

<div class="tooltip-container"> <button class="tooltip-tarjet"> My Button </button> <div class="tooltip-element"> This is my tooltip content right here... </div> </div>

Now the css for it

.tooltip-container { /* it contains the tooltip message and the one firing the tooltip * it has position relative since it allows for a better responsive positioning * of the tooltip-element */ display: inline-block; position: relative; flex-direction: row; } .tooltip-tarjet:hover + .tooltip-element { /* this selector rule matches the tooltip-element right after * tooltip-tarjet at a hover action * */ display: inline-block; position: absolute; background-color: #869096; color: white; opacity: 1; transition: all 1s; } .tooltip-element { /* here goes the tooltip-element styles and positioning, now your * tooltip element will always remain to your desired positionno matter * the screen size at hand * */ display: none; opacity: 0; text-align: center; padding: 7px; z-index: 10; width: 200px; left: -60px; bottom: 48px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; font-size: 12px; line-height: 1.5; } Share Improve this answer Follow answered Oct 22, 2021 at 20:20 Pepe AlvarezPepe Alvarez 1,60411 gold badge1111 silver badges1818 bronze badges Add a comment | Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

Not the answer you're looking for? Browse other questions tagged

• javascript
• html
• css
• tooltip

or ask your own question.

• The Overflow Blog
• The ghost jobs haunting your career search
• Breaking up is hard to do: Chunking in RAG applications
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Linked

0 Is there any CSS code to show a text below the cursor if we hover and place it over for some time? 1 What is this popup thing when you hover over something? -2 HTML5/Bootstrap - How do i add tooltip for bootstrap glyphicon icons? 6 Tooltip CSS ONLY: focus and hover prevents access to following button 6 How to join after cornerRadius is provided for piecharts in recharts 2 Tooltip not displaying on fontawesome icon button 4 Make title tag "popup" show when using html iframe 0 Changing class based on iframe src 2 Need tooltip on mouseover in three.js 0 Style the part of data-tooltip text into bold See more linked questions

Related

2 Basic Tooltip (jQuery) 0 Jquery Tooltip and CSS 4 Tooltip for HTML content 3 add data-tooltip with jquery 4 How to add tooltip in html? 13 Making a simple tooltip with only HTML and CSS 0 Adding tooltips in jQuery 0 How To Easily Insert Tooltips in HTML? 0 How to integrate a tooltip into my <div> area? 2 Add tooltip to list item

Hot Network Questions

• Ginzburg-Landau Theory and the Bose-Einstein Condensate
• Why kinetically controlled enolate is not formed?
• Why are my giant carnivorous plants so aggressive towards escaped prey?
• Why does energy stored in a capacitor increase with the square of voltage?
• Who originated the paged database structure with extents?
• Optimizing C++ Implementation of the Simulated Bifurcation Algorithm (SB)
• What movie has a classroom clock tick backwards?
• Perturbation to a Dirac delta potential well
• Choosing between attending conference or PhD interview when a little time gap between both
• How to troubleshoot finding a derallieur hanger?
• Why would a brief power-down NOT constitute a reboot?
• Is there any theoretical work on representation in machine learning?
• The global wine drought that never was (title of news text that seems like truncated at first sight)
• Can anyone identify this early biplane from 1920?
• MANOVA with some independent variables being categorial and some being interval
• Does Mahayana Buddhism hold that the Buddha derived his Philosophy from Vedanta?
• Why do most philosophers of religion believe in God?
• Can I use bootstrapping for small sample sizes to satisfy the power analysis requirements?
• Pseudopotential PBE and PBEsol
• Name that logic gate!
• How can we color each pair of contours with specific color?
• Who is this man being noticed by Robert in this scene?
• How to make an iron star visually appealing
• Fill this partially-dotted Sudoku so that two sums are equal

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

default