Load <div> in javascript - javascript

I am facing problem in loading div into my javascript,
My code is:-
$(document).ready(function()
{
$('#example').hide();
$("#myDiv").tooltip({trigger:'hover',placement:'left',html:true,title:'Rate Us'}).popover({trigger:'click',placement:'top',content:$("#example").html(),});
});
<div id="example">
<button type="button" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-ok"></i></button>
</div>
I am not able to load button in the example div on popover.
What should I write in content:$("#example").html(), to load example div?
Please help me.

you cannot use content: for html content on popovers without setting html:true
see here for more information about popovers http://getbootstrap.com/javascript/#popovers
jsfiddle http://jsfiddle.net/CsR5Z/1/

Related

HTML inside bootstrap 5 tooltip

Following the documentation, I need to display some HTML inside a bootstrap 5 tooltip.
However, copy pasta from the doc does not give the expected output.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Here is a jsfiddle.
Instead of displaying parsed HTML, HTML is parse as text.
How can I display content as HTML instead of text ?
In Bootstrap v5.0 you should use data-bs-html="true".
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Your JSFiddle.

jQuery Tooltips only in HTML Code but not visible

I am trying to get some good looking help buttons on my website with jQuery and tooltips.
However they appear when you search the Element but they don't show.
Here's some code:
<div class="card-header">
<h5 style="float: left">Eckdaten</h5>
<button id="help" type="button" class="btn btn-outline-secondary"
data-toggle="tooltip" data-placement="left"
title="TestTest" style="float: right; padding-left: 8px; padding-right: 8px">
<i class="fas fa-life-ring"> <Hilfe
</button>
</div>
in script section:
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
src files:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.js">
</script>
Whenever hovered, a tooltip appears in the html code but the actual box isn't showing.
Thank you so much for your help!
You have invalid HTML structure there. Your font awesome icon needs to be closed.
Replace <Hilfe with closed </i> will fix the issue.
https://jsfiddle.net/davidliang2008/2dqa1fvu/4/

How to create a bootstrap popover within a bootstrap dropdown?

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" });
});

bootstrap modal not working?

My modal div is:
<div class="modal" id="showmodal"><!-- content here --> </div>
Now I am calling it with data-toggle='modal' following anchor is coming with DOM:
<a class="c" data-toggle="modal" data-target="#showmodal">click </a>
and its working.
Now when I appending another link from javascript like following
<a class data-toggle="modal" data-target="#showmodal">click </a>
It's not working. Can anybody tell why? Thanks in advance.
When you have added first a tag
<a class="c" data-toggle="modal" data-target="#showmodal">click </a>
bootstrap.js knows on which element it need to attach model window event.
but when you dynamically appended
<a class data-toggle="modal" data-target="#showmodal">click </a>
bootstrap.js does not know the element exists in DOM.
so you need to manually call the js function to open model.
$('#showmodal').modal(options)
In your JS code.
Hope this helps.

jQuery click function not triggering

I am trying to integrate a bootstrap layout into my angular.js project.
I have added the bootstrap.js and bootstrap.css and the layout custom CSS and JS.
my project have jquery added to it.
The problem that I am facing is that a click handler is not being triggered.
this is my code:
$(document).ready(function () {
alert('ready');
$('[data-toggle="offcanvas"]').click(function () {
alert('click');
$('.row-offcanvas').toggleClass('active')
});
});
a popup with "ready" popups at each page refresh however when i click the button that has the attribute data-toggle="offcanvas" nothing pops up.
I have even tried to ad an id attribute to the button and target the button in jquery as follows with no success:
$('#toggleButton').click(....);
the button is html looks like the following:
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
what seems to be going wrong?
Thanks in advance.

Categories