Add Title Attribute from CSS

add title attribute from css

You can't. CSS is a presentation language. It isn't designed to add content (except for the very trivial with :before and :after).

Styling HTML Title attribute using CSS

You can do a custom solution using CSS3.

Take a look at How to change the style of Title attribute inside the anchor tag?. But might I suggest that you use a custom field like 'data-title' so the default browser behaviour doesn't interfere with your custom solution.

Set title to an element with CSS

Do it with jquery. CSS is a presentation language. It isn't designed to add content, aside from :before and :after

Jquery:

$('.br').attr('title','yourtitle');

HTML title attribute making css :hover not work

replace

<div id="arrow-right" ; title="text here"></div>

with

<div id="arrow-right" title="text here"></div>

How to change title attribute css in input ?

You're thinking of a tooltip. The title property only displays that default browser-based tooltip and you can't style it.

Try a package like jQuery UI.

https://jqueryui.com/tooltip/

Edit: You can style the title element

Styling HTML Title attribute using CSS

Is it possible to define a title attribute by class name?

That's not something that's within the scope of CSS. Your best bet is to use some JavaScript or JQuery.

Better solution to display title-Attributes in disabled a

You can use the title attribute with disabled links,
you have to modify your code this way:

a.disabled {
  pointer-events: auto;
  color: grey;
}
a.disabled:active {
  pointer-events: none;
}

This is an exemple using the attribute title and a custom attribute named data-tooltip to show the tooltip text:

a.disabled {

  pointer-events: auto;

  color: grey;

}

a.disabled:active {

  pointer-events: none;

}

/* Tooltip **/

[data-tooltip] {

  position: relative;

  z-index: 10;

}

[data-tooltip]::after {

  pointer-events: auto;

  background: #444;

  border-radius: 0.25rem;

  box-shadow: 0 1rem 2rem -0.5rem rgba(0, 0, 0, 0.25);

  color: #fff;

  content: attr(data-tooltip);

  display: inline-block;

  font-size: 0.75rem;

  letter-spacing: 1px;

  line-height: 1;

  max-width: 11rem;

  opacity: 0.8;

  padding: 0.375rem 0.25rem;

  position: absolute;

  left: 50%;

  bottom: calc(100% + 0.25rem);

  text-align: center;

  transform: translate(-10%, 0.25rem);

  user-select: none;

  -webkit-user-select: none;

  vertical-align: middle;

  visibility: hidden;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  z-index: 999;

}

[data-tooltip]:hover::after {

  visibility: visible;

  opacity: 0.8;

  transform: translate(-50%, 0.125rem);

  z-index: 9999 !important;

  transition: opacity 200ms ease-in-out, transform 500ms ease-in-out;

}

<br>

<br>

<a href="#active" data-tooltip="link is clickable">active Link with hover text</a>

<br>

<a href="#disabled" title="I'm the title attribute" class="disabled" data-tooltip="I'm the data-tooltip attribute">disabled link with hidden hover text</a>

---

Related Topics