We Keep Coding

Updating the tooltip content doesnt update because its already initialized?

I'm not sure if I've got the title right here, if someone can recommend a better title I'll be happy to change it.
I have website that shows a list of products you can purchase, with a quick "add to wishlist" button. When you hover over the button, the tooltip says "add to wishlist", and when you click the button, the item is added to the wishlist.
The problem is, now that the item is in the wishlist basket, hovering over the button should say "remove from wishlist" but it still says "add to basket".
I'm trying to update this.
My code for displaying the icon is like this, using the data attribute.
<div class="wishlist-status js-wishlist-icon" data-tippy-content="#Html.Translate("ADD TO WISHLIST",Context)">
<partial name="~/Views/Shared/Components/SVG/_IconHeart.cshtml" />
</div>
I have a function that controls this functionality. My thinking was that I update this data value, and it will work. So I did this
var el = document.querySelector('.js-wishlist-icon');
el.setAttribute('data-tippy-content', 'remove from basket');
It does actually work. If I inspect the element, once I click the button, the value of it DOES say "remove from basket" in the markup, its just that the tooltip doesn't say that. It still says ADD TO WISHLIST when hovering. I think this is because its set when initialized, but I cant seem to update it.
I think I need an "updateTooltip" function. I think this website was built using Bootstrap, but I dont know if this functionality is Bootstrap or not. I've tried looking at https://getbootstrap.com/docs/4.0/components/tooltips/ but I'm not convinced anything there will help me.
Does anyone have any ideas? Thanks

I think I encountered a similar problem. I have an input field that I can edit text. And I want the tooltip shown (hovered) to also be updated whenever I change the input field.
I am using bootstrap 4.3.1 tooltip.
What I initially did:
Make sure title attribute and data-toggle attributes are present on the input element.
Bind tooltip to input element itself.
Make an event listener for input event so that title is updated with the current input field value.
I encountered a couple of problems such as
Window custom tooltip also appearing and messing with display of the bootstrap tooltip.
Like yours, the displayed tooltip is always the same as the original one. I set the initial title attribute to some test string and it was always the one shown even if I edited the input. Note that I also confirmed that my code properly changes the title attribute on input event.
What I did after:
Wrap the input element with parent div. Add the data-toggle and title attributes here.
Bind tooltip to this parent.
On input listener callback function, I also added code to update the attribute "data-original-title". It seems to be the basis for whatever is displayed on the tooltip and I am not sure as to why it is not updated.
Initial code:
A. html
<input id="input_field" title="">
B. Javascript/Jquery
$('#input_field').attr({
"data-toggle": "tooltip",
"title": ""
});
$('#input_field').tooltip({
placement: 'auto',
trigger: 'hover',
title: 'Fallback tooltip display'
});
$('#input_field').on('input', function(){
$('#input_field').attr("title", $().val('#input_field'));
});
Code after:
A. html
<div>
<input id="input_field" title="">
</div>
B. Javascript/Jquery
$('#input_field').parent().attr({
"data-toggle": "tooltip",
"title": ""
});
$('#input_field').parent().tooltip({
placement: 'auto',
trigger: 'hover',
title: 'Fallback tooltip display'
});
$('#input_field').on('input', function(){
$('#input_field').parent().attr("title", $('#input_field').val());
$('#input_field').parent().attr("data-original-title", $('#input_field').val());
});

Trigger Element Click

JSFiddle Live Demo
Script Explanation
My script is to sort and/or filter a mailbox whereas you can select one of each options and the sort option upon clicking, if it's active it'll switch the icon indicating going from A-Z to Z-A and visa-versa.
The filter option changes the button text and upon clicking on the button it'll animate the button width to the drop down width and then slide down the drop down. Upon clicking again, it'll reverse the process, checking to see if the text has been changed to adjust for the width.
What I Wish To Implement
Upon clicking one of the options apart from the .Active filter/view options, I wish to trigger the click event to reverse the show progress. I have tried to trigger this click hover with using e.target, I'm not sure how to trigger this correctly as my attempts have been doing nothing.

