3

I need some help. How can I manage a title of a hyperlink for example if I got a hyperlink like this

<a href="#" title="Hello">Press here</a>

How can I change the font and the size of the word 'Hello'?

icedwater
  • 4,701
  • 3
  • 35
  • 50
user00239123
  • 270
  • 4
  • 16
  • 2
    Duplicate: http://stackoverflow.com/q/2011142/1420197 – Ionică Bizău Jul 04 '13 at 09:04
  • I think you need to be more precise in terms of your question, if you are looking for how to edit the title attribute, which is the hover text for the link, in terms of CSS, use @Johnツ answer, otherwise you will need to determine if you want to style everything that has a title of 'Hello' or can be done by classes – Andrew Morris Jul 04 '13 at 09:07

3 Answers3

4

You can use a[data-title]:hover to style it (instead of title).

Example:

HTML

<a href="#" data-title="Nice CSS title">Test</a>

CSS

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

JSFIDDLE

Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
  • This is not what OP asks. You can style ':after' but then you will have two titles, which looks worse as it was before. – dfsq Jul 04 '13 at 09:10
  • +1 Although this isn't really styling the browsers' title popup, but rather creating a new one. The issue with this is that you now have two title popups... – xec Jul 04 '13 at 09:11
  • @dfsq I guess that it's the browser default. But this is the closest solution... – Ionică Bizău Jul 04 '13 at 09:12
  • 2
    You can get even closer if you use 'data-title="Hello"' instead of title. `content: attr(data-title);` This way title will not show up. – dfsq Jul 04 '13 at 09:13
  • I think this is a good idea. Just change `title` attribute with `tip`, and browser's title popup won't display. see:http://jsfiddle.net/tDQWN/1/ – ijse Jul 04 '13 at 09:30
2

Well, you can't it's a browser default .. however what you can do is use a small jQuery plugin for tooltips & you will have total control over the look of the elements appearing on hover. Check this link for example

Zyad Sherif
  • 933
  • 9
  • 22
0

Hy, you can't change the styling of Title attribute inside a tag. I mean you can but there's some browser incompatibilities. I think the best solution is that you make a specific class for that a tag and inside that a tag put span. Something like this:

<a href="#" class="pop">Press here <span>Hello</span></a>

a.pop {
color: blue;
text-decoration: none;
position: relative
}

a.pop:hover {
text-decoration: underline;
}

a.pop span {
display:none;
}

a.pop:hover span {
display: block;
position: absolute;
left:0;
z-index:100;
background: grey;
padding: 5px 10px;
font-size:13px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration: none;
}
Petar Simic
  • 54
  • 1
  • 2