Handsontable has an option to display tooltips in the headers.
https://docs.handsontable.com/pro/1.1.1/demo-header-tooltips.html
Is there another way to do it that doesn't require the "Pro" version?
Perhaps afterOnCellMouseOver?
I also have Angular-UI Tooltip in the project so perhaps that could overlay somehow.
You can directly put the html code adding the tooltip while defining your colHeaders :
colHeaders: ["Trend", "Year", '<span title="External Color"> External Color </span>', '<span title="Internal Color"> Internal Color </span>'],
See a working example in this JSFiddle
It's up to you if you want to use customize tooltip like bootstrap or Angular or even fully customize by you, but your Angular-UI Tooltip already included in your project should not prevent you to do the above.
Related
I'm using free jqgrid and implemented column chooser to show hide columns, the functionality is working as expected but the popup that shows up doesn't have a proper rendering of UI.
I tried searching a lot and went through the documentation of free jqgrid but I don't know what am I doing wrong.
I was able to reproduce the error in demo in below url.
If any one has faced similar issue please help. Note I am using bootstrap theme.
$("#sampleGrid").navButtonAdd('#sampleGridPager',{
caption: "",
title: "Choose Columns",
buttonicon: "fa fa-table",
onClickButton: function () {
$("#sampleGrid").jqGrid('columnChooser');
}
});
https://jsfiddle.net/1vk5ku2y/2/
One needs to add jQuery UI CSS to the demo because it's required for columnChooser. You should add some jQuery UI theme, which corresponds Bootsrap CSS theme. For example
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css
After that one get already much better results https://jsfiddle.net/OlegKi/1vk5ku2y/4/. You need to add minor CSS fixes to have the final solution.
I have got a problem with Loopj's jQuery Tokeninput inside Jack Moore's Colorbox window. The problem is that dropdown of Tokeninput shows under Colorbox window, as on screenshot below:
I think that the problem could be with this code inside tokeninput library (lines 343-347):
// The list to store the dropdown items in
var dropdown = $("<div>")
.addClass(settings.classes.dropdown)
.appendTo("body")
.hide();
because it is appended to body, not to colorbox window.
Could anyone help me solve this problem?
PS. I am using this lib also outside colorbox window, so appending it to colorbox probably will be a bad idea.
It should be possible to fix this issue by altering the z-index of the TokenInput's dropdown.
The z-index of a Colorbox is 9999, the default value for the TokenInput is lower than that.
Depending on which TokenInput version you're using - if it supports the z-index parameter, you could alter the value with that on initialisation. e.g.
$('#myID').tokenInput("http://sourceurl.com",
{
zindex: 100001
}
Else if it's an earlier version, try altering the value for div.token-input-dropdown in the token-input.css file.
I've put in a pull request for this issue on GitHub, but sadly, the project now seems to have sunk back into inactivity.
I am working with CKEditor 4.0.1.1 in an intranet and try to validate my code with W3C markup validation service.
The validation markup service find this error :
Error Line 547, Column 2455: there is no attribute "data-cke-saved-src"
<img alt="" data-cke-saved-src="http://portail-rep/Contents/images/Java…
How can i disable this functionnality of ckeditor protecting code to make my code ok for W3C validation ?
CKEditor uses many special attributes and elements to implement some of its features. However, they are used only internally and should be stripped out when getting data by editor.getData(). Therefore editor produces valid markup.
E.g. open http://ckeditor.com/demo, switch to source mode and you'll see that the image doesn't have the data-cke-saved-src attribute. However, if you'll use Firebug or Webkit's dev tools you'll find that the image has this attribute.
PS. In fact, data-cke-saved-src is a valid attribute in HTML5.
I had same problem now. This problem has been solved by using CKEDITOR config on blur event.
I'am using inline editing on element.
My ck config contain on blur event which have destroy method.
CKEDITOR.config.on = {
blur: function() {
this.destroy();
}
}
Using is simply:
On element click will create instance of new editor and it enable inline editing.
Now if user click outside of editor and on blur event invoked, editor destroy it self and if no editor instance exist, the content of the data is cleaned from data-cke attributes.
I am using a modal popup up control in jQuery, the popup has an input text powered by jQuery Tokenize input plugin. The problem is when i type something on modal popup text box, the search results by tokenize plugin are shown hidden under the popup. Actually they should apprear on top of all controls. Would someone please help me as I am a beginner.
Try to seek help from thread below, zindex is not working.
https://github.com/loopj/jquery-tokeninput/issues/190
here is the input control that i am using.
http://loopj.com/jquery-tokeninput/demo.html
Thank you.
It works by setting the z-index manually:
$(".token-input-dropdown").css("z-index","9999")
The function given in
https://github.com/loopj/jquery-tokeninput/issues/190
does not work in my coffeescript:
$('#book_author_tokens').tokenInput('/authors.json', {
zindex: 9999
});
I think that a better solution is to add it to the css file (instead of doing it via js):
div.token-input-dropdown-facebook {
z-index: 11001 !important;
}
Of course, drop the "-facebook" suffix if you're using the default theme.
This might be a fundamental jQuery misunderstanding but I've got to ask...
I'm trying to get the jQuery.validate to display its error messages on qTip, a jQuery plugin for customizing tooltips. Specifically I want to get the tooltip to pop-up on mouseover of a little red "X" icon.
I can get the tooltip to popup over the form field using the following code:
$().ready(function() {
// validate signup form on keyup and submit
$("#signup").validate({
errorPlacement: function(error, element) {
element.parent().parent().append('<div class="rederrorx"></div>');
element.qtip(
{
//qTip formatting and content code
});
},
But to get the tooltip to pop up over a red x, I change element.qTip( to $(".rederrorx").qTip( and it doesn't work (no message/qTip initialized).
Has the concept of selectors just gone way over my head? Prob so. Or is the jQuery class selector not selecting anything because the append has yet to take place? Or...
Thanks!
Emile
I replaced element.parent() with element.parents('.classname') in order to pinpoint the exact parent element I wanted. I'm assuming a plugin added nested divs without telling me. No other answers....
lo siento for the stupid question