My website contains bootstrap popovers with HTML code. Such a popover looks like this (instead of the popup HTML, I've put in a placeholder for readability):
<mark data-content="Fancy HTML here" data-html="true" data-toggle="popover">
This mark has a popover
</mark>
Inserting real HTML in the data-content brings up the problem of escaping quotes properly. I found this question, which looks like an exact duplicate:
How do I encode html for Bootstrap popover and tooltip content
The accepted answer recommends to escape quotes to "
This doesn't work, the escaped quotes are not parsed properly. I've set up an example in this fiddle: https://jsfiddle.net/z4t2sud3/3/
Another option is to use single quotes ' for strings inside the popup. This option is also in the fiddle and it works properly.
But what if I want to nest deeper? For example, the HTML that I insert into the data-content could contain popovers, too. While this seems like a very bad design idea, it would be nice to make it work.
Here is a fiddle for the double-nested popover: https://jsfiddle.net/cwz3sayj/3/
Hoping the snippet below looks like what you wanted, you can pass an option while creating a popover instance where you set the content that will be showed when the instance is clicked. Since the first level isn't present in the DOM when you first run the script, you have to activate the second popover after the first one has been clicked. Using template literals, you can use either apostrophe or quotation mark in the html code you're writing.
$('#firstPopover')
.popover({
html: true,
content: `<button id="secondPopover" class="btn">
Goto second level
</button>`
})
.on('shown.bs.popover', function() {
$('#secondPopover').popover({
html: true,
content: `This is the last level`
});
});
<br />
<button id="firstPopover" data-html="true" class="btn">
Goto first level
</button>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
The only problem is see right now is when the first layer is closed before the second one.
Greetings everyone :)
My question pertains to the bootstrap tooltips. I have a bunch of tooltips within my page (5 to be exact).
The tooltips look (more or less) like this:
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="{{'calculation.ttSD' | translate}}"></span>
I initialize them at the very top of the page (right after the ) with the classic:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Most tooltips are initialized without any problems, however 2 are not working properly. There are some parts of the page that are hidden as the page loads and revealed depending upon what the user has entered.
Example:
<tr ng-if="condition == 'true'">
<label data-translate="the.text.to.put.in.the.label"/>
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" tittle="someText">
...
These tooltips are not getting initialized properly at the beginning. As a quick fix i just copied the above javascript and placed it right after the tooltips, which works. Except that kills the DRY principle since the same exact js comes up 3-4 times within the page.
What is a better way (if there is a way at all) of initializing all bootstrap tooltips, regardless if hidden or not?
Thanks :)
ng-if prevents DOM Element from being rendered. Hence the initialization in document.ready will not take effect on your ng-if false elements
Instead you can use ng-show/ ng-hide as they only changes display css-poperty
modified your example to ng-show instead of ng-if
<tr ng-show="condition == 'true'">
<label data-translate="the.text.to.put.in.the.label"/>
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" tittle="someText">
hope it helps
Recently i am having a problem with CKeditor.
Integrated it very well into a custom CMS, however it seems to be stripping certain tags. Most importantly : 'data-toggle', 'data-target' and all of the font-awesome css classes.
Given I am using bootstrap for the templating engine, is there any resaon ,why this is happening.
Example :
<a class="btn btn-block btn-inverse" data-toggle="modal" data-target="#downloadModal" href="#">Download Trial</a>
Becomes:
<a class="btn btn-block btn-inverse" href="#">Download Trial</a>
Is there a set of HTML defined tags in CKeditor i could add to ? Or another editor which will play nicer ?
In your config.js file you can prevent any stripping by using the flag
config.allowedContent = true;
Reference : http://ckeditor.com/ckeditor_4.3_beta/samples/datafiltering.html
Similar question concerning CSS Classes: CKEditor automatically strips classes from div
For added advice often the ckEditor will infact still strip certain tags out. If this is happening you can add the following again to your config.js file.
extraAllowedContent: 'data-toggle[*]{*}'
I've been working on a project using Prototype, jQuery and Bootstrap. We use Bootstrap Tooltips in our UI, normally over icons and text, as below:
<span class="glyphicon glyphicon-asterisk" data-toggle="tooltip" data-placement="bottom" title="Some tooltip"></span>
<span class="glyphicon glyphicon-asterisk" data-toggle="tooltip" data-placement="bottom" title="Another tooltip"></span>
Link tooltip
We then use some simple Javascript to activate our tooltip:
var _j = jQuery.noConflict();
_j("[data-toggle=\"tooltip\"]").tooltip();
I'm using _j alias of jQuery as the $ prefix is used by Prototype. This works fine, but as soon as you move your mouse from a tooltip'd element, it has style="display: hidden; applied. I can't work out any reasonable explanation, so was wondering if anyone has any ideas?
Here is a jsFiddle.
use this trick to solve the problem:
$('.tooltips').tooltip().on('hidden.bs.tooltip', function(){
jQuery(this).show();
});
You could use display:block !important within your CSS file. Doing this, it will force the element to show, even when the script is telling them to hide.
I'm using a custom jQuery 1.10.3 theme. I downloaded every straight from the theme roller and I have intentionally not changed anything.
I created a dialog box and I get an empty gray square where the close icon should be:
I compared the code that is generated on my page:
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<spanid="ui-id-2" class="ui-dialog-title">Title</span>
<button class="ui-dialog-titlebar-close"></button>
</div>
To the code generated on the Dialog Demo page:
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
</button>
</div>
EDIT
The different parts of the code are generated by jQueryUI, not me so I can't just add the span tags without editing the jqueryui js file which seems like a bad/unnecessary choice to achieve normal functionality.
Here is the JavaScript used that generates that part of the code:
this.element.dialog({
appendTo: "#summary_container",
title: this.title(),
closeText: "Close",
width: this.width,
position: {
my: "center top",
at: ("center top+"+(window.innerHeight*.1)),
collision: "none"
},
modal: false,
resizable: false,
draggable: false,
show: "fold",
hide: "fold",
close: function(){
if(KOVM.areaSummary.isVisible()){
KOVM.areaSummary.isVisible(false);
}
}
});
I'm at a loss and need help.
I am late to this one by a while, but I'm going to blow your mind, ready?
The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in.
Literally, swap the two so that instead of:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
it becomes
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
:)
Edit - 26/06/2015 - this keeps attracting interest months later so I
thought it was worth an edit. I actually really like the noConflict
solution offered in the comment underneath this answer and clarified
by user Pretty Cool as a separate answer. As some have reported issues
with the bootstrap tooltip when the scripts are swapped. I didn't
experience that issue however because I downloaded jquery UI without
the tooltip as I didn't need it because bootstrap. So this issue never
came up for me.
Edit - 22/07/2015 - Don't confuse jquery-ui with jquery! While
Bootstrap's JavaScript requires jQuery to be loaded before, it doesn't rely on jQuery-UI. So jquery-ui.js can be loaded after bootstrap.min.js, while jquery.js always needs to be loaded before Bootstrap.
This is a comment on the top answer, but I felt it was worth its own answer because it helped me answer the problem.
If you want to keep Bootstrap declared after JQuery UI (I did because I wanted to use the Bootstrap tooltip), declaring the following (I declared it after $(document).ready) will allow the button to appear again (answer from https://stackoverflow.com/a/23428433/4660870)
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
This appears to be a bug in the way jQuery ships. You can fix it manually with some dom manipulation on the Dialog Open event:
$("#selector").dialog({
open: function() {
$(this).closest(".ui-dialog")
.find(".ui-dialog-titlebar-close")
.removeClass("ui-dialog-titlebar-close")
.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
}
});
I found three fixes:
You can just load bootsrap first. And them load jquery-ui. But it is not good idea. Because you will see errors in console.
This:
var bootstrapButton = $.fn.button.noConflict();
$.fn.bootstrapBtn = bootstrapButton;
helps. But other buttons look terrible. And now we don't have bootstrap buttons.
I just want to use bootsrap styles and also I want to have close button with an icon. I've done following:
How close button looks after fix
.ui-dialog-titlebar-close {
padding:0 !important;
}
.ui-dialog-titlebar-close:after {
content: '';
width: 20px;
height: 20px;
display: inline-block;
/* Change path to image*/
background-image: url(themes/base/images/ui-icons_777777_256x240.png);
background-position: -96px -128px;
background-repeat: no-repeat;
}
This is reported as broken in 1.10
http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/
phillip on January 29, 2013 at 7:36 am said: In the CDN versions, the
dialog close button is missing. There’s only the button tag, the span
ui-icon is missong.
I downloaded the previous version and the X for the close button shows back up.
I had the same exact issue, Maybe you already chececked this but got it solved just by placing the "images" folder in the same location as the jquery-ui.css
I got stuck with the same problem and after read and try all the suggestions above I just tried to replace manually this image (which you can find it here) in the CSS after downloaded it and saved in the images folder on my app and voilá, problem solved!
here is the CSS:
.ui-state-default .ui-icon {
background-image: url("../img/ui-icons_888888_256x240.png");
}
I know this question is old but I just had this issue with jquery-ui v1.12.0.
Short Answer
Make sure you have a folder called Images in the same place you have jquery-ui.min.css. The images folder must contains the images found with a fresh download of the jquery-ui
Long answer
My issue is that I am using gulp to merge all of my css files into a single file. When I do that, I am changing the location of the jquery-ui.min.css. The css code for the dialog expects a folder called Images in the same directory and inside this folder it expects default icons. since gulp was not copying the images into the new destination it was not showing the x icon.
Even loading bootstrap after jquery-ui, I was able to fix using this:
.ui-dialog-titlebar-close:after {
content: 'X' !important;
position: absolute;
top: -2px;
right: 3px;
}
I'm using jQuery UI 1.8.17 and I had this same issue, plus I had additional css stylesheets being applied to things on the page, including the
titlebar color. So to avoid any other issues, I targeted the exact ui elements using the code below:
$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();
Then I added a close button in the properties of the dialog itself:
...
modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...
For some reason I had to target both items, but it works!
A wise man once helped me.
In the folder where jquery-ui.css is located, create a folder named "images" and copy the below files into it:
ui-icons_444444_256x240.png
ui-icons_555555_256x240.png
ui-icons_777620_256x240.png
ui-icons_777777_256x240.png
ui-icons_cc0000_256x240.png
ui-icons_ffffff_256x240.png
and the close icon appears.
As a reference, this is how I extended the open method as per #john-macintyre's suggestion:
$.widget( "ui.dialog", $.ui.dialog, {
open: function() {
$(this.uiDialogTitlebarClose)
.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>");
// Invoke the parent widget's open().
return this._super();
}
});
just add in css
.ui-icon-closethick{
margin-top: -8px!important;
margin-left: -8px!important;
}
If you are calling the dialog() inside the js function, you can use the below bootstrap button conflict codes
<div class="row">
<div class="col-md-12">
<input type="button" onclick="ShowDialog()" value="Open Dialog" id="btnDialog"/>
</div>
</div>
<div style="display:none;" id="divMessage">
<table class="table table-bordered">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Giri</td>
<td>Prasad</td>
<td>25</td>
</tr>
<tr>
<td>Bala</td>
<td>Kumar</td>
<td>24</td>
</tr>
</table>
</div>
<script type="text/javascript">
function ShowDialog()
{
if (typeof $.fn.bootstrapBtn =='undefined') {
$.fn.bootstrapBtn = $.fn.button.noConflict();
}
$('#divMessage').dialog({
title:'Employee Info',
modal:true
});
}
</script>
Just add in the missing:
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
I am having this issue as well. Here is the code that is getting inserted for the close button:
When I turn off the style="display:none:" on the button, then the close button appears. So for some reason that display:none; is getting set, and I don't see how to control that. So another way to address this might be to simply override the display:none. Don't see how to do that though.
I note that the answer posted by KyleMit does work, but makes a different looking X button.
I also note that this issue does not affect all dialogs on my pages, but just some of them. Some dialogs work as expected; other have no title (ie, the span containing the title is empty) while the close button is present.
I am thinking something is seriously wrong and it might not the time for 1.10.x.
But after further work, I discovered that in some cases the titles were not getting set properly, and after fixing that, the X close button reappeared as it should be.
I used to set the titles like this:
('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);
That id does not exist in my code, but is created apparently by jquery from ac-popup and ui-dialog-title. Kind of a kludge. But as I said that no longer works, and I have to use the following instead:
$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);
After doing that, the missing button issue seems to be better, although I am not sure if they are definitely related.
I was facing same issue , In my case JQuery-ui.js version was 1.10.3, After referring jquery-ui-1.12.1.min.js close button started to visible.