Change div attribute title color

Question

I have a div with tt ID and I write code in JavaScript to add title attribute (tooltip) at runtime code given as:

$("#tt")
    .css("left", (mouse.x - 240) + "px")
    .css("top", (mouse.y - 258) + "px")
    .attr("title", title)
    .tooltip('show');

Now I want set color at title attribute. Please suggest me how to make it work.

Possible duplicate of [How to change the style of Title attribute inside the anchor tag?](http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag) — dimshik, Feb 10 '16 at 09:09

score 0 · Answer 1 · edited Nov 17 '21 at 10:08

If I understand correctly, you want to change the color of the native title...

Here is a CSS3 way to do that

http://jsfiddle.net/dimshik/tDQWN/8662/

source: https://css-tricks.com/css-content/

body {
  padding: 10px;
}

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

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

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: red;
  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);
}

<p>Here is some text and a <a href="#" title="Hello, i am a link">LINK</a> 
with a red title on it. </p>

<p> And here is another one <a href="#" title="This is another link">Link</a> eleifend leo.</p>

there are two tooltip when you hover on it..use data-title instead of title only — Dhara, Feb 10 '16 at 08:58
Yes i see, the native title is covering the generated one :( — dimshik, Feb 10 '16 at 09:04

score 0 · Answer 2 · edited Nov 17 '21 at 10:07

I am currently using this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 /* Change Blocked with the title you are loo*/
    <script>$(document).ready(function(){
       $("div[title*='Blocked']").css("background-color", "yellow");});
    </script>
 /* Everything with the text Blocked in the title will change color*/
    <div title="Blocked ality">One</div>
    <div title="Blocked">Two</div>

Change div attribute title color

2 Answers2