How can i create tooltips bigger than one row?

Question

I have html elements for which i want to show more information in a tooltip on hover than actually fits nicely into one short row.

How can i create tooltips bigger than one row? (something that looks like a right click menu in the brower - but without function)

It is important that i have control over the break point because each line to be shown in the tooltip might hold text of different length.

Example:

<div title="1.Exampleline1\n2.Exampleline2\n3.Exampleline3 this one is longer"> //three rows - not one!

This is an example tooltip:

enter image description here

EDIT: It should work in all browsers (FF too)!

score 2 · Accepted Answer · edited May 23 '17 at 12:13

2

If you are targeting only browsers that support the latest specification or only IE and Safari, you can use (the carriage return). Otherwise look into CSS tooltips.

This similar question about using carriage returns in tooltips has more information.

edited May 23 '17 at 12:13

Community

1
1

answered Feb 25 '11 at 15:20

justkt

14,610
8
42
62

it needs to run in Firefox too – Thariama Feb 25 '11 at 17:07
@Thariama - then I'd look into using CSS as described in the pages returned by the Google think or one of the other answers. – justkt Feb 25 '11 at 17:19
problem here will be, that i need to control the return point - the lines shown in the tooltips do need to hold text of different length – Thariama Feb 25 '11 at 17:28
@Thariama - are you saying that you need the text to auto-wrap, or that you have an arbitrary carriage return that you don't set, or something else? I don't quite understand. – justkt Feb 25 '11 at 17:31
No, auto-wrap won't help me (so no pure css solution seems to work). I need to be able to tell the tooltip at which points in the tooltip-content(text) he should break in order to create a tooltip containing several rows of text of different length. – Thariama Feb 25 '11 at 17:33
@Thariama - try [this one](http://www.texsoft.it/index.php?c=software&m=sw.js.htmltooltip&l=it) with uses the `
` tag for arbitrary breaks. – justkt Feb 25 '11 at 17:38
+1 this solution works, i still have to fill the div dynamically, but that won'T be a big problem – Thariama Feb 25 '11 at 18:00

Luca Filosofi · Answer 2 · 2011-02-25T19:09:11.357

2

UPDATED Tested in FF / Chrome

DEMO 2: http://jsbin.com/eharu5/3

CSS

a.tooltip {
    position: relative;
}
a.tooltip span em {
    font-style: normal;
    display: block;
    border-bottom: 1px dotted #000;
}
a.tooltip span {
    white-space: nowrap;
    border: 1px solid #CCC;
    color: #333;
    padding: 5px;
    background: #FFF;
    left: 50%;
    top: 0;
    width: auto;
    position: absolute;
    display: none
}
a.tooltip:hover span {
    display: block
}
a.tooltip span br {
    display: none
}

HTML

<a class="tooltip">Hello World
  <span>
    <em>Lorem Ipsum Est Lorem <br />Ipsum Est Lorem Ipsum Est</em>
    <em>Lorem Ipsum Est</em> 
    <em>Lorem Ipsum Est</em>
    <em>Lorem Ipsum Est Lorem Ipsum Est</em>
    <em>Lorem Ipsum Est</em>
  </span>
</a>

edited Feb 25 '11 at 19:09

answered Feb 25 '11 at 15:21

Luca Filosofi

30,905
9
70
77

it would be great if i had every em-tag in a new row - is that possible? – Thariama Feb 25 '11 at 16:40
@Thariama: it is not required it will work also if you have it like this: `Hello WorldLorem Ipsum EstLorem Ipsum Est Lorem Ipsum EstLorem Ipsum EstLorem Ipsum Est` – Luca Filosofi Feb 25 '11 at 17:06
well, it is being display in more than one row, but i have no power over the linebreak (the second row should be able to hold more than the first row) – Thariama Feb 25 '11 at 17:27
@Thariama: hey bro sry for the delay, for avoid the line-break use ` br{ display:none }`, anyway just for sake can you post a snippet of your code so i can try to fix it? tnk's – Luca Filosofi Feb 25 '11 at 18:47

score 2 · Answer 3 · answered Feb 25 '11 at 15:23

2

If you can't find a good solution using only HTML, there's a nice way of doing it with JavaScript (jQuery actually). You should check out this nice tutorial by yensdesign : http://yensdesign.com/2009/01/how-to-display-tips-creating-jquery-plugin/

answered Feb 25 '11 at 15:23

3rgo

3,115
7
31
44

there are no multiline approaches treated, can you give an example? – Thariama Feb 25 '11 at 18:01
Last example, line 8 : They use a `
` tag to go to the next line :p – 3rgo Feb 28 '11 at 19:42

score 0 · Answer 4 · answered Feb 25 '11 at 15:20

0

You can't make the tooltip bigger, but you can make DIV float near the cursor when they hover over it.

http://snipplr.com/view/3624/show-floating-div-near-cursor-on-mouseover-hide-on-mouseout/

answered Feb 25 '11 at 15:20

Thyamine

1,228
7
10

score 0 · Answer 5 · answered Feb 25 '11 at 15:31

0

I use overlib for this sort of things as it includes options like making the tooltips sticky, intelligently positioning them (eg to the left if the source is at the eight edge of the browser window etc) and you can style them easily.

http://www.bosrup.com/web/overlib/

answered Feb 25 '11 at 15:31

derekcohen

1,514
4
17
34

this looks good, except for the case that i want to display a tooltip holding several rows containing specified text. How can i do this using overlib? do oyu have an example? – Thariama Feb 25 '11 at 17:07
the contents of the overlib tooltip can be any HTML so you can put in divs, images, forms etc – derekcohen Feb 25 '11 at 21:36

How can i create tooltips bigger than one row?

5 Answers5