How to control position and colour of title text in HTML href element?

Question

Using HTML and CSS, but not JS, how can I alter the position, text colour and background colour of the title text that shows when a link is hovered over? I would like to centre the title text below the midpoint of the link text.

a:link {text-decoration: none;
color: #000;
border-bottom: 2px solid #f00;  }

a:hover, a:active
{text-decoration: none;
color: #f00;
border-bottom: 2px solid #f00;  }

a:visited {text-decoration: none;
color: black;
border-bottom: 2px solid #888;  }

<div>
<a href="#" title="hello">text</a>
</div>

You can't. You'd need to make a custom tooltip to do that. There are libraries for that if you don't want to roll your own. — Michael Coker, Feb 01 '17 at 01:33

zer00ne · Accepted Answer · 2017-02-01T15:44:26.480

UPDATE

After finally figuring out what OP meant is that the solution originally works fine with one exception, the attribute title's default behavior is not suppressed, therefore an extra tooltip follows the customized tooltip.

The solution is this: Do not use the title attribute Without JavaScript you are at the mercy of many default behaviors you cannot control with CSS. But don't get discouraged because there is an alternative that you can use that's not only valid and semantic (if labeled correctly,) it is functionally flexible as well.

Use the data-* attribute (* = any string in lower caps no spaces--use dashes instead.)

We can use any string at any length
We can name it anything we want (within the previously stated restrictions)
We can have as many data-* attributes on an element and...
...that element can be any element.

See the last two examples in Snippet below.

Use the ::before and ::after pseudo-elements with the attr() value. It's not limited to title which is nice, take a look at the Snippet below.

SNIPPET

div {
  margin: 50px;
  position: relative;
}
a:link {
  text-decoration: none;
  color: #000;
  border-bottom: 2px solid #f00;
}
a:visited {
  text-decoration: none;
  color: black;
  border-bottom: 2px solid #888;
}
a:hover,
a:active {
  text-decoration: none;
  color: #f00;
  border-bottom: 2px solid #f00;
}
a:hover::after {
  content: attr(title);
  color: blue;
  position: absolute;
  top: 3ex;
  left: -.5ch;
  border-bottom: 0 none transparent;
}
a[name]:hover::after {
  content: attr(href);
  background: black;
  color: cyan;
  border-bottom: 0 none transparent;
}
a[target]:hover::after {
  content: attr(target);
  left: -1.5ch;
  background: red;
  color: white;
  border-bottom: 0 none transparent;
}
a[data-node]:hover::after {
  content: attr(data-node);
  left: -4ch;
  border-bottom: 0 none transparent;
  background: black;
  color: gold;
}
a[data-anything]:hover::after {
  content: attr(data-anything);
  left: 0;
  border-bottom: 0 none transparent;
  color: purple;
  width: 8ch;
}

<div>
  <a href="#" title="hello">text</a>
</div>


<div>
  <a href="#" title="world!">text</a>
</div>


<div>
  <a href="h++p://nowhere.lost" name='destination'>Where do I go to?</a>
</div>

<div>
  <a href="#" target="#anchorPoint">Target</a>
</div>

<div>
  <a href="#" data-node="anyArbitraryString">Data-*</a>
</div>

<div>
  <a href="#" data-anything="For anything you want represented by a string">Use Data-*</a>
</div>

Many thanks for this, but it is still showing the default title box as well as the blue text. — , Feb 01 '17 at 02:01
@ruffle Then I must've misinterpreted your question, please explain further. — zer00ne, Feb 01 '17 at 02:10
To take your first example here, I mean to have the blue text but not the default title box which is showing up slightly below and to the right of it. The way to achieve this may be to use a span. — , Feb 01 '17 at 02:14
You mean that red line? It is annoying, I think I know what to do there... — zer00ne, Feb 01 '17 at 02:20
No, not the red line, although that is annoying. When I hover over "text", I get a blue "hello" underneath it and then a short while later the default title box, in black text on white background, also appears, also saying "hello". — , Feb 01 '17 at 02:22
That default text you don't want it when hovered? Ok updated, what you do is on `:hover` you change the `color: transparent`, or `opacity:0;` or `visibility: hidden'`, `display:none` is feasible but in it's absence, a `display:none` element would disrupt layout if you haven't properly prepared for it. — zer00ne, Feb 01 '17 at 02:28
@ruffle ok I totally understand what you are saying, please see update. — zer00ne, Feb 01 '17 at 15:47

How to control position and colour of title text in HTML href element?

1 Answers1