CODEWITHSUNDEEP
jquery
Django
Django

Reputation: 147

Jquery: Get 'title' attribute of each element, not just the first

I am trying to display the title attribute of each element with the class "tooltip", using the jQuery plugin Tooltipster.

But for whatever reason, I just get the "title" of the first element - for every element on the page.

<i class="tooltip game-1" title="219"></i>
<i class="tooltip game-2" title="30"></i>
<i class="tooltip game-3" title="122"></i>


    $(document).ready(function() {
        $('.tooltip').tooltipster({
           content: $(''+$(this).attr('title')+' people played this game')
        });
    });

I just get 219 over and over.

Upvotes: 0

Views: 1480

Answers (2)

yardpenalty.com
yardpenalty.com

Reputation: 1244

If you are using Bootstrap or just JQueryUI you don't even need a plugin for tooltips. You can use the .tooltip() widget for either basic tooltips or you can use it with jquery validate() for error handling on the client side.

validate() with tooltip() is very flexible as you can use data-attr with your elements to define rules and messages or use the AddMethod function.

AddMethod:

jQuery.validator.addMethod("math", function(value, element, params) {
  return this.optional(element) || value == params[0] + params[1];
}, jQuery.validator.format("Please enter the correct value for {0} + {1}"));

data-attr

You can use stuff like this for filters/rules:

data-group-type=strings data-group^=beginswith

OR

$("body").attr("data-seconds");
$('*[data-seconds="/[^0-9]+/"]');

OR

I like to write an inline function inside the .validate() where I show or hide .tooltip() elements using the .each function using a conditional loop and check each element using .valid().

Use a simple .Tooltip() in .ready or inside .Validate():

form = $("#id");
 // Create new tooltips for invalid elements
form.validate({

  showErrors: function(errorMap, errorList) {

      // Clean up any tooltips for valid elements
      $.each(this.validElements(), function (index, element) {
          $element = $(element);
          $element.data("title", "") // Clear the title - there is no error associated anymore
              .removeClass("error")
              .tooltip("destroy"); 
      });
      // Create new tooltips for invalid elements 
      $.each(errorList, function (index, error) {
          var $element = $(error.element);
// Destroy any pre-existing tooltip so we can repopulate with new tooltip content or disable and hide if .valid()
          $element.tooltip("destroy") 
              .data("title", error.message)
              .addClass("error")
              .tooltip("show"); // Create a new tooltip using the title
      });

//OR SIMPLY
$('input').each(function(){
    if(this.valid())
     this.tooltip("hide disable");
    else
     this.tooltip("show enable");
    });
  },
rules: {
     "math" :{
    required: {depends: "id:checked"}
}
},
messages: {
  "math" :{
    required: "{0} + {1} does not equal the amount entered"
}
},
  submitHandler: function(form) {
      //process form using ajax,.submit(), or whatever
  }
});

Keep in mind there is more than one way to skin a cat so you may have to make alterations considering you may have multiple forms and multiple conditions based on selections. In this case maybe use the depends in the AddMethod functions. I know this question was just about tooltips but I thought I would extend a little to help people go in the right direction since tooltips are typically related to validation.

Upvotes: 1

Craig Harshbarger
Craig Harshbarger

Reputation: 2233

Try using each() to apply tooltipster() to each .tooltip element seperately.

 $(document).ready(function() {
    $('.tooltip').each(function(){
        $(this).tooltipster({
           content: $(''+$(this).attr('title')+' people played this game')
        });
    });
});

Upvotes: 2

Related Questions