I there some mechanism to access the HTML5 tooltip (title property) programmatically in Dart?
I would like programmatically display the tooltip if a model property falls in a certain range etc.
Thanks
You need to get hold of the element and then just set the attribute.
import 'dart:html';
main(args) {
document.querySelector('#idofyourtag').title = 'show this as tooltip';
}
Related
There's this Vaadin 14 TextField created with field = new TextField(...); field.setLabel("Phone number"); like this:
I'd like to add an interactive info icon into that label like this:
When a user clicks (or touches) at the info icon then the system should show a popup or dialogue with some additional information (formated text and images).
I tried to add some HTML and JavaScript like this: field.setLabel("Phone number <span onclick='...'>?</span>"); but the browser just shows exactly that technical String with all its tags and so on.
I already set tooltips with field.getElement().setAttribute("title", "Some information"); but without formatting this is not fancy for longer text and as far as I know not usable for images.
field.setHelperText(...) also is not what I'm looking for because it shows the text durably and not just at a click/touch.
Is there a Vaadin way to achieve that interactive info icon? Otherwise I would to try it with JavaScript and CSS (querying the label element and adding hidden children to the TextField and show them when hovering the label like in this example https://www.scriptol.com/css/tooltip.php ).
Source of the question mark: vaadin:info-circle-o (https://vaadin.com/components/vaadin-icons/html-examples)
The "problem" with the label on fields as of 14.6 is, that it is just an
property on the element and while it ends up as the content of
a <label> tag, you can not provide anything but text.
One alternative would be using a FormLayout where you may provide
a component as label and therefor you can provide "whatever you want".
E.g. use an icon and add a title attribute to get some simple tool-tip
from the browser:
new FormLayout().tap{
addFormItem( // XXX
new TextField(),
new Span(
new Text("The Label"),
VaadinIcon.QUESTION_CIRCLE.create().tap{
setSize('12px')
setColor('blue')
element.tap{
setAttribute("title", "The Help")
style.tap{
set('padding-left', '4px')
}
}
}
)
)
}
Instead of displaying it like the common Rangeselector display, is there a way to make it like a dropdown? Appreciate your help with this. Thank you.
You can use exporting module to generate a custom button with a dropdown feature. Inside exporting.buttons.toggle object you can create menuItems array which will contain list of the buttons. Each button has onclick event which will let you to call rangeSelector.clickButton(index, redraw) function, responsible for selecting a specific range. Lastly, you can hide original range selector, for example using CSS:
.highcharts-range-selector-buttons {
visibility: hidden;
}
API Reference:
http://api.highcharts.com/highstock/exporting.buttons
http://api.highcharts.com/highstock/rangeSelector
Example:
http://jsfiddle.net/8rrotg5a/
I'm having a dynamic form which is having a TextAreaItem and the value for text Area is populated from database.
I want to make the value of Text Area Clickable and hyperlink ,Could you please help which event handlers and attributes I shuld set to get the desired output?
I think that you will want to use a LinkItem rather than TextAreaItem. A LinkItem can be used to show a clickable hyperlink. You can set the target of the LinkItem to "javascript" and add a form item ClickHandler to perform an action on click.
See the Forms - Various Controls sample.
I have tried using LinkItem too but if you make the link editable (link.setCanEdit(true)) then you loose the ability of opening the link by clicking on it. Probably because the click handler is now used to edit the field. You might need to add some extra mechanism to open the link, like adding a button or something.
Here it's an example:
private void urlForm() {
url = new LinkItem();
url.setShowTitle(false);
url.setCanEdit(true);
url.setValue("yourURL");
ButtonItem button = new ButtonItem("Go");
button.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.open(url.getLinkTitle(), "_blank", "");
}
});
urlForm = new DynamicForm();
urlForm.setNumCols(4);
urlForm.setFields(url, button);
}
Another alternative could be adding a new view to edit the URL value, and leave the LinkItem as non editable, so the link will open when clicking on it.
I'm trying to bring a custom view to an active admins page.
But thing is whenever I try to put a text area field it automatically produces a custom text area field where I can set font and all, something like word editor as shown in picture.
Is there a way I can prevent this and get normal text editor?
Yes. TinyMCE lets you specify a html class that prevents it from activating. Text fields with that class will not get transformed into the editor.
http://www.tinymce.com/wiki.php/Configuration3x:editor_deselector
Where you initialize TinyMCE, add these options:
tinyMCE.init({
//your init code
editor_deselector: 'selector', //replace this with the HTML class of your choice
//more of your init code
});
Any text area that has the specified class will not get transformed into an editor.
I created a custom icon, when I assign it to a hard-coded list the custom icon shows. but when I place it to a programmatically added list in a table it doesn't show but instead displays the "plus" icon.
ironically when I try the "delete" built-in icon it properly shows but my custom made icon wont.
these are the scenario:
this is my custom button
$(".ui-icon-customicon").css({'background-image':'url("http://website/mycustomeicon.jpg")','backgroundRepeat':'no-repeat', 'height':'18px', 'width':'18px', 'background-position':'center', 'background-color':'white'});
when I use the above button to a hard-coded list in a Table it properly shows. But when I use it like this...
listItem = document.createElement('li');
listItem.setAttribute("data-icon","customicon");
my icon doesnt show. and instead it displays the "plus" icon. but when I try this....
listItem = document.createElement('li');
listItem.setAttribute("data-icon","delete");
the button changes to the delete (builtin-icon) icon.
Anyone can help me whats the problem? please???
Update
Updating lists
If you add items to a listview, you'll need to call the
refresh() method on it to update the styles and create any nested
lists that are added. For example,
$('ul').listview('refresh');
Custom Icons
To use custom icons, specify a data-icon value that has a unique name
like myapp-email and the button plugin will generate a class by
prefixing ui-icon- to the data-icon value and apply it to the button.
You can then write a CSS rule that targets the ui-icon-myapp-email
class to specify the icon background source. To maintain visual
consistency, create a white icon 18x18 pixels saved as a PNG-8 with
alpha transparency.
Docs:
http://jquerymobile.com/test/docs/buttons/buttons-icons.html