Rectangle 27 93

Can you use simply the SVG <title> element and the default browser rendering it conveys? (Note: this is not the same as the title attribute you can use on div/img/spans in html, it needs to be a child element named title)

<p>Mouseover the rect to see the tooltip on supporting browsers.</p>

<svg xmlns="http://www.w3.org/2000/svg">
  <rect>
    <title>Hello, World!</title>
  </rect>
</svg>

Alternatively, if you really want to show HTML in your SVG, you can embed HTML directly:

rect {
  width: 100%;
  height: 100%;
  fill: #69c;
  stroke: #069;
  stroke-width: 5px;
  opacity: 0.5
}

foreignObject {
  width: 100%;
}

svg div {
  text-align: center;
  line-height: 150px;
}
<svg xmlns="http://www.w3.org/2000/svg">
  <rect/>
  <foreignObject>
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>
        Hello, <b>World</b>!
      </div>
    </body>      
  </foreignObject>
</svg>

but then you'd need JS to turn the display on and off. As shown above, one way to make the label appear at the right spot is to wrap the rect and HTML in the same <g> that positions them both together.

getBoundingClientRect()
foreignObject

javascript - How to add a tooltip to an svg graphic? - Stack Overflow

javascript svg d3.js tooltip
Rectangle 27 679

<div title="This is my tooltip">

The above link gives you 12 options for tooltips.

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

@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 I agree. That's why you should NOT style your tooltips with "cursor: pointer;" (encourages clicking) which I see too often.

@RayL Absolutely. From the wording in your first comment I wasn't sure whether you were encouraging it or not - glad we're all on the same page!

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

javascript - How to add a tooltip to a div - Stack Overflow

javascript html css css3 tooltip
Rectangle 27 662

<div title="This is my tooltip">

The above link gives you 12 options for tooltips.

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

@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 I agree. That's why you should NOT style your tooltips with "cursor: pointer;" (encourages clicking) which I see too often.

@RayL Absolutely. From the wording in your first comment I wasn't sure whether you were encouraging it or not - glad we're all on the same page!

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

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - How to add a tooltip to a div - Stack Overflow

javascript html css css3 tooltip
Rectangle 27 195

with CSS only

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

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

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

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

Define :hover:before hovering state of each [tooltip] to make it visible:

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

Apply your styles (color, size, position etc) to the tooltip object; end of 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, tooltip-persistent, and a simple rule:

