We Keep Coding

Show tooltip on button click

I currently have the accessible tooltip working on hover. https://jsfiddle.net/lakenney/c1rogqxw/
<!-- Alert -->
<button class="btn btn-xs btn-info gly-radius" data-toggle="tooltip" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
<span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span>
<!-- Alert -->
</button>
Now I want to get it to work on Click. I'm following Julien Vernet's example except that I added accessibility markup. https://themeavenue.net/show-hide-element-onclick-using-boostrap-jquery/
... oh and I'm using button instead of href
This is what I have so far:
<button class="btn btn-xs btn-info gly-radius" data-toggle="tooltip" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
<span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span>
<!-- Alert -->
</button>
$('[data-toggle="tooltip"]').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).toggleClass('hidden show');
});
https://jsfiddle.net/lakenney/c1rogqxw/4/

Add the "trigger" option to your original code:
$(function () {
$('[data-toggle="tooltip"]').tooltip({ trigger: 'click' });
});
jsfiddle
In your second fiddle, you are no longer calling .tooltip() on the button element. You must call that function to instrument the tooltip. By default the tooltip is triggered by hovering over the button. You can change that by providing an options object to the call to .tooltip(). Specifically, you can include the "trigger" option.

You need to do popover instead of tooltip
<button class="btn btn-xs btn-info gly-radius" data-toggle="popover" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" data-content="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
<span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span>
<!-- Alert -->
</button>
Js code
$('[data-toggle="popover"]').popover();
here is the updated fiddle
https://jsfiddle.net/c1rogqxw/5/

Bootstrap: Collapse and Tooltip together

I want to know if its possible to have tooltip on a collapse anchor tag. The code which is use for collapse is:
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Data</a>
It works fine but now I want to add a tooltip to it. So I changed the code to:
<a data-toggle="collapse tooltip" title ="Tooltip Message" data-parent="#accordion" href="#collapseOne">Data</a>
Now it shows the tooltip but the collapse function does not work. What changes I have to do so that both functionality works. I know the text of anchor tag can actually show the message I want to use as tooltip message but just want to know if its possible to have both functionality together

From the Bootstrap Javascript overview page:
Component data attributes
Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.
Try this:
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span data-toggle="tooltip" title="Tooltip Message">Data<span>
</a>

Another solution is to change trigger for tooltip. Default trigger is:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Which will work like this:
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
But you can change it to:
$(function () {
$('[data-tooltip="true"]').tooltip()
})
Which will work like this:
<button type="button" class="btn btn-default" data-tooltip="true" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

jQuery click function not triggering

I am trying to integrate a bootstrap layout into my angular.js project.
I have added the bootstrap.js and bootstrap.css and the layout custom CSS and JS.
my project have jquery added to it.
The problem that I am facing is that a click handler is not being triggered.
this is my code:
$(document).ready(function () {
alert('ready');
$('[data-toggle="offcanvas"]').click(function () {
alert('click');
$('.row-offcanvas').toggleClass('active')
});
});
a popup with "ready" popups at each page refresh however when i click the button that has the attribute data-toggle="offcanvas" nothing pops up.
I have even tried to ad an id attribute to the button and target the button in jquery as follows with no success:
$('#toggleButton').click(....);
the button is html looks like the following:
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
what seems to be going wrong?
Thanks in advance.

How can I enable two buttons clickable?

I'm using the jQuery plugin called "sidr" (http://www.berriart.com/sidr/)
This plugin enables implementation of side menu.
With these code below, only the 1st button is clickable and working fine.
However, I want to enable both of these buttons to open side menu.
How can I modify my code?
Menu Part
<div id="sidr">
...Menu Contents here...
</div>
1st button
Menu
2nd button
<a id="menu" class="btn btn-primary btn-large" href="#sidr">Menu</a>

You are using the id twice, and jQuery only recorgnices the first id:
<a id="menu" class="btn btn-primary btn-large" href="#sidr">Menu</a>
you need to define another id to open the menu with both buttons
edit:
you could use the jQuery.sidr() Function to open the menus by yourself:

Load <div> in javascript

I am facing problem in loading div into my javascript,
My code is:-
$(document).ready(function()
{
$('#example').hide();
$("#myDiv").tooltip({trigger:'hover',placement:'left',html:true,title:'Rate Us'}).popover({trigger:'click',placement:'top',content:$("#example").html(),});
});
<div id="example">
<button type="button" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-ok"></i></button>
</div>
I am not able to load button in the example div on popover.
What should I write in content:$("#example").html(), to load example div?
Please help me.

you cannot use content: for html content on popovers without setting html:true
see here for more information about popovers http://getbootstrap.com/javascript/#popovers
jsfiddle http://jsfiddle.net/CsR5Z/1/