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>
Related
When I hover over a bootstrap button on my website it doesn't show the link in the bottom left corner in chrome. Am I missing something here? Here is the code I am currently using for the button.
<button type="button" class="btn btn-primary navbar-btn m-l-15 m-r-15" onclick="location.href='{$relative}/upload'">{translate c='menu.upload'}</button>
You can use an <a> element with a role of button and style it to look like a button but using the same classes that you are currently using.
Only caveat to this would be that you should determine the correct element to use in your situation - for example - a link (a element) should navigate you to a new location or context - whilst a button should be used if it does something in the same location / context.
Also - if the bottonhad other functionality that navigating to the desired location - you will need to re-introduce the click handler and apply logic to perform that function.
<a
href="{$relative}/upload"
role="button"
class="btn btn-primary navbar-btn m-l-15 m-r-15"
>{translate c='menu.upload'}</a>
You can replace it with a link , and style it.
Have a visit to Bootstrap website and you will find Details here.
You can put your link as follows and it may solve your problem
<a href="your_link_here">
<button type="button" class="btn btn-primary navbar-btn ml-5 mr-5">
{translate c='menu.upload'}
</button>
</a>
First change the margin-left and margin-right from m-l-15 and m-r-15 to ml-1 and mr-1. In bootstrap ml and mr class only take values from 1 to 5. It don't takes the values more than 5 in class. You have to give it to css.
Try This:
<a role="button" class="btn btn-primary navbar-btn ml-5 mr-5"
href="{$relative}/upload">{translate c='menu.upload'}</a>
I created this so far using html, bootstrap, and jQuery v1.12.0, and jQuery UI - v1.10. So far what displays is a button that says "menu". Once you click that button, menu will drop down and display a right-aligned box that says "Popover with data-trigger". Once that happens, I want to be able to click the "Popover with data-trigger" button to popover something using bootstrap. I tried using the onclick stuff, as shown in jquery, but it isn't working. What am I doing wrong?
$(".dropdown-menu").css('margin','50px');
$(function () {
$('[data-toggle="popover"]').popover()
})
$("#popoverData").popover({ trigger: "hover" });
<div class="btn-group" style ="left:1860px;top:-140px;">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</button>
<div class="dropdown-menu dropdown-menu-right" style="background: rgba(0,0,255,.35);">
<a id="popoverData" class="btn" href="#" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with data-trigger</a>
</div>
</div>
Actually, I figured out the answer...The thing is I had the right code...
I forgot to put $(document).ready(function() {}); surrounding my popover code, so the code wouldn't run. I think this has something to do with the DOM not being ready? Correct me if I'm wrong guys. This code should work for jquery.
$(document).ready(function() {
$(".dropdown-menu").css('margin','50px');
$(function () {
$('[data-toggle="popover"]').popover()
})
$("#popoverData").popover({ trigger: "hover" });
});
I have a couple of drop downs using bootstrap and I want to code in a simple function to change the class of my span element inside the link that is clicked.
To clarify... Here's an example of the HTML I have:
<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false"
onclick="toggleIcon()">
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="glyphicon glyphicon-triangle-bottom"></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
I am looking for a function (using JS or JQuery) which can toggle the second span class to change between glyphicon glyphicon-triangle-bottom and glyphicon glyphicon-triangle-top.
Bear in mind, this function has to work for multiple drop-downs. Any help would be much appreciated.
$('a[data-toggle="collapse"]').click(function() {
$(this)
.find('.glyphicon-triangle-bottom, .glyphicon-triangle-top')
.toggleClass('glyphicon-triangle-top glyphicon-triangle-bottom');
});
Also remove onclick="toggleIcon()"
This should work for all anchor tags that have data-toggle="collapse" attribute.
Fairly straightforward - better to use a $.click() function and get your classes right:
<a data-toggle="collapse" class="toggle-icon" href="#collapse-panel" aria-expanded="false">
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="icon-toggle glyphicon glyphicon-triangle-bottom"></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
What I did up here was add the class of toggle-icon to the top link, and the class of icon-toggle to the span of the glyphicon...the JS is as follows:
// On Toggle-Icon Click
$('.toggle-icon').click(function(){
// Set Icon To toggle in function
var IconToToggle = $(this).find('.icon-toggle');
// If the icon is the bottom icon
if (IconToToggle.hasClass('glyphicon-triangle-bottom')) {
// Change the icon to the top icon
IconToToggle.removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top');
// Otherwise
} else {
// Change the top icon to the bottom icon
IconToToggle.removeClass('glyphicon-triangle-top').addClass('glyphicon-triangle-bottom');
}
})
Annotations added so you can read the code better. Hope this helps!
https://jsfiddle.net/khxehd05/
$(function(){
$('#checkcls').click(function(){
if($('#tglcls').hasClass('glyphicon-triangle-bottom')){
$('#tglcls').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top');
//to check class
alert($("#tglcls").attr('class'));
}
else{
$('#tglcls').addClass('glyphicon-triangle-bottom').removeClass('glyphicon-triangle-top');
//to check class
alert($("#tglcls").attr('class'));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false" id='checkcls'>
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="glyphicon glyphicon-triangle-bottom" id='tglcls'></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
Hope it helps you.
So far answers here I would consider just mildly-ok (in my humble opinion). Take a moment and read:
Decoupling Your HTML, CSS, and JavaScript
I would change a few things to make it look really readable and maintainable:
Html:
<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false">
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="glyphicon glyphicon-triangle-bottom hide-on-expanded"></span>
<span class="glyphicon glyphicon-triangle-top hide-on-collapsed"></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
css:
[data-toggle="collapse"][aria-expanded="false"] .hide-on-collapsed{
display: none;
}
[data-toggle="collapse"][aria-expanded="true"] .hide-on-expanded{
display: none;
}
Working JsFiddle Example
I highly recommend you avoid at all costs using inline functions. (onclick="toggleIcon()")
Take advantage of CSS and what Bootstrap already does by simply writing html and css only!
Completely reusable, doesn't care what glyphs you use, doesn't require javascript, nothing is hard-coded in terms of events nor classes.
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/
I have a page (using Bootstrap and AngularJS) with several instances of the same button, each instance relates to a particular element the button is next to.
I want to implement a temporary window that will pop as soon as I click on one of the instances and will include a number of buttons.
For instance, imagine a table with data, each record showing different status and hence the options that will be offered will depend on the status of the record. Also, at the right of each record there is a button giving access to the possible actions on the record. Whenever I click on a button, a small window needs to be shown next to the clicked button showing the applicable actions (e.g. "Delete", "Activate", "Retire", etc.).
The size of the temporary window will adjust according to the number of buttons shown.
I found a nice solution (at least, it very well complies with my needs). It is a bootstrap dropdown button into which it is possible to embed a dynamic list of buttons (again, depending on the contents of the record in my example).
So, the HTML would look like:
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<button ng-if="Delete" type="button" class="btn btn-warning" ng-click="Delete($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Delete </font></button>
<button ng-if="Retire" type="button" class="btn btn-warning" ng-click="Retire($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Retire </font></button>
<button ng-if="Activate" type="button" class="btn btn-warning" ng-click="Activate($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Activate</font></button>
<button ng-if="Promote" type="button" class="btn btn-warning" ng-click="Promote($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Promote </font></button>
</div>
</div>
Thanks to those that posted suggestions.
<td style="position:relative">
<button>
button to be clicked
</button>
<div style="position: absolute; display:inline-block; /*width, height, top, bottom*/ these option you need to set">
option1 option 2 option 3
</div>
</td>
On click of the button hide/show this div. Because the div-Element is absolute to its parent container, it will be always near the button if you give proper attributes.