We Keep Coding

Jquery tooltip to use knockout observable as content

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

Link inside jQuery UI Accordion

Using jQuery UI Accordion to create dropdowns for a filter list.
http://89.151.89.43/uk/trade-essentials-column-radiators-1.html#usestorage
Inside the Header there is also a clear button (You need to select an option for it to appear) The CMS is generating this automatically, unfortunately it doesn't function because it's inside the H4 tag surrounding it.
You will see an onclick function on the clear-button, I would like to keep the button where it is but just allow it to function.
To recreate:
Go to the above link
Select an option on the left
Clear button should appear
Try click the 'Clear' button
The accordion should then close
What I want:
The function contained in the 'onclick' to clear all checkboxes that are under that header

Without seeing the source code, I can't give you an exact answer, but in general you want to do something like this:
$("#clear-button").click(function(event){
event.stopPropagation();
event.preventDefault();
log("clicked!");
});

Looking at your example page, there seems to be a lot code missing.
I would suggest something like:
$(".clear-button").on("click", function(event) {
event.preventDefault();
$(this).parent().parent().find(":checked").prop("checked", false);
});
When the button is clicked, after being generated dynamically, you will want to find the input elements that are within the parent div element. Since the button is within the h4, you have to find that parent div.
An example, not working, since I cannot find the OnFilter() function code. You could assign the click callback when the button is added instead of using the .on().
https://jsfiddle.net/Twisty/o4L504ya/

Dynamically ADD a title to a Bootstrap popover

I'm using ReactJS and bootstrap to create a popover over a button. When the user stays over this button for 2 seconds, the content and the title of this popover must change.
The problem is that before these 2 seconds, the popover has no title. So when I change both the title and the content, they change in the html, but the title keeps its previous "display:none" value. So even if it is correct in the html, I can't see it on screen.
If I give a title to the popover before changing it, then everything works fine. Both content and title are updated and visible.
How can I dynamically ADD a title to a bootstrap popover that was created without a title?
Here is my code:
render()
{
return (
<span
ref="popoverElement"
className={"popover_helper"}
onMouseOver={this.handleMouseOver}
onMouseLeave={this.handleMouseLeave}
data-container="body"
title={this.state.title}
data-content={this.state.content}
data-placement={this.props.pos}
/>
)
}
and when I update the value of this.state.content or this.state.title, I call:
updatePopover()
{
const popover = $(this.refs.popoverElement).data('bs.popover');
popover.options.title = this.state.title;
$(this.refs.popoverElement).popover("show");
}
When I look in the html of the page I obtain this for the title of the popover:
<h3 class="popover-title" style="display: none;">my tile</h3>

I finally found the solution using react-bootstrap and the OverlayTrigger (it also works with a simple Overlay):
https://react-bootstrap.github.io/components.html#popovers
It is very important to add the attribute shouldUpdatePosition={true}to the Overlay. This attribute is not part of the doc, but I found about it after extended research. This allows the Popover to update its position correctly when the content is modified.

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')

Adding HTML element after the dataset is brought in

In Typeahead JS I'm trying to add an option that appears at the bottom of the dropdown after the user has started typing. Currently I'm using the 'onOpened' Custom Event to trigger adding some HTML after the 'tt-dropdown-menu' element is initialised.
.on('typeahead:opened', onOpened)
function onOpened($e) {
$('.tt-dropdown-menu').html( "Add Option" );
}
The problem is that the jQuery HTML is added when the dropdown is initialised, as expected, then when the user starts typing the new dataset element with the autocomplete results in is added below that jQuery HTML so the jQuery HTML can never appear at the bottom of the dropdown. You can't append the jQuery HTML to the dataset either as that element doesn't exist when the dropdown is initialised.
Is there an easier way around this? The other Custom Events don't seem to cover this scenario.

If you only have one dataset, you can do as I do: add a footer to the dataset, and add it as a DOM element, not plain HTML string. You can then change it at will (say on any event you wish) and your changes are reflected in the dropdown.
Example:
$('#myinput').typeahead({
// rest of your regular stuff, like 'name', 'remote', etc.
footer: $('#dropdown-footer'),
});
... where dropdown-footer is the ID of a div you have somewhere in your dom. You can then do things like:
$('#dropdown-footer').html('Hello')