CODEWITHSUNDEEP
jquerycss
Atul
Atul

Reputation: 1590

JQuery Function with parameter passed Not Working

I am new to JQuery.

I am working on one feature where hovering over an anchor link should display a tool tip.

I have got a working code from Add tooltip in a anchor link [duplicate]

However , I want to make the function generic so that I can pass ID of the link and the tool tip should start displaying. I have also tried and implemented a function like below Entire code is listed as below :

But as seen inside hoverLink function , ID is not getting printed correctly and so ('.header #'+ID) selector is also not working

Can anybody please help me here ?

$().ready(function hoverLink(ID) {

  alert(ID); //this is not working . ID is not printed correctly 

  $('.header #' + ID).hover( // this is not working . 
    function() {
      var title = $(this).attr("data-title"); // extracts the title using the data-title attr applied to the 'a' tag
      $('<div/>', { // creates a dynamic div element on the fly
        text: title,
        class: 'box'
      }).appendTo(this); // append to 'a' element
    },
    function() {
      $(document).find("div.box").remove(); // on hover out, finds the dynamic element and removes it.
    }
  );
});
$().ready(function() {
  hoverLink('facebook');
});
.box {
  border: 1px solid green;
  position: absolute;
  color: white;
  top: 19px;
  left: 30px;
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="header">
  <a id="google" href="http://google.com" data-title="The World's Largest Search Engine!">Google!</a>

  <a id="facebook" href="http://google.com" data-title="FaceBook">Facebook!</a>

  <a id="apple" href="http://google.com" data-title="Apple">Apple!</a>
</div>

Upvotes: 0

Views: 43

Answers (2)

Ahmed Badreldin Amado
Ahmed Badreldin Amado

Reputation: 41

you are defining the hoverLink function inside $().ready and the calling inside another one you need to define it inside your script tag then call it on ready your code should be like this

function hoverLink(ID){

alert(ID);
 
$('.header #'+ID).hover( // this is not working . 
  function() {   
   var title = $(this).attr("data-title");  // extracts the title using the data-title attr applied to the 'a' tag
    $('<div/>', { // creates a dynamic div element on the fly
        text: title,
        class: 'box'
    }).appendTo(this);  // append to 'a' element
  }, function() {
    $(document).find("div.box").remove(); // on hover out, finds the dynamic element and removes it.
  }
);
}
$().ready(function(){
    hoverLink('facebook');
});

or define the function and function calling inside the same ready

$().ready(function(){
    hoverLink('facebook');
    function hoverLink(ID){

alert(ID); //this is not working . ID is not printed correctly 
 
$('.header #'+ID).hover( // this is not working . 
  function() {   
   var title = $(this).attr("data-title");  // extracts the title using the data-title attr applied to the 'a' tag
    $('<div/>', { // creates a dynamic div element on the fly
        text: title,
        class: 'box'
    }).appendTo(this);  // append to 'a' element
  }, function() {
    $(document).find("div.box").remove(); // on hover out, finds the dynamic element and removes it.
  }
);
}
});

Upvotes: 1

mplungjan
mplungjan

Reputation: 177885

You cannot pass ID on page load

Try this alternative

$().ready(function() {
  $('[data-title]').hover(function() {
      var title = $(this).attr("data-title"); // extracts the title using the data-title attr applied to the 'a' tag
      $('<div/>', { // creates a dynamic div element on the fly
        text: title,
        class: 'box'
      }).appendTo(this); // append to 'a' element
    },
    function() {
      $(document).find("div.box").remove(); // on hover out, finds the dynamic element and removes it.
    }
  );
})
.box {
  border: 1px solid green;
  position: absolute;
  color: white;
  top: 19px;
  left: 30px;
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="header">
  <a id="google" href="http://google.com" data-title="The World's Largest Search Engine!">Google!</a>
  <a id="facebook" href="http://google.com" data-title="FaceBook">Facebook!</a>
  <a id="apple" href="http://google.com" data-title="Apple">Apple!</a>
</div>

Your script fixed:

function hoverLink(ID) {
  $('.header #' + ID).hover(function() {
      var title = $(this).attr("data-title"); // extracts the title using the data-title attr applied to the 'a' tag
      $('<div/>', { // creates a dynamic div element on the fly
        text: title,
        class: 'box'
      }).appendTo(this); // append to 'a' element
    },
    function() {
      $(document).find("div.box").remove(); // on hover out, finds the dynamic element and removes it.
    }
  );
}
$().ready(function() {
  $('[data-title]').each(function() { hoverLink(this.id) });
});
.box {
  border: 1px solid green;
  position: absolute;
  color: white;
  top: 19px;
  left: 30px;
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="header">
  <a id="google" href="http://google.com" data-title="The World's Largest Search Engine!">Google!</a>
  <a id="facebook" href="http://google.com" data-title="FaceBook">Facebook!</a>
  <a id="apple" href="http://google.com" data-title="Apple">Apple!</a>
</div>

Upvotes: 1

Related Questions