CODEWITHSUNDEEP
htmlcss
G.Spansky
G.Spansky

Reputation: 902

How to change HTML span title font size?

Im trying to change font size of span title element. I was googling for good example, and I have found this one: link

But even if title is being shown inside gray tooltip, the second one appears: enter image description here

My question is: how to style this second one tooltip (yellow one) by increasing its font size?

My span looks like this:

<span title=${code} ></span>

Upvotes: 0

Views: 12022

Answers (2)

Jay
Jay

Reputation: 153

[title]:hover:after{
  content: attr(title);
  background:yellow;
  padding: 5px;
  border-radius:5px;
  border:1px solid;
}
<span title="jayeshshelar.com">Jayesh Shelar</span>

Upvotes: 2

Daniele Petrarolo
Daniele Petrarolo

Reputation: 458

I have test your fiddle, it seems that this problem happened only on FireFox. Simply you show 1 box (you content write in CSS) and the browser-standard title attribute, that appear on hover.

If you don't care about the real "title" attribute, you can use a work-around like this: http://jsfiddle.net/tDQWN/9078/

Just change 3 lines of code:

The output of your HTML:

<span title=${code} ></span>

And the CSS of the :after content:

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

In simple words, I have just change the "title" attribute in a "data-title" attribute. In this case, the browser don't output that small title text because it isn't a standard "title" attribute. Now you have to make the style of just one box.

Upvotes: 2

Related Questions