Is there a way to specify that a button acts as both a dropdown trigger AND a tooltip source?
I've been able to get it to do one or the other, but not both. My code below works as a dropdown, but if I reposition the data-toggle="dropdown" to before the one for tooltip, then it renders a tooltip instead:
<button class="btn btn-sm dropdown-toggle"
data-toggle="tooltip" data-toggle="dropdown"
data-placement="bottom"
title="Test Tooltip">
You can initialize the tooltip through any attribute, id or class to avoid crossover with dropdown.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle-second="tooltip" data-placement="right" title="Tooltip on right">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
$('[data-toggle-second="tooltip"]').tooltip();
https://www.codeply.com/go/aFEQgHs1sC
In such cases I find it easiest to simply put the label of the button within a span that has the tooltip itself
<button class="btn btn-sm dropdown-toggle" data-toggle="dropdown">
<span data-toggle="tooltip" title="Test Tooltip">
Button label
<span>
</button>
This way the button has the toggle action for the click event (including on the label) but the label has the tooltip event, and the two data-toggle attributes are on different elements so don't clash.
You could try making something like this where you have the button as data-toggle="tooltip" And add a dropdown
<ul class="nav navbar-nav">
<li class="btn btn-sm dropdown" id="example" data-toggle="tooltip" data-placement="right" title="Test Tooltip" >
<a id="dropdown" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Im a drop down with a tooltip <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Link or whatever</a></li>
</ul>
</li>
</ul>
$('#example').tooltip();
http://jsfiddle.net/h56xw8wq/67/
Related
How can I append the value of the dropdowm menu item in the text "Sorted by"?
I want to show in the button text something like this:
Sorted by: Highest positive votes or Sorted by: Alphabetic according to the dropdown item selected.
<div class="btn-group float-right">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Sorted By</span>
</button>
<div class="dropdown-menu item-sorted" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#" id="datesort" name='thumbsUp'>Highest positive votes</a>
<a class="dropdown-item" href="#" id="datesort" name='thumbsDown'>Highest negative votes</a>
<a class="dropdown-item" href="#" id="datesort" name='comments'>Highest comments</a>
<a class="dropdown-item" href="#" id="datesort" name='alphabetic'>Alphabetic</a>
</div>
</div>
If the selected dropdown option is marked by a selected="true" attribute, for example, you can get it like so:
$("#dropdownMenuButton span").html("Sorted By " + $('dropdown-menu[aria-labelledby="dropdownMenuLink"] a.dropdown-item[selected="true"]').text());
Please keep in mind that this will not be triggered on an event click. To do it on an event click:
$("div.dropdown-menu a.dropdown-item").click(function(e){
$("#dropdownMenuButton span").html("Sorted By " + $(this).text()); // gets the selection text and puts it in the button
$(this).parent().find("a.dropdown-item[selected=true]").attr("selected", null); // unselects previous selections
$(this).attr("selected", "true"); // selects the current one
});
This attaches a listener to all anchor elements with a class dropdown-item that are children to any div with a dropdown-menu class.
something like this with jquery:
$('.dropdown-menu a').onClick(function () {
var text = $(this).text();
$('#dropdownMenuButton span').text( "Sorted By: " + text);
});
You can try following
Add an element that will show the sorted by text
Add click event listeners
document.querySelectorAll(".dropdown-item").forEach((el) => {
el.onclick = (ev) => document.getElementById("sorted-by").textContent = ev.currentTarget.textContent;
});
<div class="btn-group float-right">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Sorted By <span id="sorted-by"></span></span>
</button>
<div class="dropdown-menu item-sorted" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#" id="datesort" name='thumbsUp'>Highest positive votes</a>
<a class="dropdown-item" href="#" id="datesort" name='thumbsDown'>Highest negative votes</a>
<a class="dropdown-item" href="#" id="datesort" name='comments'>Highest comments</a>
<a class="dropdown-item" href="#" id="datesort" name='alphabetic'>Alphabetic</a>
</div>
</div>
You can do something like this. All you need to do is add a span with the class .option to your html and this small part of jquery which checks for when you click on your dropdown and adds said elements text to your button:
$('.dropdown-item').click(function() { // When dropdown is clicked:
$(".option").text($(this).text());
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="btn-group float-right">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Sorted By <span class="option"></span></span>
</button>
<div class="dropdown-menu item-sorted" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#" id="datesort" name='thumbsUp'>Highest positive votes</a><br/>
<a class="dropdown-item" href="#" id="datesort" name='thumbsDown'>Highest negative votes</a><br />
<a class="dropdown-item" href="#" id="datesort" name='comments'>Highest comments</a><br />
<a class="dropdown-item" href="#" id="datesort" name='alphabetic'>Alphabetic</a>
</div>
</div>
Here is the code
some.component.html
<div class="btn-group dropdown" normalizePosition ng-click="toggle()">
<button class="dropdown-toggle btn btn-sm btn-primary"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-cog"></i><span class="caret"></span> {{l("Edit")}}
</button>
<ul class="dropdown-menu">
<li>
<a (click)="openReport(id)">{{l('Run Report')}}</a>
</li>
</ul>
some.component.ts
openReport(id): void {
this.router.navigate(['/app/main/sale/viewer', id]);
}
When you are navigated to the sale viewer page in the browser the button is still showing and I'm not sure how to remove this after it's been clicked. Does anyone have ideas?
I am using the bootstrap dropdown in my Angular project. but on click is not showing dropdown-menu. actually, after clicking, the show class not added in the drop-down and aria-expanded="false" is not change into "true
<div class="dropdown>
<button class="btn btn-secondary dropdown-toggle f-f-r f-14" type="button" id="dropdown123" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Save Button
<span class="caret"></span>
</button>
<div class="dropdown-menu f-f-r f-14 p-t-12 p-b-12" aria-labelledby="dropdown123">
<a class="dropdown-item"
<button>S1 </button>
</a>
<a class="dropdown-item">
<button>S2 </button>
</a>
<a class="dropdown-item">
<button>S3 </button>
</a>
</div>
</div>
I tried your code without your custom style classes and only added a missing " at <div class="dropdown"> and a missing > at < class="dropdown-item"> and it worked for me.
Here is the working code with the missing stuff and without your custom css.
<div class="dropdown">
<button class=" btn btn-secondary
dropdown-toggle" type="button" id="dropdown123"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Save Button <span class="caret"></span>
</button>
<div class="dropdown-menu"
aria-labelledby="dropdown123">
<a class="dropdown-item">
<button>S1</button>
</a> <a class="dropdown-item">
<button>S2</button>
</a> <a class="dropdown-item">
<button>S3</button>
</a>
</div>
</div>
If it does not work please check if you are using Bootstrap 4, maybe it was different with V3 but I dont think so, not sure though.
Currently the dropdown menu appears only if I click on the img tag. How to make it appear when I click on the button tag? Here is my code:
<div class="btn btn-link dropdown account-menu-btn">
<a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
Create
</a>
</li>
</ul>
</div>
I modified the code using data-target, but I still need to click on the image and not on the button to expand the dropdown menu. Any sugestions?
<div class="btn btn-link dropdown account-menu-btn" style="background-color:yellow" data-target="#myModal">
<a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
</a>
<ul id="myModal" class="dropdown-menu pull-right" role="menu">
<li>
<a href='#Url.Action("About", "Home")'>
Create
</a>
</li>
</ul>
</div>
I believe the answer is clearly stated in the twitter-bootstrap javascript section
Your code isn't really too far from what's on there:
<div class="btn btn-link dropdown account-menu-btn">
<a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right" aria-labelledby="dLabel">
<li>
Create
</li>
</ul>
</div>
Hope this helps
You could also try to do it with Javascript and Jquery.
$( '#BUTTONID' ).click(function() {
$( '#MENUID' ).toggle();
});
This is a very condensed version, but it is ought to work.
I am a very new to Javascript. now I have a dropdown list within django.
---Select a status---
ALL
Expired
Pending
if I select give "ALL" as an example, it would navigate to "/all/" page, this is the correct behavior, but how can I change the text to "ALL" ?
<div id="dropdown1" class="dropdown filter" >
<a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="placeholder">---Select A Status---</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a class="active" href={{ view_all }}>All</a></li>
<li><a class="" href={{ view_exipred }}>Expired</a></li>
<li><a class="" href={{ view_pending }}>Pending</a></li>
<li class="divider"></li>
</ul>
</div>
Sorry for the incorrect edit.above are the code here.