18

I was wondering if it was possible to style a title:

<a href="#" title="This is a title">Hello</a>

The styling question has two aspects:

  • Text formatting / encoding (Which I guess is possible SO does it in questions*).
  • The Tooltip styling, can you make it bigger? other colors? etc.

And the other issue I have is how do you "point" to title?

  • From CSS
  • From Javascript / jQuery

Thanks in advance!

*What I ment by text formatting / encoding:

alt text

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
Trufa
  • 39,971
  • 43
  • 126
  • 190
  • possible duplicate of [How to change the style of Title attribute inside the anchor tag?](http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag) for the style part, http://stackoverflow.com/questions/358874/how-can-i-use-a-carriage-return-in-a-html-tooltip for the newline part. – Ciro Santilli OurBigBook.com Aug 26 '14 at 15:14

6 Answers6

14

You can put newlines in your title attribute via HTML entities to force a line break in the text. Most browsers these days support this. This is the only change you can make to the native tooltip display of the browser.

<a href="real_link" title="check&#13;&#10;this&#13;&#10;out">foo bar</a>

See the above example on a web page.

As others have pointed out, there exist a large number of plugins for various JS libraries for making custom HTML tooltips which are styleable. Here is the top hit for the Google search "jquery tooltip plugin", reviewing 10 such plugins.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • Example is slightly incorrect: According to the HTML standard the way to create multi-line title is by using `LF`, not `CR+LF`. Ref: [the spec](https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute) – peterh Oct 21 '22 at 08:56
10

You can create a CSS-only tooltips using the :after and :hover pseudo-class:

<a href="#" class="class-with-tooltip">Link</a>

.class-with-tooltip:hover:after{
    content: 'Tooltip';
    position: absolute;
    padding: 5px;
    border: 1px solid gray;
    background: whitesmoke;
    font-size: 14px;
}

I'm not sure how this going to work in old browsers, but it works in all major browsers.

The position: absolute; is needed to prevent generated content from pushing the markup after the element.

Shimon Rachlenko
  • 5,469
  • 40
  • 51
  • 1
    this solution does not apply to :text(like input, select) elements, but it is still a good solution. – hiway Dec 10 '13 at 12:40
  • 1
    Even better would be to use `content: attr(title)`; but with both ways you'll still probably want to supress the default browser behaviour so JavaScript is still probably desired. – AndFisher Jun 05 '17 at 09:15
  • main title is showing also , so now I have two of them – integrater Mar 14 '23 at 11:25
2

It is not possible in CSS, since the tooltip popup is an OS native thingy, but please have a look at this tutorial (article + screencast + source code): http://net.tutsplus.com/articles/news/you-still-cant-create-a-jquery-plugin/ It describes how to roll your very own custom jQuery plugin that will do exactly what you are asking for.

mingos
  • 23,778
  • 12
  • 70
  • 107
1

You can't use straight CSS on the default title attribute, but you can use many JQuery tooltip plugins available to create new tool tips and those you can style with CSS.

http://www.1stwebdesigner.com/freebies/stylish-jquery-tooltip-plugins-webdesign/

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
0

You can do it with jQuery but there's no need for a plugin.

Assign the element(s) a class and then, after the document is ready, set the title attribute for that class. For instance...

$(".className").attr("title", "Your title here.");
Alan M.
  • 1,309
  • 2
  • 19
  • 29
-1

No. There is no way you can style the "title" attribute of any HTML element. However, I would agree that there are many jquery plugins available to style the tooltip using the title attribute.

Try this. http://flowplayer.org/tools/tooltip/index.html

mr.b
  • 2,708
  • 8
  • 39
  • 64