CODEWITHSUNDEEP
html
Bloodhound
Bloodhound

Reputation: 2966

How to set the size of html title tag

I have a following html code 

<a href="www.example.com" title="example">Link</a>

what i want is to change the size background color and other properties of title. is it possible?

Upvotes: 4

Views: 8636

Answers (4)

Chitra
Chitra

Reputation: 11

The anchor's title attribute is the browser default tooltip text and it cannot be styled using any properties.

To do so, we have some tricky code using jquery and css.

Refer http://www.electrictoolbox.com/style-html-anchor-title-jquery-css/

Upvotes: 1

3pic
3pic

Reputation: 1219

It is impossible.

But you could use something else, instead of "native" title. Add your own custom attribute and do some javascript/css to display a tooltip.

ex:

<a href="linkstowhatyouwant" data-mytitlecustom="click here" class="tooltipped">

and with jQuery/Javascript/CSS, you detect when mouse is over a #tooltipped element. And you display the tooltip that you can design the way you want with css.

Or maybe just find such a plugin somewhere, I m sure it exists... e.g. https://jqueryui.com/tooltip/

Upvotes: 0

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

I don't think you can style the title, but you can emulate its functionality by using a data attribute with a CSS :after pseudo-element on hover:

a {
  position: relative;
}

a:hover:after {
  content: attr(data-title);
  position: absolute;
  font: 10px verdana;
  top: -110%;
  left: 0;
  background: #ace;
  color: black;
  box-sizing: border-box;
  border: 1px solid gray;
  border-radius: 20%;
  padding: 3px;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<a href="www.example.com" data-title="example">Link</a>

Upvotes: 4

mad_manny
mad_manny

Reputation: 1091

The styling of the anchor's title is handled by the user agent. If you want to style a tool tip yourself, you would have to implement it.

For more information see here

Upvotes: 2

Related Questions