I am trying to display content when hovering over an icon.
When I hardcode it in my HTML it works fine.
But when I try to render the same thing through javascript, nothing happens on hover.
So this works when written in HTML directly:
<i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body"
data-toggle="popover"
data-html="true"
data-content="hello"i>
This does not work
<!--html-->
<i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body"
data-toggle="popover"
data-html="true"
i>
<!--javascript-->
document.getElementById("iconid").setAttribute("data-content", "hello");
When I inspect the rendered code, everthing seems exactly the same in both cases, but in 2nd case nothing happens on hover.
Thanks for any help!
If you use bootstrap, you might want to call popover event manually after manipulating element by JS.
$('[data-toggle="popover"]').popover()
I think issue is, by the time you call your JS manipulation, bootstrap already finished binding events for the elements. So it got left behind.
Related
I have the following code where I use an Anchor tag instead of a button in my Bootstrap dropdown. The problem is that, despite what is said here, when I click on the Anchor tag (labeled Action) the browser opens the Anchor tag instead of just opening the menu. In other words, the default behavior of the Anchor tag is not prevented.
We use Bootstrap v3 and this does not happen in all the environments, only in prod for now and sometimes on my local machines. This happens accross all the known browsers i.e. Chrome, IE, FF for the desktop version, the non-desktop version does not have this functionality, so we did not test it there.
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" role="button" data-toggle="dropdown" href="#">
Action <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
Finally we used the following line of code to cancel out the default behaviour, but we never figured out the root cause of this happening only in one environment not in others:
$(".btn .dropdown-toggle").click(function(event){ event.preventDefault();})
Why do you need href="#"?
Use href="" instead of href="#".
Try removing from the code
role="button"
why is it an anchor?
you've missed out the data-target attribute as shown in the bootstrap documentation
https://getbootstrap.com/docs/3.3/javascript/#dropdowns
I am dynamically adding li tag to UL .the following is very complex li tag with which i am getting syntax issue.Could any one please help me to fix following tag.
Any basic tutorials to form these kind of links also great.
I am trying to bind link with some conditions.on click of a link it opens a new page .
notifcationUL.append('<li><div class="pull-left"><strong>See All Notifications</strong><i class="fa fa-angle-right"></i></div><div class="pull-right"> Clear Notifications <span class="glyphicon glyphicon-trash pull-right "></span></div></li>');
You can't add server side asp code to the page on the client side with jquery :/
You're doing something fundamentally wrong. Can you edit your question explaining what you're trying to archieve?
Your quotations are off . When you append anything with jQuery the inner quotes must be opposite of outside quotation . See below.
your syntax :
notifcationUL.append('<li><div class="pull-left"><strong>See All Notifications</strong><i class="fa fa-angle-right"></i></div><div class="pull-right"> Clear Notifications <span class="glyphicon glyphicon-trash pull-right "></span></div></li>');
correct syntax :
notifcationUL.append('<li><div class="pull-left"><strong>See All Notifications</strong><i class="fa fa-angle-right"></i></div><div class="pull-right"> Clear Notifications <span class="glyphicon glyphicon-trash pull-right "></span></div></li>');
I have multiple bootstrap popovers and I'm trying to re-size them as needed with a JS.
Everything works if I have only one of these re-size functions and only the one clicked first will work. I tried to merge them, rename them with ID or class and nothing works for me.
my buttons
<a role="button"
class="btn-default a"
data-container="body"
data-toggle="popover"
data-placement="left"
id="a">Button A</a>
<a role="button"
class="btn-default b"
data-container="body"
data-toggle="popover"
data-placement="bottom"
id="b">Button B</a>
Any way to have multiple of these alongside?
// button class a
var p = $('#a').popover();
p.on("show.bs.popover", function(e) {
p.data()["bs.popover"].$tip.css("max-width", "300px");
});
// button class b
var p = $('#b').popover();
p.on("show.bs.popover", function(e) {
p.data()["bs.popover"].$tip.css("max-width", "500px");
});
BTW I have also tried to control the size of these popovers with CSS styles without any luck.
My page is scrolling every time I update part of my model that is bound to my view. I think when the view updates, the page scrolls. How do I eliminate this behavior?
Here is an example of a drop down. Every time an item on the dropdown is selected, I update the model. Then, the page scrolls:
<div class="header_item btn-group" dropdown is-open="dd8.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
<span>{{a.Summaries[a.summaryIdShown].AgeSpecified}}</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu accordion_item" role="menu">
<li>Adult</li>
<li>Pediatric</li>
<li>Both</li>
</ul>
</div>
Thanks in advance.
This is what makes the page scrolling: href="#" . The pawn symbol in href attribute means: scroll to the top. To fix that, just set to href="javascript:void(0)".
In Angular, href="#" does not prevent the default click action because is a directive which is what is causing the reload for you <a href=''..> should solve your problem. The docs for the anchor tag directive can be found here
I noticed that my twitter bootstrap tooltips were not respecting data-position.
So, I headed over to the Twitter Bootstrap tooltips demo, specifically looking at the "Tooltip on X" examples, and this is what I get:
It looks like there is no support for the direction?
But, the popovers, which the tooltips inherit from (or possibly it's the other way around?) work:
Browsers tried:
Chromium 24.0 on Ubuntu 12.10
Firefox 19.0 on Ubuntu 12.10
Is this a bug that should be reported, or something else going on here?
Jsfiddle Jsfiddle with tooltip working
Its not a bug , but we need to initialize them .
Important Bootstrap website states "For performance reasons, the tooltip and popover data-apis are opt in, meaning you must initialize them yourself." Bootstrap website Tooltip section
<div class="navbar tooltip-demo">
<ul class="nav">
<li><a class="top" title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Tooltip on top">Tooltip on top</a></li>
<li><a class="right" title="" data-placement="right" data-toggle="tooltip" href="#" data-original-title="Tooltip on right">Tooltip on right</a></li>
<li><a class="bottom" title="" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Tooltip on bottom">Tooltip on bottom</a></li>
<li><a class="left" title="" data-placement="left" data-toggle="tooltip" href="#" data-original-title="Tooltip on left">Tooltip on left</a></li>
</ul>
</div>
The javascript to use , you will have to initialize
$('a').tooltip();
The easiest way I have found to initialize tooltips with Bootstrap is to match their code so any of your tooltips will work.
$(function () {
$("[data-toggle='tooltip']").tooltip();
});
OR you can actually add this line to the very end of your bootstrap-tooltip.js file
}(window.jQuery); //<-- last line of bootstrap-tooltip.js
$("[data-toggle='tooltip']").tooltip();
I basically planned on if I am going to use the tooltip code, then I might as well have it enabled by default. So, I put this in my bootstrap-tooltip.js file.
I think it's a bug. From http://twitter.github.com/bootstrap/assets/js/application.js
you can see the demo is called with 'selector' option.
$('.tooltip-demo').tooltip({
selector: "a[data-toggle=tooltip]"
});
But the 'show' function in bootstrap-tooltip.js will not check for 'selector' option when handling 'placement'. Therefore bug occurred.
placement = typeof this.options.placement == 'function' ?
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement
Demo for this bug: http://jsfiddle.net/indream/xFC7G/
Related github issue: https://github.com/twitter/bootstrap/issues/6832