I'm trying to use the popover like in twitter bootstrap example, so when you click a button it appears, and when you click it it disappear.
I have in application.js
//= require bootstrap-tooltip.js
//= require bootstrap-popover.js
$(function () {
$('.popover-test').popover();
});
And in my view _fof.html.erb
<button class="popover-test" id="button1" data-content="Popover Content">
<%= 'ciao' %>
</button>
But popover comes only on mouse over, and when I move on it disappear.
Have I to implement the function on_click in js?
By default popovers are triggered by mouseover, not by clicks. If you scroll down on the Bootstrap documentation web page that you linked to, you'll see a list of options, including how to set the trigger.
Name: trigger
Type: string
Default: 'click'
Description: how popover is triggered - click | hover | focus | manual
So calling it would be like this:
$('.popover-test').popover({target: "click"});
Related
I want to show a popper based on caret position like this
I have tried with tippy js with popper js configuration but this did not work.i need to show a dynamic popper based on caret position which position will be changed while typing.
<div contenteditable="true">
<p></p>
</div>
tippy('div', {
content: 'tooltip!',
followCursor: true,
trigger: 'keypress',
placement: 'left',
});
this doesn't move the tooltip while typing. Also tried to change offset but did not work and the tooltip position stays at end every time.
I have a need to capture an event (like a click) on a object that is elsewhere on the page and not a child of the select2 object while the select2 object has focus and is showing results. When the select2 results object is focused, I cannot click on a button/anchor elsewhere on the page and have it perform its action. It merely closes the select2 object.
Is there a way to do this? Here is a demo that shows this behavior: http://codepen.io/anon/pen/JoJobW
<!-- Javascript snippet -->
$(document).ready(function() {
$("#e1").select2();
$("#e2").click(function(){
alert("click!");
e.preventDefault();
});
});
<!-- HTML snippet -->
<select id="e1"></select>
Click here when select2 is focused
Using select2 v3.5.2 and jQuery 1.11.0
Select2 places a "mask" element behind the drop-down that captures the mouse click. Others have complained about this.
Here is a jsfiddle that shows the mask element.
You could try to remove the mask element when the drop-down is opened.
$('#e1').select2().on('select2-open', function() {
$('.select2-drop-mask').remove();
});
Of course, this means the drop-down will not close when the user clicks off of it, but you could add an event handler on the document (or body) to do that.
$(document).click(function() {
$("#e1").select2('close');
});
You have to make sure the click event on the other element does not propagate to the document in that case.
$('#e2').click(function() {
alert('click!');
return false; // Prevent default action and stop propagation.
});
jsfiddle
How can we show password requirements for a Password field using twitter Bootstrap pop-over and jquery on hover.
<input id = "txtPassword" type = "password" title ="password" />
I want to pass custom "html" as the content of popover.
change title of pop-over to custom title
change the style of pop-over from current basic to custom style.
for starter you can make things simple and use the simplest popover bootstrap:
1.include in your project the right files of bootstrap in order to make it work:
a.bootstrap-tooltip.js
b.bootstrap-popover.js
c.jquery.min.js
d.bootstrap.css
2.use an element only as the element which will fire the popover, for example:
hover for popover
with the: id="example" you can access the element with jquery in order to display a content with the popover
on the data-content="some text": this is the text that will be shown on the popover window
on the data-original-title="some title": you can decide what title to show on the popover window
3.use jquery to access and activate the popover like this:
$(function ()
{ $("#example").popover();
});
just start with that and then try to dig deeper to your goal.
Is there a reason why the click handler is removed from my button after calling the button() method on it. I am changing the content of my buttons, and as a result I need to refresh them. I noticed refresh does not work, so I tried the button method.
This will restyle my "button", but I lose my click event.
How can I accomplish both?
http://jsfiddle.net/RQZG8/2/
And here is the code:
$("[data-role=button]").html("hello world").button();
$("[data-role=button]").click(function(){
alert("i have been clicked");
});
My big issue is that I have a div which is acting as a button. I want to change the content of the div, but I want to be able to have it continue to look like a button while keeping it's behavior.
Try this: $("[data-role=button] .ui-btn-text").html("hello world"); otherwise the padding is lost.
First of all IMHO, given your example that goes with the question (when you change only caption of a button), there is no much point to use a div as a button when jQM gives you a lot of standard choices.
All of these:
<button>Button element</button>
<input type="button" value="Button" />
<input type="submit" value="Submit Button" />
will be automatically enhanced by jQM to buttons without even specifying data-role="button".
And you can of course use a link as a button
Link button
Now if you still want to use your div as a button you don't need to specify data-role="button" just call button() plugin. That will create all necessary markup for you and your original div will be preserved as hidden.
<div id="button1">By button<div>
$("div#button1").button();
To refresh a button after you changed its caption you need to call refresh method:
$("div#button1").html("Hello World").button("refresh");
Now to normally handle the click event of a particular button (if it's not the only one on the page) you probably need more specific selector than just the data-role=button attribute. id would be perfect for that. So instead of
$("[data-role=button]").click(function(){...});
do
$("div#button1").click(function(){...});
And lastly you most certainly know that, but I didn't see it in your jsfiddle, so I just mention that you better put your code in one of the jQM page handlers. pageinit is recommended way to go.
$(document).on("pageinit", "#page1", function(){
...
});
Here is jsFiddle.
I have a page on which I'm using jQuery UI Tabs, what I'm doing is loading the content of each tabs via Ajax, but the problem I'm having is that, in the content of my tabs, the buttons (I'm using jQuery ui button) lose all their jquery ui classes, meaning:
When the page loads for the first time, my buttons look like this:
<button class="my_button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only">
<span class="ui-button-icon-primary ui-icon ui-icon-plusthick"></span>
</button>
As you can see, my buttons have all the jquery-ui classes ui-button, ui-widget, etc.... Also, my buttons have a span which displays a plus(+) sign as a label for my buttons. Therefore, my buttons display correctly.
But when I load the same content (which contains the same buttons) via Ajax, my buttons become like this:
<button class="my_button"></button>
As you can see, I lose all the jQuery ui classes of my button. Therefore, the button is not styled
How can I fix this?
NOTE : Please note that I did not manually add those jquery-ui classes to my buttons in my HTML. When you initialize the buttons using $(".my_button").button(); in jQuery, jQuery automatically applies all the necessary jquery-ui classes to my button appropriately. So please don't tell me it's because I didn't not assign the jquery-ui classes to my buttons upfront (I should not have to). Also, I tried .live(), .delegate(), none of those work.
Please help me with this anyone
Thank you
I've faced this problem once and solved this problem using the document.ready call like
function myreadyFunc(){
$(".my_button").button();
// Other codes
}
I had my document.ready like following
$(document).ready(function(){
myreadyFunc();
});
After each ajax (success) call I used to call
myreadyFunc();
Hope this will help you too. I used this approach to execute document.ready's code that was not possible by calling document.ready after each ajax call.