CODEWITHSUNDEEP
jqueryhtml
Marcello Impastato
Marcello Impastato

Reputation: 2281

Enabling / Disabling title from link on resizing of window browser

I have a link like this:

<a id="mylink" href="something" title="something">something</a>

Using jQuery how can I remove the title attribute depending on the site width?

if (Window.width > 460) {
   // disable title of mylink
}

In other words, when screen > 460px then the title of link need not to be displayed and when <= 460px then title of the link needs to be displayed. Thanks.

Upvotes: 0

Views: 38

Answers (1)

Alexis
Alexis

Reputation: 5831

You can add the title reference inside a data attribute and then when the document is loaded and when the windows is resized check the size of the window and set title attribute or remove it 

$(document).ready(function(){
  setLinkTitle();
  $(window).resize(function(){
    setLinkTitle();
  })
})

function setLinkTitle(){
  if($(window).width() <= 460){
    $(".mylink").removeAttr("title");
  }
  else{
    $(".mylink").each(function(){
       $(this).attr("title",$(this).data("title"))
    })
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="mylink" title="something" data-title="something">something</a>

Upvotes: 1

Related Questions