I want to display a tooltip using twitter bootstrap in rails. The tooltip is to be displayed on page load. So for doing this I have added the following in my markup of the field:
rel="tooltip" title="Press CTRL+C To Copy"
And then I have added the following code into my application.js file:
window.onload = function(){
var text_input = document.getElementById ('url_copy');
text_input.focus ();
text_input.select ();
$('#url_copy').tooltip('show')
}
Fortunately it's displaying the tooltip. Nut unfortunately it's displaying it on the top. But I want to place it on right. I know I have to use a placement: 'right' or something like that as mentioned http://twitter.github.com/bootstrap/javascript.html#tooltips
But how should the code exactly look like??
Thanks in Advance...
On the page that you linked it shows you examples.
To place it on the right use the following html.
Tooltip on right
http://twitter.github.com/bootstrap/javascript.html#tooltips
Related
I have JQuery in my application. But I want to Turn Off Jquery script for tool tip and want to use regular tool tip in tag
I followed this document and tried disable, hide all properties. Its hiding and whole <a> element https://api.jqueryui.com/tooltip/
Plese find myJSFiddler here: Code
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
Please let me know how can I get regular Tooltip instead of styling tooltip
If you do not assign ToolTip, it will not initialize.
If you want to initialize it, but also disable it, you can use the disable method: https://jsfiddle.net/Twisty/0w278gLj/4
$(function() {
//$("body").tooltip().tooltip("disable");
});
See More: https://api.jqueryui.com/tooltip/#method-disable
JQUERY CODE:
$('#selector button').click(function() {
$(this).addClass('active').siblings().removeClass('active');
$('#gaga').toggle
})
PUG CODE FOR #gaga element:
p#gaga
| This is `${Value}`
PUG CODE FOR #gaga element:
How can I use three buttons to toggle the #gaga element on when button is active and off when you click outside the specific button and pass a different Value for ${Value} depending on the clicked button. Plus have only one instance of #gaga element running at a time. Meaning if I click the first button then click the second button only the ${Value} will change but the p#gaga element remains only one. I know I have left out the buttons pug code, I don't think it is necessary in solving the problem. But if needed will provide it.
I tried doing it using switch statements but I have failed. Hopefully someone can help.
UPDATE & EDIT as requested by https://stackoverflow.com/users/463319/twisty in the comments.
Here is the code: https://jsfiddle.net/YulePale/mdvnf0qt/4/
After doing some research I have made some progress... but I am still stuck.
I am trying to make it in such a way that when I click anywhere outside the gender buttons the input disappears and when I click another button it changes appropriately. Also instead of an input I want to show and hide the template in the html code.
Also, if you don't mind is .data() use to assign or get a value.
PS: Got this code from this answer : Fixing toggle with two buttons
and modified it a bit, but I am still not able to achieve my desired result.
If you review the API for Menu, they have a nice _closeOnDocumentClick(). You can simply use this in your code in a similar way.
Example: https://jsfiddle.net/Twisty/0x43bf8q/
JavaScript
$(function() {
$("input[type='button']").on('click', toggleOptions)
.first()
.trigger('click');
$(document).on("click", function(e) {
if (emptyOnDocumentClick(e)) {
$('[name=gender]').val("");
}
});
function toggleOptions() {
var $this = $(this),
onClass = 'button-toggle-on';
$this.toggleClass(onClass)
.siblings('input[type=button]')
.removeClass(onClass);
var gender = $this.filter('.' + onClass).data('gender');
$('[name=gender]').val(gender);
}
function emptyOnDocumentClick(event) {
return !$(event.target).closest("input[type='button']").length;
}
});
Hope that helps.
I am using the metronic 5 and I tried to add tooltip with data-toggle="m-tooltip" with title="Some Title"
When the page is rendered and I hover on the element, the tooltip is triggered, but a class show is not added to the tooltip which is required to add opacity:1 to the element and get the element into view.
Can anyone suggest any change or Am I missing any script?
Thanks for the help.
Did you initialize the tooltips on your page?
$(function ()
{
$('[data-toggle="m-tooltip"]').tooltip()
});
https://getbootstrap.com/docs/4.0/components/tooltips/
I have a page which has a few links. Clicking on a link generates a list of different charts in the bottom of the page without page reload. Put it another way, each link clears previous charts, gets new data from the server, invokes Highcharts to draw new charts. No page reload.
Here comes the issue.
I am using the following Javascript to collect the charts on the page and send the data to the server.
var svgArray=[];
$(Highcharts.charts).each(function(i, chart){
if (chart) {
svgArray.push(chart.getSVG());
}
});
I notice that Highcharts.charts array grows by ADDING new charts to its end of when a link is clicked. I dont need old charts. I just want to collect new charts.
How can I initialize Highcharts or Highcharts.charts when a link is clicked.
Thanks and regards.
Here is what I did and it appears to get rid of charts created earlier. When a link is clicked and before the new charts get drawn, I try to destroy all charts the following way:
$(Highcharts.charts).each(function(i, chart){
if (chart) {
chart.destroy();
}
});
It seems working, but I am not sure if this is the right or best way or it can help others. I love to hear the input from experts.
Thanks!
I'm trying to add a delete button to a custom div. However when the page is loaded, the jquery mobile button does not take the format of jquery and displays it like a hyperlink.
var currDelButton = $("<a>").attr("href","#").attr("data-role","button").attr("data-icon","delete").attr("data-iconpos","left").text("حذف");
anyone has an idea about this issue?
Best Regards
Ali
If you are adding the button after the page is loaded then you need to refresh the element for example $("#mybutton").button(); should work.
here is a working example with the code you provided: http://jsfiddle.net/ashanova/RQVd8/1/
call the .page for the main wrapper where new buttons are added.
$("#content").page();