According the documentation is is possible to turn off the functionality just doing $('body').off('.alert.data-api').
In the case of tooltip I tried the following from js console $('body').off('.tooltip.data-api') but it does not disable the tooltip on bottons.
Any hints how to precede?
You can't disable tooltips that way because it has no event listener on the body. Instead, you can disable the tooltips themselves using the code below.
$('[rel=tooltip]').tooltip() // Init tooltips
$('[rel=tooltip]').tooltip('disable') // Disable tooltips
$('[rel=tooltip]').tooltip('enable') // (Re-)enable tooltips
$('[rel=tooltip]').tooltip('destroy') // Hide and destroy tooltips
Edit: For Bootstrap 4, the 'destroy' command has been replaced by the 'dispose' command, so:
$('[rel=tooltip]').tooltip('dispose') // Hide and destroy tooltips in Bootstrap 4
Can you try:
$('a[rel=tooltip]').tooltip();
$('a[rel=tooltip]').off('.tooltip');
Don't forget to change the selector. Works fine for me... http://jsfiddle.net/D9JTZ/
To permanently disable a tooltip:
$('[data-toggle="tooltip"]').tooltip("disable");
To stop the tooltip from being displayed on hover but have the ability to re-enable it:
$('[data-toggle="tooltip"]').tooltip("destroy");
$('[data-toggle="tooltip"]').tooltip(); // re-enabling
I found a way to do it using CSS! Just add .tooltip { visibility: hidden } to your CSS file.
If you want to make your link accessibility friendly without the tooltip, then just add aria-label= "Here's a link description."
Hope this helps!
I struggled too with this, but I came up with a solution!
In my case I use Jquery Sortable which is ofcourse annoying when you have tooltips flying around!
So I made a variable
var sort = '0`;
And since almost every tooltip has an init() function, I created
if(window.sort!='1') { // So I'm not sorting
init.tooltip();
}
So, this can be the easiest enable/disable function!
Related
How to create a custom tooltip in lineChart of nvd3.js?, i want to add a "total" value in the tooltip something like this
I've tried to call the chart.tooltip.contentGenerator, to create a custom tooltip, but the data is empty
chart.tooltip.contentGenerator(function(data) {
console.log(data) //empty
});
i'am using nvd3 version 1.8.5 and d3 version 3.5.9 only,
here's my fiddle: sample
Please try using chart.interactiveLayer.tooltip.contentGenerator. Testing your code with this line, I was able to watch values inside data variable, as you can see below:
.
From here you could construct or edit your custom tooltip as you wish. Let me know if it works for you.
[EDIT - SUGGESTION TO INCLUDE EVENT BEHAVIOR]
Looking inside NVD3, I realized that the tooltip's contentGenerator contains all specific code to add events behavior for tooltip. If you take a look at the original tooltip, it uses a class called highlight to mark focused color, but the custom tooltip has not implemented this events and does not highlith focused color.
I know it's a step back, once you have made you own code for thisd custom tooltip, but seems that the only way to achieve this is to rebuild your code to inlcude event behavior. Maybe starting from the orginal code that NVD3 includes to create tooltip usign contetGenerator will help (thats the way I would take, but it's up to you if you prefer to implement this on your current code).
If you want to take a look at this code, please find tooltip.js for your NVD3 version or visit this GitHub link
On this file, if you check at line 83, of just searching for "highlight" on the file, you can see the way event enter() is implemented for all tr elements inside table body, adding the classname highlight.
var trowEnter = tbodyEnter.selectAll("tr")
.data(function(p) { return p.series})
.enter()
.append("tr")
.classed("highlight", function(p) { return p.highlight});
My suggestion is to take all this code (I mean all inside contentGenerator function) for your custom contentGenerator, so you can asure that all HTML code is generated true to the original, even with associated behavior, and then override it to include the customization you have made for the title.
Please, try this and let me know if you can manage to solve the problem.
#Dave Miller
Thanks sir, i also figured it out sorry if i didn't share. i do it like this\
Maybe i did the long method, anyway thanks!
I have an accordion that can expand collapse.
I set up some FontAwesome icons to help illustrate when it's open and closed - however, I can't seem to get it to change icons.
I was basing this knowledge off other StackOverflow posts that I saw - but for some reason I can't seem to get mine to work. If I had to guess I'm definitely missing the ball with jQuery. I struggle there, so I'm assuming I'm not selecting the right element.
I put just the chunk of code for the accordion into a JSFiddle:
https://jsfiddle.net/ehkv99h9/18/
$(this).find($(".fa")).removeClass('fa-caret-right').addClass('fa-caret-down');
is what I think is tripping me up (as seen line 14 in my jsfiddle - I commented out for now since it wasn't working)
I tried writing some stuff to console.log to help determine if I was selecting the right part in my code, but I couldn't figure it out unfortunately.
What would I need to change in order to get my caret to rotate to the down position when it expands?
(One note: I have a few arrows there, I was testing out different icons, but I think it would be the same "fa-caret-right"/"fa-caret-down" vs. "fa-angle-right"/"fa-caret-down").
You need to use the latest version of FA, the 5.0.9
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
and jQuery 3.x
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
then you can use the example provided by the documentation:
https://fontawesome.com/how-to-use/svg-with-js
in the section "Support for dynamic changes"
$(this)
.find('[data-fa-i2svg]')
.toggleClass('fa-angle-down')
.toggleClass('fa-angle-right');
you can se the result in the fiddle: https://jsfiddle.net/0hkd2sor/3/
You can add this code in onclick listener for toggle Class
if(this.classList.value.indexOf("fa-caret-right") > -1){
this.classList.add("fa-caret-right");
this.classList.remove("fa-caret-right");
}else
{
this.classList.add("fa-caret-right");
this.classList.remove("fa-caret-down");
}
OK, I am baffled on how to get Bootstrap 3 Tooltip working.
Bootstrap Tooltip "instructions"
http://getbootstrap.com/javascript/#tooltips
Says to trigger using:
$('#example').tooltip(options)
then HTML to write
Hover over me
No matter what I do, I cannot seem to get it working. There is no ID named example in their example, and adding said ID does not work (I wrap the script in a script tag and have added it before and after the anchor).
But, after looking around on Google, I found the following code, which when added makes the Tooltip work as it should.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
So, my question is, How the hell do I get it working with the provided Bootstrap code! What am I missing? They really need to work on their instructions. This should not take this long to figure out when it should be simple!
I was able to recreate this in a fiddle. Check the console on your browser if you are getting javascript errors. Looking at the code you have provided though it hits me that you might be mixing two things together. The options need to be defined in your javascript code and not in HTML, like this:
$(document).ready(function() {
var option = {
title: "example",
placement: "bottom"
};
$("#example").tooltip(option);
});
Well, this is about how to read the document of bootstrap.
$('#example').tooltip(options)
just presents how to use the jquery method, and it is not right for the following html:
Hover over me
The method must be called in order to active the tooltips plugin. So, in order to make the html working with the plugin, you need to do two steps:
add an id into the html, say,
Hover over me
call the jquery method,
$('#tips').tooltip(options)
I have a div that contains a table. This table is dynamically updated, and is filling up with data as user is using our website.
Is it possible to force this div to always be scrolled to bottom? So that the user will always be able to see the bottom most table row that was added.
Thank you!
That would be something like
...onRowAdded = function() {
$('#myTable').animate({scrollTop: $('#myTable').attr('scrollHeight')});
};
Note, if the rows are added very often, you would want to use setTimeout with blocking variable check at the beginning to prevent scrolling down more often than twice per second or so. This technique is discussed e.g. here
UPDATE
Starting with jQuery 1.6 it is better to use .prop() instead of .attr() (see comments to this question):
onRowAdded = function() {
$('#myTable').animate({scrollTop: $('#myTable').prop('scrollHeight')});
};
Set the update element as position absolute and bottom:0
DEMO http://jsfiddle.net/Mdzmx/
Try something like it :
Create a anchor like <a id='bottomDiv'></a> and insert a javascript like this document.getElementById('bottomOfDiv').scrollIntoView(true);
I made a example here
http://jsfiddle.net/PTmpL/1/
Follow this tutorial
http://jqueryfordesigners.com/fixed-floating-elements/
but use the bottom css property to have the bottom most element, visible on the page
element{
bottom:0;
}
I'd recommend using the ScrollTo JQuery plugin. Just use
element.scrollTo('max', {axis: 'y'});
or
element.scrollTo('max', duration, {axis: 'y'});
This plugin has the added benifit of having a nice smooth scroll.
I think this could be the easy solution !!!
element.scrollTo(element.get(0).scrollHeight);
after logging on to facebook, there is a downward arrow symbol after home tab. On clicking it shows a div (?) which just appears on the existing content and on another click it disappears.
How can I make exactly such a thing?
Edit:
I followed this link from TheBlackBenzKid. One thing is clear, on clicking on the button, just 2 divs are toggled.
But AFAIK toggle takes place on mouse click. so the 'click' event should be there in the jquery code.
1) But I didn't find it. where is that?
2)there is some css that makes it possible for the menu to appear on a place without dislocating the existing content there( from the demo this is not visible, but it does happen actually). What is that css code?
There are so many ways to do these things: thefinishedbox.com/files/freebies/dropdown-gui/index.html this is a nice one that already comes with simple clean CSS look and feel
This is how i wouldve done it, but its a pretty basic solution.
div id="arrowid">▼</div>
<div id="dropdownbox" style="display:none;">Dropdownbox</div>
<script type="text/javascript">
$(document).ready(function() {
$('#arrowid').click(){
$('#dropdownbox').toggle();
});
});
</script>
this one does'nt support outside clicks, it just shows and hides when clicking the arrow. Hope it helps!
You can use .slideToggle() to achieve this effect, if you are using jQuery.
Use it to display or hide the matched elements with a sliding motion.
.slideToggle( [duration] [, easing] [, callback] )
duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
callback: A function to call once the animation is complete.