jQuery Tooltip - close tooltip dialog without hiding the textbox - javascript

I trying to close any open jQuery tooltips which are open.
When I use $(".selector").tooltip("close"), nothing happens.
When I use $(".selector").tooltip().remove(), it removes the tooltip but the textbox also disappears.
Is there a way to just remove only the tooltip dialog?
NOTE: If a user select the text in a textbox and drags the mouse, the tooltip window remains open, that is why I am trying to force-close it.

My believe is that you are removing the element. I will suggest to hide the tooltip with its option hide.
$('#element').tooltip('hide');
https://api.jqueryui.com/tooltip/#option-hide
Can also use the option close if you actually wants to hide/close the tooltip instead of removing it.
$('#element').tooltip( "close" );
https://api.jqueryui.com/tooltip/#option-close

Related

Select2 scrolling within a modal

I am using a select2 dropdown within a modal pop up window.
On mobile, when I select the select2 input, and attempt to scroll, the window does not scroll down. This means that, on mobile, if I click on the select2 box when it is in the bottom half of the screen, the keyboard sits over the input which cannot be seen.
This is my form, on desktop. The first textarea is a select2 input.
In this example I have clicked on my select2 box that is just below the radio buttons, the keyboard shows, and it is impossible to scroll down to see the input box.
Here I have added the below code, which has allowed scrolling as desired, but shows how the "Please enter 2 or more characters" tooltip does not scroll, as it is absolutely positioned.
$('.js-example-basic-multiple').on('select2:open', function (e) {
const evt = "scroll.select2";
$(e.target).parents().off(evt);
$(window).off(evt);
});
Is there a way to have scrolling that doesn't have the tooltip element floating? Is there a better alternative? I'm just trying to have a nicely formatted dropdown from a small dataset that I have on page in code.

xdsoft_datetimepicker in modal window opens below viewport

In the body there is one button, on click of which a modal window pops up. There are 2 xdsoft_datetimepickers in the modal-dialog. The last datetimepicker opens beyond the screen and the last few rows in the calendar are not visible.
The calendar opens up on click of the the input field to which it is associated in the modal-dialog.
On adding overflow-y:auto to body.modal-open we can scroll down to see the calendar.
The inbuilt property of the datepicker is it will appear below the input field if there is enough space otherwise above it.
But in my case it always appears below the input field thereby, hiding the last few rows.
You can set the "pickerPosition" option value is 'top-right',code is
$('#datetimepicker').datetimepicker({
#this is other option
...
pickerPosition: 'top-right',
});

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

click button simulates clicking a dropdown hidden

I do not know if it's possible, but wanted to have a jsp page when loaded uam dropdown does not appear, but when I click a button.
Basically I want a button that makes the select box. that when clicked appear a list "option".
Already experimenting with various js events and jquery but none works. I had a div with style = "display: none;" and within the div I have the select. and wanted to show the option only when you click a button. It is possible ?
Thanks for listening
try this
$(document).ready(function(){
$('.mySelectbox').hide();
$('.myButton').click(function(){
$('.mySelectbox').val(-1); //clear selection of selectbox
$('.mySelectbox').show(); //show make the magic
});
});
this work for you?

how to hide panel of a dojo splitcontainer / bordercontainer?

How to hide splitcontainer pane programmatically. I have 3 panels. i want to hide show one panel on press of a button. how to do that ? Don't want to destroy it.
Use SplitContainer's addChild() and removeChild() methods:
splitContainer.removeChild(contentPane3); // to hide pane
splitContainer.addChild(contentPane3); // to show pane
Follow my jsFiddle to see and play with working example including toggling of panes.
Also please note, that SplitContainer is deprecated and you should use dijit.layout.BorderContainer instead. Set data-dojo-props="splitter:true" to enable drag-n-drop resizing.

Categories