Bootstrap Tooltip not default - javascript

Tooltip at an <i></i> icon, but the style is ugly.
I want to be like in this picture (default Bootstrap)
<script>
$( document ).ready(function() {
$('.mark-read-button').tooltip();
});
</script>
<i data-toggle="tooltip" data-placement="top" title="Tooltip on top" class="fa fa-circle mark-read-button"></i>

Try using this code it uses CDNs and a jumbotron to stop the tooltip from going off of the screen.
<!-- CDNs -->
<!-- JQuery -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Jumbotron is to stop the tooltip from going off of the screen. -->
<div class="jumbotron">
<i data-toggle="tooltip" data-placement="top" title="Tooltip on top" class="fa fa-circle mark-read-button"></i>
</div>
<!-- The script cannot be inside another document -->
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

Related

View doesn't render CSS and Javascript in ASP.NET MVC

i work on a ASP.net MVC project, Ihave a view that contains some parts from shared layouts, I have three shared layout views one of them contain CSS files, second one contain Java Script files and the third one contain HTML code, and I use #RenderPage to set them as a part of a view.
My view contain :
//html code
#RenderPage("~/Views/Shared/_CssPage.cshtml")
//html code
#RenderPage("~/Views/Shared/_LeftSideBar.cshtml")
//html code
#RenderPage("~/Views/Shared/_JsPage.cshtml")
_CssPage.cshtml :
<!-- Favicon-->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<!-- Bootstrap Core Css -->
<link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Waves Effect Css -->
<link href="plugins/node-waves/waves.css" rel="stylesheet" />
<!-- Animation Css -->
<link href="plugins/animate-css/animate.css" rel="stylesheet" />
<!-- Morris Chart Css-->
<link href="plugins/morrisjs/morris.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="css/style.css" rel="stylesheet">
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
<link href="css/themes/all-themes.css" rel="stylesheet" />
_LeftSideBar.cshtml :
<!-- Left Sidebar -->
<aside id="leftsidebar" class="sidebar">
<!-- User Info -->
<div class="user-info">
<div class="image">
<img src="images/user.png" width="48" height="48" alt="User" />
</div>
<div class="info-container">
<div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-transform:uppercase">#ViewBag.User_ID</div>
<div class="email">#ViewBag.User_Type</div>
<div class="btn-group user-helper-dropdown">
<i class="material-icons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">keyboard_arrow_down</i>
<ul class="dropdown-menu pull-right">
<li><i class="material-icons">person</i>Profile</li>
<li role="separator" class="divider"></li>
<li><i class="material-icons">group</i>Followers</li>
<li><i class="material-icons">shopping_cart</i>Sales</li>
<li><i class="material-icons">favorite</i>Likes</li>
<li role="separator" class="divider"></li>
<li><i class="material-icons">input</i>Sign Out</li>
</ul>
</div>
</div>
</div>
<!-- #User Info -->
<!-- Menu -->
<div class="menu">
<ul class="list">
<li class="header">MAIN NAVIGATION</li>
<li class="active">
<a href="/Authentication/Redirect_To_User_Space">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
</ul>
</div>
<!-- #Menu -->
<!-- Footer -->
<div class="legal">
<div class="version">
<b>Version: </b> 1.0.5
</div>
</div>
<!-- #Footer -->
</aside>
<!-- #END# Left Sidebar -->
_JsPage.cshtml :
<!-- Jquery Core Js -->
<script src="plugins/jquery/jquery.min.js"></script>
#rende
<!-- Bootstrap Core Js -->
<script src="plugins/bootstrap/js/bootstrap.js"></script>
<!-- Select Plugin Js -->
<script src="plugins/bootstrap-select/js/bootstrap-select.js"></script>
<!-- Slimscroll Plugin Js -->
<script src="plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<!-- Waves Effect Plugin Js -->
<script src="plugins/node-waves/waves.js"></script>
<!-- Jquery CountTo Plugin Js -->
<script src="plugins/jquery-countto/jquery.countTo.js"></script>
<!-- Morris Plugin Js -->
<script src="plugins/raphael/raphael.min.js"></script>
<script src="plugins/morrisjs/morris.js"></script>
<!-- ChartJs -->
<script src="plugins/chartjs/Chart.bundle.js"></script>
<!-- Flot Charts Plugin Js -->
<script src="plugins/flot-charts/jquery.flot.js"></script>
<script src="plugins/flot-charts/jquery.flot.resize.js"></script>
<script src="plugins/flot-charts/jquery.flot.pie.js"></script>
<script src="plugins/flot-charts/jquery.flot.categories.js"></script>
<script src="plugins/flot-charts/jquery.flot.time.js"></script>
<!-- Sparkline Chart Plugin Js -->
<script src="plugins/jquery-sparkline/jquery.sparkline.js"></script>
<!-- Custom Js -->
<script src="js/admin.js"></script>
<script src="js/pages/index.js"></script>
<!-- Demo Js -->
<script src="js/demo.js"></script>
when i try to access to my view it's look like this
please any help ?
I think the Path of the CSS and JS files need to add / before the link.
Example :
the original path is
<link href="plugins/morrisjs/morris.css" rel="stylesheet" />
you need to add the slash before the link like that :
<link href="/plugins/morrisjs/morris.css" rel="stylesheet" />
hope this help you.

