I am trying to add a tooltip boostrap for a div tag at runtime. It work well on Chrome but in Edge it does not work.
<div id="#company.Id" class="fit-container pointer_cursor row" data-toggle="tooltip" title="#company.Comment" data-placement="bottom"><.div>
At runtime i will add a tooltip for div, but after i added, when i hover on div tag, the tooltip show nothing. Even though i call $('div').tooltip() in javascript.
Please help me.
Its working in all browsers. May be you forgot to add some assets.
$('div').tooltip();
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="" class="fit-container pointer_cursor row" data-toggle="tooltip" title="tooltip test" data-placement="bottom">test</div>
Related
I have a number of buttons on my page that when clicked should display content inside a Bootstrap Popover. The content is loaded from my Database and can be either text or an image which can vary in size.I have implemented a solution which is working correctly in IE however in Chrome and Firefox my popover is opening half way down the page when you first click the button. On the second click of the same button the image will then appear in the correct position with no issue just like in IE. If the content of the popover is text then it is displayed correct first time in all browsers but the issue appears for images in Chrome and Firefox. I have researched this but I cannot find anything that has helped it to work across all browsers. Any help would be great.
HTML
<button type="button" class="btn btn-default btn-xs" data-toggle="popover" data-container="body" data-content="#item.Content">#item.Title</button>
JS
$(document).ready(function () {
$('[data-toggle="popover"]').popover({
html: "true",
placement: "top",
});
});
CSS
popover{
width:auto!important;
max-width: none;
}
I believe the issue (at least this was the case for me) was one of caching. The button is clicked, the popover loads its content, the <img /> tag is added to the DOM and begins a fetch, the popover renders, and the fetch completes and is blitted to the screen.
The best solution I've found is to preload/the image. There are two ways you can do this. If you know your image url ahead of time, you can add a preload link. Alternatively, you can place the popover content that includes the image tags in a <div class="d-none">...</div> (or class="hidden" if you're using bootstrap 3).
<html>
<head>
<!-- case where image urls are known ahead of time -->
<link rel="preload" as="image" href="my-image.png" />
</head>
<body>
<!--
case where image urls are NOT known ahead of time
NOTE: #item.Content should not include <script> tags or the code will be run twice
-->
<div class="d-none">
#item.Content
</div>
<button type="button" class="btn btn-default btn-xs" data-toggle="popover"
data-container="body" data-content="#item.Content">
#item.Title
</button>
<script>
$(document).ready(() =>
$('[data-toggle="popover"]').popover({
html: "true",
placement: "top",
});
});
</script>
</body>
</html>
For anyone who may come across the same issue as this I have the found adding the line - trigger: 'hover', to the script allowed images to be loaded in the correct position on each browser.
I'm in IE 11 working with Angular and I have an span containing an icon that I'm trying to include via the following.
<ng-include
popover="popover"
class="input-group-addon popover-icon-warning"
role="button"
data-toggle="popover"
data-trigger="focus"
src="config.warningIconSVG"></ng-include>
Instead of the span coming in I get
<!-- ngInclude: -->
I've tried restructuring the ng-include, and adding the createElement to the javascript being loaded in but nothing works. Any answers or direction on where to look would be greatly appreciated.
I made a navbar and there is a green button. When the cursor hovers on it, I want a tooltip (at the bottom) to appear. However that is not happening. I used the following script:
$("[data-toggle="tooltip"]").tooltip();
A very strange thing happens. The tooltip is getting hidden underneath the navbar. Or so it seems. Can anybody help me with this? The following is the HTML code for the button (it is enclosed within the header tag):
<a id="ID" style="margin-right: 20px" class="btn btn-success"
data-placement="bottom" data-toggle="tooltip" href="#"
data-original-title="Tooltip on bottom">Has hover state</a>
Fix your JavaScript quotes:
$("a[data-toggle='tooltip']").tooltip();
See this Plunker as reference, it has your markup and the fixed JavaScript.
Note that the .tooltip() is running after the DOM is ready with the relevant markup.
EDIT: After a long discussion in the comments, the solution was to add this to the CSS:
.tooltip{ position: fixed;}
I want to show and hide a div, but I want it to be hidden by default and to be able to show and hide it on click. Here is the code that I have made :
<a class="button" onclick="$('#target').toggle();">
<i class="fa fa-level-down"></i>
</a>
<div id="target">
Hello world...
</div>
Here I propose a way to do this exclusively using the Bootstrap framework built-in functionality.
You need to make sure the target div has an ID.
Bootstrap has a class "collapse", this will hide your block by
default. If you want your div to be collapsible AND be shown by
default you need to add "in" class to the collapse. Otherwise the
toggle behavior will not work properly.
Then, on your hyperlink (also works for buttons), add an href
attribute that points to your target div.
Finally, add the attribute data-toggle="collapse" to instruct
Bootstrap to add an appropriate toggle script to this tag.
Here is a code sample than can be copy-pasted directly on a page that already includes Bootstrap framework (up to version 3.4.1):
Toggle Foo
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
This div (Bar) is shown by default and can toggle
</div>
Just add water style="display:none"; to the <div>
Fiddles I say: http://jsfiddle.net/krY56/13/
jQuery:
function toggler(divId) {
$("#" + divId).toggle();
}
Preferred to have a CSS Class .hidden
.hidden {
display:none;
}
Try this one:
<button class="button" onclick="$('#target').toggle();">
Show/Hide
</button>
<div id="target" style="display: none">
Hide show.....
</div>
I realize this question is a bit dated and since it shows up on Google search for similar issue I thought I will expand a little bit more on top of #CowWarrior's answer. I was looking for somewhat similar solution, and after scouring through countless SO question/answers and Bootstrap documentations the solution was pretty simple. Again, this would be using inbuilt Bootstrap collapse class to show/hide divs and Bootstrap's "Collapse Event".
What I realized is that it is easy to do it using a Bootstrap Accordion, but most of the time even though the functionality required is "somewhat" similar to an Accordion, it's different in a way that one would want to show hide <div> based on, lets say, menu buttons on a navbar. Below is a simple solution to this. The anchor tags (<a>) could be navbar items and based on a collapse event the corresponding div will replace the existing div. It looks slightly sloppy in CodeSnippet, but it is pretty close to achieving the functionality-
All that the JavaScript does is makes all the other <div> hide using
$(".main-container.collapse").not($(this)).collapse('hide');
when the loaded <div> is displayed by checking the Collapse event shown.bs.collapse. Here's the Bootstrap documentation on Collapse Event.
Note: main-container is just a custom class.
Here it goes-
$(".main-container.collapse").on('shown.bs.collapse', function () {
//when a collapsed div is shown hide all other collapsible divs that are visible
$(".main-container.collapse").not($(this)).collapse('hide');
});
<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"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Toggle Foo
Toggle Bar
<div id="Bar" class="main-container collapse in">
This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
This div (#Foo) is hidden by default
</div>
I am trying to display a popover divs here . Please click the question mark icons. You will notice that there is a popover div that shows up in all browsers. However, in Internet Explorer 7, it fails to display properly. I tried using z-index property but that does not seem to work. How can I make the popover show up on top of the input field?
Below is a sample HTML
<div class="col-xs-5 divPopUp">
<label class="control-label customerAccountNo" for="custom4">Customer Acct No</label>
<img src="32005/images/iconQuestion.png" alt="Help" data-toggle="popover" data-placement="right" data-content="Found on the Plush Rewards flyer provided at the store. Lost this? Please contact the store you purchased from" class="popUp customerAccountNoImg"/> </div>
Screenshot added of the issue:
Not easy to solve without a fiddle, but using IE debug tool, I was able to solve the problem, but not sure it really works in live exemple.
I added a z-index in the div col-xs-5 :
<div class="col-xs-5 divPopUp" style="z-index: 100">
Can you edit css for this element ?