Tooltip onclick to hide - javascript

How do I hide the tooltip after I click the dropdown menu? Here is the script
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
placement : 'bottom'
});
});
</script>
This is the html
<ul class="nav navbar-nav">
<li class="dropdown" data-toggle="tooltip" data-placement="bottom" data-original-title="Main Link">
<i class="fa fa-briefcase"></i>
<ul class="dropdown-menu" role="menu">
<li>link</li>
<li>link</li>
</ul>
</li>
</ul>

I haven't tested this but you can try using this, Change this:
<li class="dropdown" data-toggle="tooltip" data-placement="bottom" data-original-title="Main Link">
with:
<li id="tooltip" class="dropdown" data-toggle="tooltip" data-placement="bottom" title="Main Link">
and JS:
$(".dropdown-menu li").click(function() {
$('#tooltip').tooltip('hide');
});

Related

Adding second child to dropdown menu

Im experiencing an issue adding a second child to the drop-down-menu.
here is my html code:
<ul class="sidenav sidenav-fixed" id="nav-mobile">
<li>
<a onclick="load('file-name')"><i class="material-
icons">home</i>TEXT
</a>
</li>
<div class="divider"></div>
<li><a onclick="load('file-name')"><i class="material-
icons">apps</i>TEXT</a>
</li>
<li><a onclick="load('file-name')"><i class="material-
icons">copyright</i>Copyright</a>
</li>
<li class="button-dropdown">
<a onclick="load('file-name') class="dropdown-toggle"><i class="material-
icons">assignment</i>Unit A<i class="fa fa-angle-right changed"></i>
</a>
<ul class="dropdown-menu" style="display: none;">
<li>
<a onclick="load('file-name')">Menu 1</a>
</li>
</ul>
<ul class="dropdown-menu" style="display: none;">
<li>
<a onclick="load('file-name')">Menu 2</a>
</li>
</ul>
</li>
</ul>
and here is my js:
jQuery(document).ready(function (e) {
$(".dropdown-toggle").click(function () {
$(this).parents(".button-dropdown").children(".dropdown-
menu").toggle().parents(".button-dropdown").children(".dropdown-
toggle").addClass("active")
});
$('.dropdown-toggle').on('click', function () {
$(this)
.find('.changed')
.toggleClass('fa-angle-down')
.toggleClass('fa-angle-right');
});
});
Here are the styles applied for drop-down-menu:
.dropdown-menu li > a {
text-align: center;
}
.dropdown-menu li:hover > a {
background-color: #385170 !important;
color: #fff !important;
}
.changed {
margin-left: 5px;
}
I need to add another child under Menu 1 and Menu 2.
Thanks a lot for your help.
The first issue I found in your code is that you are defining the same event twice, which means that only the last one will be executed.
To append items with jQuery inside an event listener is as easy as:
Keeping code clean.
Globals at the beginning of your code:
var buttonDropdown = $(".button-dropdown");
And then your event listener for dropdown-toggle click:
$('.dropdown-toggle').on('click', function () {
buttonDropdown.append("<li>new item</li>");
});
This will append a new item to button-dropdown everytime you click dropdown-toggle.
Here is an example:
var buttonDropdown = $(".button-dropdown");
jQuery(document).ready(function (e) {
$('.dropdown-toggle').on('click', function (event) {
let itemNumber = buttonDropdown.children().length;
buttonDropdown.append("<ul><li>Menu "+itemNumber+"</li></ul>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sidenav sidenav-fixed" id="nav-mobile">
<li>
<a onclick="load('file-name')">
<i class="material- icons">home</i>TEXT
</a>
</li>
<div class="divider"></div>
<li>
<a onclick="load('file-name')">
<i class="material- icons">apps</i>TEXT
</a>
</li>
<li>
<a onclick="load('file-name')">
<i class="material- icons">copyright</i>Copyright
</a>
</li>
<li class="button-dropdown">
<a onclick="load('file-name')" class="dropdown-toggle">
<i class="material- icons">assignment</i>Unit A
<i class="fa fa-angle-right changed"></i>
</a>
<ul class="dropdown-menu" style="display: block;">
<li>
<a onclick="load('file-name')">Menu 1</a>
</li>
</ul>
<ul class="dropdown-menu" style="display: block;">
<li>
<a onclick="load('file-name')">Menu 2</a>
</li>
</ul>
</li>
</ul>
Note: This example is made from the context you provided. If it still not solves your entire issue, feel free to edit your question and comment here so I can update mine with the requirements for your question.
And also, you did not provide any styles for your code, that's why it looks so plain.

Close bootstrap dropdown on click same link

I've got a bootstrap 3 drop down and it should close when the user is clicking on the same link again.
Here's my html:
<li class="dropdown menu-karriere">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="asd">
Karriere <b class="caret"></b>
</a>
<ul class="dropdown-menu" data-lvl="0">
<li class="menu-ausbildung">Ausbildung</li>
<li class="menu-geselle">Geselle</li>
<li class="menu-meister">Meister</li>
</ul>
</li>
If I click on the a.dropdown-toggle the drop down opens - which is correct. If I click the same link again, the drop down doesn't close.
Can anybody help me with that?
I couldn't find something on SO or anywhere else.
Thanks.
Use this code. It will give you desired result.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Karriere
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Ausbildung</li>
<li>Geselle</li>
<li>Meister</li>
</ul>
</div>
You have data-target="#" which prevents it closing:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown menu-karriere">
<a class="dropdown-toggle" data-toggle="dropdown" href="asd">
Karriere <b class="caret"></b>
</a>
<ul class="dropdown-menu" data-lvl="0">
<li class="menu-ausbildung">Ausbildung
</li>
<li class="menu-geselle">Geselle
</li>
<li class="menu-meister">Meister
</li>
</ul>
</li>

Bootstrap nav-list could not stay expand when pageload

Struggle in this question quite some time, i have try through several way to fix this, but there are not hope signed.
code for html:
<ul class="nav nav-list" >
<li class="active" >
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-sitemap"></i>
<span class="menu-text" >
Menu
<b class="arrow fa fa-angle-down"></b>
<ul class="submenu" >
<li class="#" >
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-map-marker"></i>
<span class="menu-text" >
Burger Choice
<b class="arrow fa fa-angle-down"></b>
<ul class="submenu">
<li class="#" >
<asp:LinkButton runat="server" id="Burgerset" onClick="MenuSet_Click" CommandArgument="Chicken Burger:0">
<i class="menu-icon fa fa-caret-right"></i> BurgetSet
</asp:LinkButton>
</li>
</li>
<ul>
Here is the script:
$(document).ready(function () {
$('.nav li a').click(function () {
var $this = $(this);
$this.parent().siblings().removeClass('active').end().addClass('active');
});
});
How to can make the menu click and the nav-list still keep expand?
so far now only the asp:LinkButton have link with others webpage,
but it will reset back to Menu won't stay inside list link after click.
The way i want is the list will memorized user click.

Click of li display content in iframe on same page

I have a one html page and top of the page I am display the some menu .under menu having some li. Now I want to click on any li and displaying the content of each li below the iframe:
<div class='main_container'>
<ul class="nav nav-tabs">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Tea <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation">Tea1</li>
<li role="presentation">Tea2</li>
</ul>
</li>
<div id="nav">
<iframe id='link'></iframe>
</div>
</div>
Can anyone tell me how I can do that?
use target="iframe"
here is the example http://jsfiddle.net/47tub983/

Showing DropDown list in twitter bootstrap doesn't work correctly

I have a two drop down list using twitter bootstrap, but I have a small problem .. when choosing the menu , the sub items appears , bu then in the next time don't .
Html code :
<ul class="nav nav-pills left">
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" style="color:#fff;" data-toggle="dropdown" href="#menu1"><i class="icon icon-user icon-white">
</i> My Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Previouse Report</li>
<li>My Profile</li>
<li class="divider"></li>
<li>
<asp:LinkButton ID="lbtnLogout" runat="server" CausesValidation="false" ForeColor="Black">Log out</asp:LinkButton></li>
</ul>
</li>
<li class="dropdown active" id="menu2">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu2"><span class="badge-notification badge badge-error">
<asp:Label ID="lblMsgCount" CssClass="lblMsgCount" runat="server" Text=".."></asp:Label></span>
<i class="icon icon-envelope icon-white">
</i> Notificatons <span class="caret"></span></a>
<ul ID="divNewNotifications" class="dropdown-menu">
</ul>
</li>
</ul>
JavaScript code :
$('.dropdown-toggle').dropdown();
and included the required lib.
<script src="../bootstrap/js/bootstrap-dropdown.js" type="text/javascript"></script>
Here is the code on http://jsfiddle.net/zNVgq/2/

Categories