I have few bugs while using the tooltip from KENDO UI. I wanted to show help message for my input fields and so I set the position of tooltip to the right but it shows towards the top right corner of the input field.
Moreover when I bring the mouse over the input field the title of the page changes.
If I am setting
autoClose: false
then there are 2 X buttons in the tooltip.
Sample markup and javascripts
<input type="text" title="Please enter firstname." id="txtFirstname" />
$("#txtFirstname").kendoTooltip({
autoHide: false,
callout: false,
showOn: "focus",
position:"right"
});
Please help to fix these bugs
Thanks
Prabhanjan
I think those issues were addressed in Q1 2013 SP1 (version 2013.1.514) - May 2013 release.
Here are release notes about tooltip of that release:
Fixed: Document title is removed when tooltip is open
Fixed: Tooltip content is not cleared when its title attribute is missing and it
was shown for another target
Have you tried to use new version?
Related
I am using dnnAlert in my DNN 7.02 website ( dnnAlert is a jQuery UI plugin for dnnAlert that is included in regular DNN install) in place of regular alert, but the problem is that when I click on OK button, the page automatically scrolls to the top, which is very annoying.
How can I prevent the automatic scrolling?
$.dnnAlert({
text: 'Copied code to clipboard',
dialogClass: 'dnnFormPopup',
title: 'Copy Successful',
modal:false
});
The OK button is rendered with following html.
<button class="dnnPrimaryAction" type="button">Ok</button>
I have spent a lot of time trying to get JQUI dialogs to work properly in DNN 7.
I expect the problem you are having is related to setting
modal: false
I have found that using a straight JQUI dialog works if the crucial element:
dialogClass: 'dnnFormPopup dnnClear'
is added.
JC
I set up the tooltip and dialog like so:
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$( document ).tooltip();
but when i open the dialog later its close tooltip always appears on opening, NOT just on hovering over close as expected. Has anyone else seen this behaviour/knows why it occurs?
Setting the items option to exclude the dialog's titlebar close widget seems to work well for me in jQueryUI 1.9+
$( document ).tooltip({
items: '*:not(.ui-dialog-titlebar-close)'
});
Found a solution:
$( "*" ).tooltip();
$('.ui-dialog-titlebar-close').tooltip('disable')
works in place of the above
Tooltip appears because a button automatically gets focus when a dialog opens (this is a strange behavior). You need to add an attribute "tabindex" to any element in the dialog to avoid this.
For example:
<table tabindex="1">
According to dialog's documentation:
Upon opening a dialog, focus is automatically moved to the first item
that matches the following:
The first element within the dialog with the autofocus attribute
The first :tabbable element within the dialog's content
The first :tabbable element within the dialog's buttonpane
The dialog's close button
The dialog itself
So my solution was to add autofocus to an empty div at the top of the form I was using in my dialog:
<form action="" method="post" accept-charset="utf-8">
<div class="stealFocus" autofocus></div>
Good solution for me with 1.11.3 jQuery and 1.10.4 jUI
$.ui.dialog.prototype._focusTabbable = function(){};
It will desactivate autofocus and dont see auto popup anymore
I use :
$( ".selector" ).dialog({ closeText: "" });
If you see this fiddle you will notice that in order to spawn the Tooltip the mouse has to leave and reenter the div foo after the Tooltip has been initialized.
I thought that maybe I could manually trigger the Tooltip using tooltip("open"). Unfortunately, the mouse tracking doesn't work when I do that. See this fiddle.
Does anyone have an idea how I could get the Tooltip to open with mouse tracking enabled without having to leave and reenter the div? In case you are wondering why I need to do this, I am working with WebGL in a canvas element that takes up the entire screen.
I am using the track: true option and I faced to the same problem in a different context. I am working with richfaces and have some ajax calls which rerender parts of a page.
After each rerender, i needed to rebuild tooltips present in the rerendered part so i decided to attach an event handler to the document and to rebuild thoses tooltips on mouseenter, and then manually open them by calling $(...).tooltip('open')... tooltips are displayed correctly but the mouse tracking doesn't work anymore.
So instead of using $(...).tooltip('open'), i trigger a mouseenter event and work with css class to init only once :
jQuery(document).on('mouseenter', '.tt', function() {
jQuery(this).tooltip({
content: function() { ... },
items: ".tt, .ttped",
track: true
})
.toggleClass('tt ttped')
.trigger('mouseenter');
});
I edited your jsFiddle, which rebuild tooltip each time you enter on #foo and another one which init tooltip only once (static content)
I'm trying to make the sample from here work on my page. I've included the following into my page body:
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
<div id="myDivId">
<p>Date: <input type="text" id="datepicker"></p>
</div>
which is the same as the sample.
In the sample when I click onto the edit box the datepicker appears. I can step between months and when I click on a specific date that date gets posted into the edit box.
Now on my page when I click onto the edit box the datepicker does appear, but "next" and "previous" buttons have no effect and when I click onto a specific date the datepicker doesn't close and the date is not posted but the page scrolls to the top.
The problem is only reproduced in IE (I tried IE 8 only) - works in both Firefox and Chrome.
What am I doing wrong?
Turns out it was because of some "extra safe" configuration that is enabled on Windows Server 2008 R2 by default.
Seems like tooltips that you get from attribute title="test" are not displayed inside the panel.
Tested also with stackoverflow loaded in the panel, no tooltips when you hover mouse over hot, week, month. But the custom tooltips work, e.g. when you hover over tags.
Is there a way to enable tooltips in Add-on SDK panels, or the only way is going custom tooltips?
No, displaying tooltips for HTML elements requires special code in the browser. This code is there for the built-in browser but not for the browser that the SDK embeds in a panel. That's something that might be worth filing as an SDK bug but in the meantime - custom tooltips are the way to go.
Yes, there's a way.
This works since Firefox 31
var panel = require("sdk/panel").Panel({
width: 400,
height: 400,
contentURL: "http://stackoverflow.com/",
});
panel.show();
require('sdk/view/core').getActiveView(panel)
.setAttribute('tooltip', 'aHTMLTooltip');