The site has links with pop-up tips, decorated through the title attribute

It is necessary to replace the title attribute with the data-yjsg-tip attribute and add the "yjsg-tip-top" class to the link itself.

Like now:

 <a href="http://site.ru" title="ВСкст подсказки">ВСкст ссылки</a>

How to:

 <a href="http://site.ru" class="yjsg-tip-top" data-yjsg-tip="ВСкст подсказки">ВСкст ссылки</a>

If adding a class to a link is more or less clear (via addClass ), then the attribute cannot be replaced, the replace does not work, and if you remove the attribute ( removeAttr ) and try to create a new one, then the values ​​already present in the title attribute are lost .

Is this even possible to do? If yes, then how to solve this problem in the form of a script?

    2 answers 2

     $('a[title]').each(function() { if (this.title) { $(this).addClass('yjsg-tip-top').attr('data-yjsg-tip', this.title); $(this).removeAttr('title'); // Ссли Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ title } }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="http://site.ru" title="ВСкст подсказки">Бсылка с title</a><br /> <a href="http://site.ru" title="">Бсылка с пустым title</a><br /> <a href="http://site.ru">Бсылка Π±Π΅Π· title</a>

    • Thank you very much, everything works, what you need! and yes, the title attribute itself, after removing values ​​from it as unnecessary, is deleted, as provided for in your reply! - Slava
    • Further more, but tell me more please: how to make the script not work if the title value is empty or missing? And now beautifully designed tips pop up even where the title is missing or not registered. empty) - Slava
    • @Slava updated the answer - Cheg
    • Thanks again, everything works, and lastly, if I list a list of divs in the script, in which the rule should work, how correct is it? Or it’s necessary to prescribe a rule for each div (duplicate code). What creates less stress? - Slava
    • one
      @Slava can just write $ ('. Selector, .selector1, # selector2') - Cheg

    Here is an example, maybe this will do.

     $("a").attr("data-yjsg-tip", "ВСкст подсказки"); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#">Link</a>

    • Unfortunately not, this option is not suitable for the reason that the title prompts are already present .. so I need to replace the title with data-yjsg-tip This option would be suitable if you take the value of the title attribute (text of the prompt), and add this value to the new / created data-yjsg-tip attribute, and then the title attribute itself (along with the value) is deleted .. But how to implement this is not enough knowledge .. - Slava