Trigger JavaScript any time the Bootstrap navbar is collapsed or expanded?

I am trying to trigger some JavaScript to execute whenever the Bootstrap navbar is either expanded or collapsed.
I have been stuck on this problem for a few days now, and none of the solutions I have found online appear to work in a reliable way.
<!-- Font awesome -->
<link href="https://markups.io/demo/osteriax/assets/css/font-awesome.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://markups.io/demo/osteriax/assets/css/bootstrap.css" rel="stylesheet">
<!-- Slick slider -->
<link rel="stylesheet" type="text/css" href="https://markups.io/demo/osteriax/assets/css/slick.css">
<!-- Date Picker -->
<link rel="stylesheet" type="text/css" href="https://markups.io/demo/osteriax/assets/css/bootstrap-datepicker.css">
<!-- Gallery Lightbox -->
<link href="https://markups.io/demo/osteriax/assets/css/magnific-popup.css" rel="stylesheet">
<!-- Theme color -->
<link id="switcher" href="https://markups.io/demo/osteriax/assets/css/theme-color/default-theme.css" rel="stylesheet">
<!-- Main style sheet -->
<link href="https://markups.io/demo/osteriax/style.css" rel="stylesheet">
<!-- Start header section -->
<header id="mu-header">
<nav class="navbar navbar-default mu-main-navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button id="navDrop" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- Text based logo -->
<a class="navbar-brand" href="index.html">Osteria<span>X</span></a>
<!-- Image based logo -->
<!-- <a class="navbar-brand" href="index.html"><img src="assets/img/logo.png" alt="Logo img"></a> -->
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right mu-main-nav">
<li>HOME</li>
<li>ABOUT US</li>
<li>MENU</li>
<li>RESERVATION</li>
<li>GALLERY</li>
<li>OUR CHEFS</li>
<li>CONTACT</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</header>
<!-- End header section -->
<!-- jQuery library -->
<script src="https://markups.io/demo/osteriax/assets/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://markups.io/demo/osteriax/assets/js/bootstrap.js"></script>
<!-- Slick slider -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/slick.js"></script>
<!-- Counter -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/simple-animated-counter.js"></script>
<!-- Gallery Lightbox -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/jquery.magnific-popup.min.js"></script>
<!-- Date Picker -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/bootstrap-datepicker.js"></script>
<!-- Ajax contact form -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/app.js"></script>
<!-- Custom js -->
<script src="https://markups.io/demo/osteriax/assets/js/custom.js"></script>
And then the JavaScript:
<script>
/* JS: */
$(document).ready(function(){
$("#navDrop").on("hide.bs.dropdown", function(){
alert(3);
});
$("#navDrop").on("show.bs.dropdown", function(){
alert(4);
});
});
</script>
The above code does not appear to be working.. Thank you in advance for any advice, it is greatly appreciated :)
You're looking for the collapse event, not dropdown. Also, make sure you target the navbar, not the toggle button.
<script>
$(document).ready(function(){
$(".navbar").on("hide.bs.collapse", function(){
alert(3);
});
$(".navbar").on("show.bs.collapse", function(){
alert(4);
});
});
</script>

HTML popover fix

