Jquery tooltip to use knockout observable as content - javascript

It was using jquery ui tooltip like this
self.variable=ko.observable("a");
$(document).uitooltip({
//some settings
content: self.variable();
})
//Some event here which would update self.variable
The idea is by clicking a button inside of the tooltip, the self.variable would be updated and the content of tooltip would change. But while the variable would change, so far, i am not able to have it updated immediately. I have to hover in and out again to see updated content. What approach should I use?
--Update--
A example of the problem
http://jsfiddle.net/32b1n6p5/1/
What I want is that when I hover the first input--->the tooltip show up--->type anything--->tooltip change. But right now, I have to hover out and in again to see the change

Related

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());
});

Why ComboBox is not working after applying Resize and Move functionality to PopUpDiv

I have a normal Div with title-header ['Resize and Move Me! , Combobox'] and body part as mention below in link.
When I applied move and resize functionality using javascript, ComboBox on header part is not working. It would not drop list. If I put Combobox outside of that DIVs then its working properly,But inside it would not. See example,
JSFIDDLE DEMO
I have few questions
Can anyone tell me the reason that why its not working?
What should be the solution to make it work properly.
Because, in one the mouse click events, you are trying to block the default behavior of the select box.
function onMouseDown(e) {
onDown(e);
e.preventDefault();
}
Here e.preventDefault, is blocking the select box from showing the options when you click the mouse.
Please comment/delete it out to get the normal behavior of the select box.

Can you make a browser display an HTML title attribute after setting it dynamically?

I need to be able to show what would appear to be a tooltip when the user hovers over an element, but the text I need to display is only known after the user hovers, which triggers an ajax call to a server to get the text to be displayed, which I then set as the title attribute of the element.
Since there was no title attribute when the user began hovering over the element, no tooltip is displayed, even after I set the title. I have to mouse off the element and then back onto it before the tooltip appears.
Is there any way to force or fake the browser into displaying the tooltip after I've set the title attribute?
Using jquery .on( "mouseover", handler ) event you can add a span with .fadeIn()
You just have to make it look like a tooltip with css
Here are some bootstrap tooltip examples from w3schools bootstrap tool tip might help you,
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
I had the same issue and at the end, I used Bootstap's tooltip:
$('#element').tooltip('show')

jQuery on 'click' not triggering after change to a bootstrap table

situation
I am using bootstrap to render a table based on values in an array of objects. I have a select which has a jQuery on ('change') method attached so that when an item from the list is selected, a new table is rendered based on the selected value.
the table uses bootstrap collapse to show/hide rows from the table when the top row is clicked. the last item in the row has a glyphicon arrow which shows the row can be folded/unfolded as the picture below shows
collapse with glyphicon
I am using the below jQuery to toggle the icon
$('#tog').on('click', function() {
console.log("tog clicked");
$(this).find('span').toggleClass('glyphicon-arrow-up glyphicon-arrow-down');
});
so far I have this all working as shown with this fiddle http://jsfiddle.net/vgfb74u0/
Problem
the issue I am facing is that when a new table is rendered based on the selected item the jQuery that changes the glyphic does not trigger so when the table unfolds the icon remains the same.
I have put in some console.log at the start of the method and I never see it firing. so to my newbie eyes the click event is never triggered.
I'm surprised that i've managed to get this far and at a loss to what the issue might be so any help, pointers or advise is most welcome!
You need to manually bind events to any dynamically created element, or let jQuery do that for you.
Changing
$('#tog').on('click', function() {});
To
$('html').on('click', '#tog', function() {});
Will tell JavaScript to delegate the event to any #tog that's created inside the <html> element.
The problem is the event handler is lost when the table is re-rendered.
The fix is to attach the handler in a different way: $('.table').on('click', '#tog', function() {...}
See the updated jsfiddle

Top and Bottom Pagination Sync

I have some weird behavior with jQuery paginate plug-in (jPaginate). I need to have top and bottom pagination and I want to sync them - whenever one is clicked, the second one should be properly changed as well.
I have two divs with number_pagination class and they are initialized the same way:
$(".number_pagination").paginate(options);
Now, here where it gets weird. Whenever I click on the top div, everything works as supposed to, but if I click on the bottom one, it changes the bottom one and does the pagination, but the top one stays the same. I cannot figure out why that could be happening.
Here's the onChange function that is supposed to change both pagination divs. Note the jQuery.fn.draw function that is a part of jPaginate. This is where it applies classes and style.
var opts=jQuery.extend({},jQuery.fn.paginate.defaults,options);
var o=jQuery.meta?jQuery.extend({},opts,jQuery(this).data()):opts;
jQuery(".number_pagination").each(function(){
var obj=jQuery(this);
jQuery.fn.draw(o,obj,page);
});
Found another solution that works perfectly.
It may even work for other pagination plug-ins. It checks the class that has the currently selected page number and checks if the content matches the selected NOW page, and if it doesn't, it looks for siblings that have the correctly selected page and triggers the click event.
jQuery(".jPag-current").each(function(){
if(jQuery(this).html() != page){
jQuery(this).parent().siblings().children().each(function(){
if(jQuery(this).html() == page){
jQuery(this).trigger("click");
}
});
}
});
You should probably look at using the onChange event to redraw the other pager that didn't incur the change

Categories