I added button to by Crossrider extension (see snippet) but I can't see how to add a tootip when hovering over the button. Are tooltips supported?
Exmaple code in background.js:
appAPI.ready(function($) {
appAPI.browserAction.setResourceIcon('icon.jpg');
appAPI.browserAction.onClick(function() {console.log('hello world!');});
});
Like most HTML tags, the title attribute is used to add a tooltip to an element; hence, to add a tooltip to a Crossrider toolbar button you simply set its title attribute using appAPI.browserAction.setTitle.
Using your snippet as a base, you can use the following example to set the tooltip to "My tooltip":
appAPI.ready(function($) {
appAPI.browserAction.setResourceIcon('icon.jpg');
appAPI.browserAction.setTitle('My tooltip');
appAPI.browserAction.onClick(function() {console.log('hello world!');});
});
[Disclosure: I am a Crossrider employee]
Related
I need a tooltip for each items the problem is that when I put for example :
title:'<b>Hover over me<b></br>test'the style is not applicated and so in the tooltip the result was <b>Hover over me<b></br>test not Hover over me test.
I want to change the style of every title in the tooltip .
please have you any ideas
Without some further information, it seems you are in the correct path.
As per documentation:
title - string - "Add a title for the item, displayed when holding the mouse on the
item. The title can be an HTML element or a string containing plain
text or HTML."
Working sample below:
var data = new vis.DataSet([{
id: 2,
content: 'Pi and Mash',
start: '2014-08-08',
title: '<b> Bold title </b> <br> Not bold'
},
...
var timeline = new vis.Timeline(container, data, options);
http://jsfiddle.net/sm4r5pvc/
Update vis version. In the older version, we don't have the tooltip. Make sure you are working with v4.21.0 and above
I have one instance of summnernote in jQuery UI dialog.
By default all summernote's modals look like this:
But when I remove <div class="modal-backdrop in"></div>, I can write into all inputs in these modals:
Well, I've found a solution with dialogsInBody:
$('someTarget').summernote({
dialogsInBody: true,
... //another options
});
But when I turn it on, all text inputs inside the summernote's modals are uneditable! I can interact with checkboxes and file inputs, even the cursor changes to "text", but I am not allowed to write anything into text inputs:
I've inspected, there aren't any blocks over them. And I can't find any extra styles to block inputs (e.g. like pointer-events).
What does exactly do option dialogsInBody? Why inputs aren't editable?
Ok, I've resolved this problem by myself.
There are details:
In summernote.js there are such usage of dialogsInBody:
var $container = options.dialogsInBody ? $(document.body) : $editor;
Therefore modal window appends itself to body (instead summernote editor) when we set {dialogsInBody:true}. Nothing else.
Jquery UI Dialog has a behavior that blocks all text inputs outside of itself (see this). So when summernote is opened inside ui-dialog all of its modals has uneditable inputs.
My solution is to exclude all inputs in summernote modals from list of disallowed items. it required to override a dialog method _allowInteraction:
//fix problem that block inputs in modal dialog outside main UI Dialog
if ($.ui.dialog.prototype._allowInteraction) {
var originalAllowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(e) {
var isInModal = $(e.target).closest('.modal-dialog').length > 0;
return isInModal || originalAllowInteraction(e);
};
}
I want to remove the title area from the ionic popup completely. I removed the title tag and tried. but still can see the title space visible. Here is my code.
var registerPopup = $ionicPopup.show({
templateUrl: 'templates/register_popup.html',
scope: $scope
});
Even if I remove the title tag completely, the title area is still visible with a blank space as shown in the image below. I want to remove the entire title space from the ionicPopup. How can I get it? what changes are to be made in the code?
It is because the title is wrapped inside .popup-head which takes the space.
First add a value of custom-class to cssClass property in the Popup object.
var registerPopup = $ionicPopup.show({
templateUrl: 'templates/register_popup.html',
cssClass: 'custom-class', // Add
scope: $scope
});
You can hide it using custom CSS.
.custom-class .popup-head {
display: none;
}
The examples I've seen seem to show how to change the color that shows when the user actually hovers over the textinput field.
However when the validation fails, a generic textInput border qill have a red line over it. My CSS file uses a border skin for the textInput, so I can't see this line.
I was hoping there was a way to highlight the text box when it failed validation, or re-enable the red line feature. I don't want to get rid of my CSS cos it'll totally blow my color-scheme, but any tweak allowing the error line to show would be much appreciated.
This is the CSS:
TextInput, TextArea
{
border-skin: Embed(source='/../assets/images/input_bg.png', scaleGridLeft=8, scaleGridRight=20, scaleGridTop=8,scaleGridBottom=9);
padding-top:2;
padding-left:2;
font-size:11;
}
anything that extends UIComponent (both TextInput and TextArea do) has a style called errorColor. It defaults to red. You can change this to whatever you want.
Additionally, if you've got an image that you are using as a border, you should probably remove the pixels from the middle so that it is an actual border instead of an overlay.
The only way I've managed to find, is that Validator will change the component's borderColor style. I don't think it can be achieved using an image- you'll have to embed the image in a basic GraphicRectangularBorder subclass or similar. You can then add this to your skin class:
override public function styleChanged(styleProp:String):void
{
super.styleChanged(styleProp);
if (styleProp == "borderColor")
{
if (getStyle("borderColor") == getStyle("errorColor"))
{
// show error outline
}
else
{
// hide error outline
}
}
}
I have a tooltip for each datagrid row. Which is fine. I also can style it with with mx:Style which is great.
However, I desire to have multiple styles ie a header and the rest of the text in the tooltip. Is this possible? Or to have htmlText for input?
If you need that you should create your own component implementing mx.core.IToolTip and use it to display the tooltip. Write you own handler for toolTipCreate and in this handler set your own component as the tooltip renderer.
private function createTooltip(e:ToolTipEvent):void {
//CustomToolTip should extend the Canvas and implement IToolTip
var tooltip:CustomToolTip = new CustomToolTip();
//you need to set the tooltip property in order to make your component used for tooltip renderer
e.toolTip = tooltip;
}
<mx:DataGrid id="myDataGrid" toolTip=" " toolTipCreate="createToolTip(event)">