I have table with popover link, like this.
and when it's mouse over it's like this
Do anyone have idea how to make that popover does not cover the price, actually does not enter the next column but is in the same
Here is the code.
<div class="condition-title">
<a data-toggle="popover" data-html="true"
data-content="{{ $rate->description }}
#include('components.book.popover_fees', ['fees'=> $fees])
#include('components.book.popover_advance_payment', ['rate' => $rate, 'type' => 'activity'])">
{{$rate->name_frontend}}
<i class="glyphicons glyphicons-question-sign"></i>
</a>
</div>
Add data-placement="top". See docs: https://getbootstrap.com/docs/4.1/components/popovers/#four-directions
<a data-toggle="popover"
data-placement="top"
...
>...</a>
$(function () {
$('[data-toggle="popover"]').popover()
})
.condition-title {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="condition-title">
<a data-toggle="popover"
data-placement="top"
data-html="true"
data-content="content">
Click to reveal
<i class="glyphicons glyphicons-question-sign">i</i>
</a>
</div>

How to show localStorage data in header using AngularJS

Hello I am working in MEAN Stack And I want show the local-storage value into the
Header of theme.I am using the Metronic theme.
Actually Local Storage data is accessible in view file.everything working fine But
I want to view LOcalStorage data in header that is not showing.
I am using like this.
{{adminData.email}}
It is not showing email of admin in header.
But when I am using same {{adminData.email}} in content file that is
showing mail of admin.I don't know what is the issue.
here is the index.ejs file.
<!DOCTYPE html>
<style type="text/css">
.page-spinner-bar {
display: none;
}</style>
<html lang="en" ng-app="myApp">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<title>Ditro Infotech App</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!-- BEGIN DYMANICLY LOADED CSS FILES(all plugin and page related styles must be loaded between GLOBAL and THEME css files ) -->
<link id="ng_load_plugins_before"/>
<!-- END DYMANICLY LOADED CSS FILES -->
<!-- BEGIN THEME STYLES -->
<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
<link href="../../assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/layout2/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="../../assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico"/>
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE JQUERY PLUGINS -->
<!--[if lt IE 9]>
<script src="../../assets/global/plugins/respond.min.js"></script>
<script src="../../assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE JQUERY PLUGINS -->
<!-- BEGIN CORE ANGULARJS PLUGINS -->
<script src="../../assets/global/plugins/angularjs/angular.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/angular-sanitize.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/angular-touch.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/angular-ui-router.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/ocLazyLoad.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.10/ngStorage.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.7/angular-local-storage.min.js"></script>
<script nsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="js/module/module.js"></script>
<script src="js/controller/controller.js"></script>
<!-- END CORE ANGULARJS PLUGINS -->
<!-- BEGIN APP LEVEL JQUERY SCRIPTS -->
<script src="../../assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="../../assets/admin/layout2/scripts/layout.js" type="text/javascript"></script>
<script src="../../assets/admin/layout2/scripts/demo.js" type="text/javascript"></script>
<!-- END APP LEVEL JQUERY SCRIPTS -->
<script type="text/javascript">
/* Init Metronic's core jquery plugins and layout scripts */
$(document).ready(function() {
Metronic.init(); // Run metronic theme
Metronic.setAssetsPath('../../assets/'); // Set the assets folder path
});
</script>
</head>
<body>
<!-- BEGIN PAGE SPINNER -->
<div ng-spinner-bar class="page-spinner-bar">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<!-- END PAGE SPINNER -->
<!-- BEGIN HEADER -->
<div data-ng-include="'js/view/header.html'" class="page-header navbar navbar-fixed-top">
</div>
<!-- END HEADER -->
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="container">
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div ng-include="'js/view/sidebar.html'" class="page-sidebar-wrapper">
</div>
<!-- END SIDEBAR -->
<div class="page-content-wrapper">
<div class="page-content">
<!-- BEGIN STYLE CUSTOMIZER(optional) -->
<div ng-view></div>
<!-- END STYLE CUSTOMIZER -->
<!-- BEGIN ACTUAL CONTENT -->
<div ui-view class="fade-in-up">
</div>
<!-- END ACTUAL CONTENT -->
</div>
</div>
</div>
<!-- BEGIN FOOTER -->
<div data-ng-include="'js/view/footer.html'" class="page-footer">
</div>
<!-- END FOOTER -->
</div>
<!-- END CONTAINER -->
</body>
<!-- END BODY -->
</html>
index.ejs file include header footer and sidebar file.
here is my header file.
<!-- BEGIN HEADER INNER -->
<div class="page-header-inner container">
<!-- BEGIN LOGO -->
<div class="page-logo">
<a href="#/dashboard.html">
<img src="../../../assets/admin/layout2/img/logo-default.png" alt="logo" class="logo-default"/>
</a>
<div class="menu-toggler sidebar-toggler">
<!-- DOC: Remove the above "hide" to enable the sidebar toggler button on header -->
</div>
</div>
<!-- END LOGO -->
<!-- BEGIN RESPONSIVE MENU TOGGLER -->
<a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
</a>
<!-- END RESPONSIVE MENU TOGGLER -->
<!-- BEGIN PAGE ACTIONS -->
<!-- DOC: Remove "hide" class to enable the page header actions -->
<div class="page-actions">
<!--<div class="btn-group hide">
<button type="button" class="btn btn-circle red-pink dropdown-toggle" data-toggle="dropdown">
<i class="icon-bar-chart"></i> <span class="hidden-sm hidden-xs">New </span> <i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
<i class="icon-user"></i> New User </a>
</li>
<li>
<a href="#">
<i class="icon-present"></i> New Event <span class="badge badge-success">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-basket"></i> New order </a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="icon-flag"></i> Pending Orders <span class="badge badge-danger">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-users"></i> Pending Users <span class="badge badge-warning">12</span>
</a>
</li>
</ul>
</div>-->
<!--<div class="btn-group">
<button type="button" class="btn btn-circle green-haze dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-plus"></i> <span class="hidden-sm hidden-xs">New </span> <i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
<i class="icon-docs"></i> New Post </a>
</li>
<li>
<a href="#">
<i class="icon-tag"></i> New Comment </a>
</li>
<li>
<a href="#">
<i class="icon-share"></i> Share </a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="icon-flag"></i> Comments <span class="badge badge-success">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-users"></i> Feedbacks <span class="badge badge-danger">2</span>
</a>
</li>
</ul>
</div>-->
</div>
<!-- END PAGE ACTIONS -->
<!-- BEGIN PAGE TOP -->
<div class="page-top">
<!-- BEGIN HEADER SEARCH BOX -->
<!-- DOC: Apply "search-form-expanded" right after the "search-form" class to have half expanded search box -->
<!--<form class="search-form search-form-expanded" action="#" method="GET">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search..." name="query">
<span class="input-group-btn">
<i class="icon-magnifier"></i>
</span>
</div>
</form>-->
<!-- END HEADER SEARCH BOX -->
<!-- BEGIN TOP NAVIGATION MENU -->
<div class="top-menu">
<ul class="nav navbar-nav pull-right">
<li class="dropdown dropdown-user">
<a href="javaScript:;" class="dropdown-toggle" dropdown-menu-hover data-toggle="dropdown" data-close-others="true">
<img alt="" class="img-circle" src="../../../assets/admin/layout2/img/avatar3_small.jpg"/>
<span class="username username-hide-on-mobile">
{{adminData.name}} q</span>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-default">
<li>
<a href="#/login">
<i class="icon-key"></i> Log Out </a>
</li>
</ul>
</li>
<!-- END USER LOGIN DROPDOWN -->
</ul>
</div>
<!-- END TOP NAVIGATION MENU -->
</div>
<!-- END PAGE TOP -->
</div>
<!-- END HEADER INNER -->
try to use service/factory. a little not angular way but works fine(ES6)
export function metadataService(httpFactory) {
'ngInject';
this.setMetaTags = function (title='CONSTART',description= 'CONSTART',foto){
var bImgUrl = httpFactory.baseImgUrl;
var photo = foto? bImgUrl+foto :'assets/ico/favicon-32x32.png';
document.querySelector('meta[itemprop=name]').content = title;
document.querySelector('meta[itemprop=description]').content = description;
document.querySelector('meta[itemprop=image]').content = photo;
};
}
and inside your controller/component/directive get your localStorage data and
metadataService(/localStorage.getItem(someItem)/)

Bootstrap popover in modal and input-group-addon

I can't get Bootstrap 3.3.5 popover to work. I want the popover to become visible when hovering the input-group-addon, but nothing happens.
My current code:
Javascript:
$(document).ready(function () {
$("[data-toggle=popover]").popover({ trigger: 'hover', container: '#imgPopover'});
});
HTML
<div class="input-group">
<button id="imgPopover" type="button" class="input-group-addon" data-toggle="popover" data-placement="bottom" data-content="Content" data-trigger="hover">
<img src="~/images/absolent-logo.gif" style="max-height: 20px" />
<span data-bind="html: $parents[1].text.qTempHeader"></span>
</button>
<input type="number" class="form-control" data-bind="value: qTemp"/>
</div>
I've tried a bunch of different things, but nothing seems to do it. A push in the right direction would be much appreciated.
the problem is with the container: '#imgPopover' attribute, the div is too small to contain the popover. change it to body and its working.
$(document).ready(function () {
$("[data-toggle=popover]").popover({ trigger: 'hover', container: 'body'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="input-group">
<button id="imgPopover" type="button" class="input-group-addon" data-toggle="popover" data-placement="bottom" data-content="Content" data-trigger="hover">
test me
</button>
</div>

Categories