Your trigger event seems to be working fine, you're only triggering it on the wrong element. This seems to be working:
$('.dropdown-toggle').trigger("click");
I've updated the plunker

You can trigger the click this way.
if ($(e.target).closest('.Sort').length) {
if ($(e.target).hasClass('Active')) {
$(e.target).parent().find('i').toggleClass("fa-arrow-down fa-arrow-up");
} else {
$('.dropdown-menu .Sort').find('.Active').removeClass('Active');
$('.dropdown-menu .Sort').find('i').remove();
$(e.target).addClass('Active');
$(e.target).prepend('<i class="fa fa-arrow-down" aria-hidden="true"></i> ');
}
//Here.
//Ideally add another unique class to the main dropdown button and use that instead, otherwise you will have problems when there are multiple elements with dropdown-toggle class.
$('.dropdown-toggle').click();
}

How can I manipulate alert() with a toggle element?

I have some icons with jQuery toggleClass() to switch the icons, let's say Icon A and Icon B, when clicked. I also want an alert box to show up ONLY when changing from Icon A to Icon B.
I applied click() method together with alert() but the alert box simply shows up every time I click the icons (either when switching from Icon A to Icon B or from Icon B to Icon A.)
Is there a way to manipulate the alert box to achieve my goal? Please look at my pen for a clearer example. Thank you.

Check the class of the child i element when you click your heart. If it has the class fa-heart then it's filled:
$("a[id^=heart-]").click(function(){
if($("i", this).hasClass('fa-heart'))
alert("I need this alert box only when I fill the hearts.");
});
Updated pen

How to replace a Font Awesome icon within link text with a different icon on link click?

I run a Wordpress website that is edited by laypersons with no coding ability. The homepage consists of a list of standard html links (all of which are globally styled by css to resemble a button), the link text of which consists of a Font Awesome icon shortcode and the link title.
[icon name="car"]Link Text
For a user to add another link to the homepage, all they need to do is--while in the Visual Editor--select a Font Awesome icon via the tinyMCE menu, write their link text, and select both the icon and the link text when creating their link via the tinyMCE "create link" button.
The Font Awesome shortcode above results in the actual html being rendered like this:
<i class="fa fa-car"></i>Link Text
My question: when the link is clicked, I would like to have whichever icon is contained within that link to be replaced by the spinning Font Awesome gear/cog icon while the page is transitioning to the link target, thus replacing the link with the following:
<i class="fa fa-cog fa-spin"></i></i>Link Text
I just cannot figure out how to make this happen. I have tried many ways via jQuery but I am just learning this language and cannot seem to figure out how to do it.
In the meantime, I have accomplished a workaround by inserting both icons and using the :focus pseudoclass to show and hide one or the other after the link is clicked, but this solution does not seem to work on mobile and I don't want to have the users have to have to insert both icons each time:
http://jsfiddle.net/qfnzmpzd/
Any solutions that require the individual making the link to manually add a class to the shortcode/html will not work. Thank you all for your help!!

Since you tagged jQuery, you can add a .click() event:
// When a link is clicked
$('a').click(function() {
// If the link contains an icon
if ( $(this).find('.fa').length ) {
// Remove the icon
$(this).find('.fa').remove();
// Prepend the spinner
$(this).prepend('<i class="fa fa-cog fa-spin"></i>');
}
});
Here's a Fiddle.

How to make on click an label combo box should appear

On click an label an combo box should appear...
please check http://guruji.com/en/local.html
on clicking near mycity the label changes into combobox (dropdown list)..how to do it.

You can use the jEditable plugin for jQuery to accomplish this.

simple. you need to have two span element and play with js, css
<span style='display:block' id="click me">
<a href="#" onclick="javascript:document.getElementbyId('dropdownspan').style.display=hidden" select me</span><span style='display:hidden' id="dropdownspan">
<select name="test"><option value="1">one</option></select>
</span>

Clicking that link simply hides the original link and makes the "cities" dropdown visible. The dropdown is already on the page, you just can't see it.