How can I get the title attribute of the current anchor?

Question

It has ~ 500 anchor tags in the grid, everyone has title attributes, I would like to get this title from the element that the user is currently hovering around and display it at the top of the grid so that you can see what you are hanging over. Or is there an alternative?

<a class="color" title="#Wicked" style="height: 30px; width: 30px; background-color: rgb(70, 60, 65); display: block;"></a> <a class="color" title="#Tallulah" style="height: 30px; width: 30px; background-color: rgb(95, 58, 61); display: block;"></a> <a class="color" title="#Merlot" style="height: 30px; width: 30px; background-color: rgb(79, 56, 57); display: block;"></a> <a class="color" title="#Speakeasy" style="height: 30px; width: 30px; background-color: rgb(87, 50, 65); display: block;"></a> <a class="color" title="#Tamarind" style="height: 30px; width: 30px; background-color: rgb(95, 68, 74); display: block;"></a> <a class="color" title="#Oxford" style="height: 30px; width: 30px; background-color: rgb(101, 64, 60); display: block;"></a> <a class="color" title="#Mulberry" style="height: 30px; width: 30px; background-color: rgb(111, 70, 83); display: block;"></a> <a class="color" title="#Crantini" style="height: 30px; width: 30px; background-color: rgb(128, 81, 87); display: block;"></a> <a class="color" title="#Sangria" style="height: 30px; width: 30px; background-color: rgb(121, 87, 90); display: block;"></a> <a class="color" title="#Pueblo" style="height: 30px; width: 30px; background-color: rgb(141, 108, 109); display: block;"></a> <a class="color" title="#Bel Ange Rose" style="height: 30px; width: 30px; background-color: rgb(167, 123, 127); display: block;"></a> <a class="color" title="#Foxglove" style="height: 30px; width: 30px; background-color: rgb(200, 143, 120); display: block;"></a> <a class="color" title="#Cactus Bloom" style="height: 30px; width: 30px; background-color: rgb(230, 191, 164); display: block;"></a> <a class="color" title="#Pillow Talk" style="height: 30px; width: 30px; background-color: rgb(240, 221, 211); display: block;"></a> 

It can't seem to find a way to grab this. Any tips or alternatives are helpful!

Demo here

Answer 1

Adding to what has already been posted here, you should move as much style information as possible in CSS. Accepting @Rory McCrossan's suggestion, if you put the whole thing inside the container, then we can use this to stylize only color elements with the following css

 #colors a { height: 30px; width: 30px; display: block; } 

Then our HTML should look like this:

 <div id='currentColor'>Color: </div> <div id='colors'> <a title="Wicked" style="background-color: rgb(70, 60, 65);"/> <!-- more colors --> </div> 

We can do the rest with js / jQuery .

 $('#colors').on({ mouseenter: function () { $('#currentColor').text("Color: " + this.title); }, mouseleave: function () { $('#currentColor').text("Color: "); } }, 'a'); 

This code uses the jQuery on method to attach a delegated handler to the mouseenter and mouseleave events for all a elements inside the #colors container.

See this demo:

jsFiddle

Answer 2

Try the following:

 $('.color').mouseover(function() { var title = this.title; // do something with title... }); 

---

Since you have 500 elements, you can use one delegated handler to improve performance. First wrap the elements in the containing div :

 <div id="container"> <!-- your current code here --> </div> 

Then in jQuery:

 $('#container').on('mouseover', '.color', function() { var title = this.title; console.log(title); }); 

This will cause 1 element to have an event handler, not potentially 500.

Answer 3

here is a solution to your problem on jsfiddle

and below is the code

 $('a').mouseover(function(){ alert($(this).prop('title')); }); 

Answer 4

You can simply use the following code:

 $('.color').hover(function(){ var title = $(this).attr("title"); }); 

Answer 5

 $("a:hover").mouseenter(function(){ var _title = $(this).attr("title"); // Why prefix with an anchor? Maybe you need to replace.... console.log(_title); }); 

Answer 6

Html, Css and Script Jsfiddle Here cleared

 <div class="container"> <a class="color" title="#Wicked" style=" background-color: rgb(70, 60, 65); "></a> <a class="color" title="#Tallulah" style=" background-color: rgb(95, 58, 61); "></a> <a class="color" title="#Merlot" style=" background-color: rgb(79, 56, 57); "></a> <a class="color" title="#Speakeasy" style=" background-color: rgb(87, 50, 65); "></a> <a class="color" title="#Tamarind" style=" background-color: rgb(95, 68, 74); "></a> <a class="color" title="#Oxford" style=" background-color: rgb(101, 64, 60); "></a> <a class="color" title="#Mulberry" style=" background-color: rgb(111, 70, 83); "></a> <a class="color" title="#Crantini" style=" background-color: rgb(128, 81, 87); "></a> <a class="color" title="#Sangria" style=" background-color: rgb(121, 87, 90); "></a> <a class="color" title="#Pueblo" style=" background-color: rgb(141, 108, 109); "></a> <a class="color" title="#Bel Ange Rose" style=" background-color: rgb(167, 123, 127); "></a> <a class="color" title="#Foxglove" style=" background-color: rgb(200, 143, 120); "></a> <a class="color" title="#Cactus Bloom" style=" background-color: rgb(230, 191, 164); "></a> <a class="color" title="#Pillow Talk" style=" background-color: rgb(240, 221, 211); "></a> </div> 

Script

  $('.color').on('mouseenter',function() { alert(this.title); }); 

Css

 .color{height: 30px; width: 30px;display:block;} .container{width:50%;margin:0 auto;} 

Answer 7

Bootstrap has some pretty nice tips: http://getbootstrap.com/javascript/#tooltips

  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script> $('a').tooltip(); </script> 

Demo http://jsfiddle.net/wernull/fEzsy/