[tooltip]:not([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 may 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.

@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.

jesus take the wheel

No way! That's really cool. I did not know that!!

I love that there are two great answers to this question. One simple and the other customizable.

javascript - How to add a tooltip to a div - Stack Overflow

javascript html css css3 tooltip
Rectangle 27 172

with CSS only

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

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

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

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

Define :hover:before hovering state of each [tooltip] to make it visible:

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

Apply your styles (color, size, position etc) to the tooltip object; end of story.

In the demo I've defined another rule to specify if the tooltip must disappear when hovering over him but outside of the parent, with another custom attribute, tooltip-persistent, and a simple rule:

[tooltip]:not([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 may be adding a bit of javascript to calculate the mouse position and add it to the pseudo elements, by changing a class applied to him.

@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.

jesus take the wheel

No way! That's really cool. I did not know that!!

javascript - How to add a tooltip to a div - Stack Overflow

javascript html css css3 tooltip
Rectangle 27 65

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

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.

true, but if the OP wants to style the tooltip in some way, then a CSS implementation is better

fair enough. But sometimes one needs to write an essay in a tooltip, and in that situation the title attribute just doesn't cut it.

@YvonneAburrow ... That's why there's multiple upvoted answers. If you need something simple and quick, title works. There are other answers that are more complex if you need something more complex. I'm honestly not sure what point you are trying to make here.

javascript - How to add a tooltip to a div - Stack Overflow

javascript html css css3 tooltip
Rectangle 27 63

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

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.

javascript - How to add a tooltip to a div - Stack Overflow

javascript html css css3 tooltip
Rectangle 27 8

You can use the title element as Phrogz indicated. There are also some good tooltips like jQuery's Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (which can be used to replace all title elements), Bob Monteverde's nvd3 or even the Twitter's tooltip from their Bootstrap http://twitter.github.com/bootstrap/

javascript - How to add a tooltip to an svg graphic? - Stack Overflow

javascript svg d3.js tooltip
Rectangle 27 181

You can wrap the disabled button and put the tooltip on the wrapper:

<div class="tooltip-wrapper" data-title="Dieser Link fhrt zu Google">
  <button class="btn btn-default" disabled>button disabled</button>
</div>

If the wrapper has display:inline then the tooltip doesn't seem to work. Using display:block and display:inline-block seem to work fine. It also appears to work fine with a floated wrapper.

UPDATE Here's an updated JSFiddle that works with the latest Bootstrap (3.3.6). Thanks to @JohnLehmann for suggesting pointer-events: none; for the disabled button.

This is what the docs suggest and it works if you use the inline-block trick suggested here!

However, if your button is part of a button group then wrapping the button throws off your aesthetics :( Anyway to overcome this issue for btn-groups?

Cody, for btn-groups, I found you can't wrap them, or they won't get rendered correctly. I set pointer-events to 'auto' (just targeted with: "div.btn-group > .btn.disabled { pointer-events: auto; }" just in case), and also hooked up the onclick event of the button so it just returns false. Felt hacky, but it worked for our app.

This does not seem to work in bootstrap 3.3.5. JSFiddle

javascript - How to enable bootstrap tooltip on disabled button? - Sta...

javascript jquery twitter-bootstrap tooltip twitter-bootstrap-tooltip
Rectangle 27 178

You can wrap the disabled button and put the tooltip on the wrapper:

<div class="tooltip-wrapper" data-title="Dieser Link fhrt zu Google">
  <button class="btn btn-default" disabled>button disabled</button>
</div>

If the wrapper has display:inline then the tooltip doesn't seem to work. Using display:block and display:inline-block seem to work fine. It also appears to work fine with a floated wrapper.

UPDATE Here's an updated JSFiddle that works with the latest Bootstrap (3.3.6). Thanks to @JohnLehmann for suggesting pointer-events: none; for the disabled button.

This is what the docs suggest and it works if you use the inline-block trick suggested here!

However, if your button is part of a button group then wrapping the button throws off your aesthetics :( Anyway to overcome this issue for btn-groups?

Cody, for btn-groups, I found you can't wrap them, or they won't get rendered correctly. I set pointer-events to 'auto' (just targeted with: "div.btn-group > .btn.disabled { pointer-events: auto; }" just in case), and also hooked up the onclick event of the button so it just returns false. Felt hacky, but it worked for our app.

This does not seem to work in bootstrap 3.3.5. JSFiddle

javascript - How to enable bootstrap tooltip on disabled button? - Sta...

javascript jquery twitter-bootstrap tooltip twitter-bootstrap-tooltip
Rectangle 27 11

Here's a working template for you. My guesses as to what was wrong:

  • If you don't have a local server running, you need to add the http: to the CDN addresses.
  • You may have been trying to initialize the tooltip in the head tags. Problem is that the document probably wasn't ready.

The following works fine.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script>
    $( document ).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
    });
    </script>
  </body>
</html>

Wow, you solve it man, I needed to initialize it after CDN, but why it didn't worked when the CDN was in header and initialization was after link? @jme11

Because it was looking for an element with a data-toggle="tooltip" attribute and the element wasn't loaded yet. Think of the page as loading top to bottom. Anyway, it's better to put your js at the bottom of the page before your closing body tag. For users, this will give the impression of faster load times because the page content loads without having to wait for the javascript to load.

Interesting, Thanks and Cheers! now trying to Enable popovers, do you know if i have initialize it as well? @jme11

Yes, same concept, just add the initialization inside the same document ready before the closing }); bit.

wow that was nice and easy. Thank you man.

javascript - Bootstrap tooltip doesn't show style of the tooltip, only...

javascript jquery html twitter-bootstrap
Rectangle 27 15

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

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

Question was for a html solution not some .net server-side magic.

The .net code is in there to show truncation. The approach using html and css is still valid.

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 <%# ... %>

javascript - How to add a tooltip to a div - Stack Overflow

javascript html css css3 tooltip
Rectangle 27 15

Here's a nice jQuery Tooltip:

  • 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>

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.

javascript - How to add a tooltip to a div - Stack Overflow

javascript html css css3 tooltip
Rectangle 27 14

Here's a nice jQuery Tooltip:

  • 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>

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.

javascript - How to add a tooltip to a div - Stack Overflow

javascript html css css3 tooltip
Rectangle 27 14

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

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

Question was for a html solution not some .net server-side magic.

The .net code is in there to show truncation. The approach using html and css is still valid.

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 <%# ... %>

javascript - How to add a tooltip to a div - Stack Overflow

javascript html css css3 tooltip
Rectangle 27 9

Remember also that Bootstrap Tooltip don't like jQuery UI (there are a few names conflict and 'tooltip' is one of them).

The solution is changing the script loading order: jQuery UI first, bootstrap.js after.

This was my issue. I am not using jQuery UI, but a library we use (jQuery fileupload) does.

Huge thanks! I had a problem with data-html attribute, it just didn't work, and scripts reordering helped.

javascript - Bootstrap tooltip doesn't show style of the tooltip, only...

javascript jquery html twitter-bootstrap
Rectangle 27 7

tspan:nth-child(2n) {
  display: block;
}
<svg width="100" height="100">
    <rect fill="red" x="0" y="0" width="50" height="50">
      <title><tspan>This is line 1</tspan>
<tspan>This is line 2</tspan>
<tspan>This is line 3</tspan>
<tspan>This is line 4</tspan></title>
    </rect>
  </svg>

There are two subtleties:

  • Chrome renders whitespace around the <tspan> elements, so they should not be indented;
  • IE11 renders consecutive <tspan> elements with display:block with double line spacing (I couldn't find a CSS trick to avoid this), so the style is applied to every other element.

This version renders as four lines on Chrome 41, Safari 8, Firefox 37 (OSX Yosemite), and IE11 (Windows 7). Unfortunately it still renders as a single line in IE9-10. If you need multi-line display here I'd suggest your own <title> rendering based on mouse events.

Note that, whilst text content elements do respect the display property, the presentation of tooltips is entirely up the browser, so this technique may not work in the future.

...'desc' and 'title' elements are not rendered as part of the graphics. User agents may, however, for example, display the 'title' element as a tooltip, as the pointing device moves over particular elements.

desc
title

We ended up just telling the customer that they need to live with the single line. We use the bootstrap tooltip (angular directive version) which is fine with HTML, but didn't play nicely inside our D3 directives. So stuck with title. I don't have time to test this, at the moment, but it sounds reasonable, so I'm going to mark it as the selected answer (well it's the only one too LOL) Thanks for your response.

javascript - D3 multi-line tooltip for SVG element - Stack Overflow

javascript html svg d3.js
Rectangle 27 7

tspan:nth-child(2n) {
  display: block;
}
<svg width="100" height="100">
    <rect fill="red" x="0" y="0" width="50" height="50">
      <title><tspan>This is line 1</tspan>
<tspan>This is line 2</tspan>
<tspan>This is line 3</tspan>
<tspan>This is line 4</tspan></title>
    </rect>
  </svg>

There are two subtleties:

  • Chrome renders whitespace around the <tspan> elements, so they should not be indented;
  • IE11 renders consecutive <tspan> elements with display:block with double line spacing (I couldn't find a CSS trick to avoid this), so the style is applied to every other element.

This version renders as four lines on Chrome 41, Safari 8, Firefox 37 (OSX Yosemite), and IE11 (Windows 7). Unfortunately it still renders as a single line in IE9-10. If you need multi-line display here I'd suggest your own <title> rendering based on mouse events.

Note that, whilst text content elements do respect the display property, the presentation of tooltips is entirely up the browser, so this technique may not work in the future.

...'desc' and 'title' elements are not rendered as part of the graphics. User agents may, however, for example, display the 'title' element as a tooltip, as the pointing device moves over particular elements.

desc
title

We ended up just telling the customer that they need to live with the single line. We use the bootstrap tooltip (angular directive version) which is fine with HTML, but didn't play nicely inside our D3 directives. So stuck with title. I don't have time to test this, at the moment, but it sounds reasonable, so I'm going to mark it as the selected answer (well it's the only one too LOL) Thanks for your response.

javascript - D3 multi-line tooltip for SVG element - Stack Overflow

javascript html svg d3.js
Rectangle 27 11

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.

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/

<div data-tooltip="your tooltip message"></div>
*[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;
}
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  }'

}

javascript - How to add a tooltip to a div - Stack Overflow

javascript html css css3 tooltip
Rectangle 27 85

This can be done via CSS. The "pointer-events" property is what's preventing the tooltip from appearing. You can get disabled buttons to display tooltip by overriding the "pointer-events" property set by bootstrap.

.btn.disabled {
    pointer-events: auto;
}

Just a side note, this only works for IE in 11 or higher. Pretty much all other modern browsers have supported it for a while. See: caniuse.com/#feat=pointer-events

[disabled]

In a bootstrap3 angular app, after applying this style, the disabled button is now clickable

I tried to use this on an anchor with btn class. It looked disabled and the tooltip worked, but I could click on the link (should not be possible).

javascript - How to enable bootstrap tooltip on disabled button? - Sta...

javascript jquery twitter-bootstrap tooltip twitter-bootstrap-tooltip