For a xp:inputTextarea element I have enabled a tooltip via attributes:
<xp:attr name="data-toggle" value="tooltip"></xp:attr>
<xp:attr name="data-placement" value="top"></xp:attr>
<xp:attr name="data-html" value="true"></xp:attr>
<xp:attr name="data-container" value="body"></xp:attr>
The text for the tooltip is set via the title property.
This works fine in edit mode but when I validate my xpage the tooltip is not rendered anymore.
When I expect the textarea in "normal" edit mode the data-original-title (containing the text in the title property) is rendered but not after validation.
What to do?
edit:
I added a computed text which should display a tooltip:
<xp:text escape="false">
<xp:this.value><![CDATA[#{javascript:return 'Notes is my favorite database for building applications.';}]]></xp:this.value>
</xp:text>
In edit mode the tooltip is rendered, when I inspect it I see:
Notes is my favorite database for building applications.
When I validate I see the data-original-title attribute is there but the tooltip will simply not be displayed with mouseover.
Edit:
adding some script seems to re-initiate the tooltip, even when validation fails:
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$('[data-toggle="tooltip"]').tooltip()]]></xp:this.value>
</xp:scriptBlock>
Related
In a webpage,there was no tooltip present for Facebook/Twitter icons.When I inspected the code for the webpage, I saw :the title attribute value was missing as highlighted in the code below.
<a onclick="ga('send', 'social', 'Facebook',
'send''https://www.Website');"
href="https://www.Website" **title** target="_blank" ><img
src="http://www.Website/themes/act/images/facebook-mouseover.jpg"
alt="Facebook" ></a>
Please suggest the accessibility issue that might occur if "title" has no value in the HTML code.
There is no accessibility issue for a missing title attribute in this context (on an <a href>). Do not use it here.
https://www.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/
Situations in which the the title attribute is not useful due to lack of support:
Displaying information for web content viewed on mobile phone browsers. Typically in desktop browsers title attribute content is displayed as a tooltip. From what I could find, tooltip display is not supported in any mobile browser and alternative visual methods of accessing title attribute content are not supported.
Providing information for people who cannot use a mouse. Typically in desktop browsers, title attribute content is displayed as a tooltip. Although the tooltip behaviour has been supported for 10+ years, no browser (except IE10+ [on focusable elements]) as yet has implemented a practical method to display title attribute content using the keyboard.
Using it on most HTML elements to provide information for users of a variety of assistive technologies. Access to title attribute information is not supported uniformly by screen readers
Although the image has an alt attribute, this code has an explicit empty title tag which can lead to undetermined behavior from screenreaders.
You have two solutions:
You can remove the empty title attribute from the a tag.
You can use this title attribute to show an information that may be facultatively seen by people using screenreaders (as the title attribute does not have a good screenreader support)
If you want to explicitely target people using a screen reader use, the aria-label attribute on the a element. For instance:
<a href="https://www.Website" target="_blank"
title="Publish to Facebook (⧉)"
aria-label="Publish to Facebook (opens in a new tab)">
<img src="http://www.Website/themes/act/images/facebook-mouseover.jpg"
alt="Facebook" />
</a>
I have an Ext Lib valuePicker on an XPage and then have added an Ext Lib toolTip to the Xpage and specified the id of the valuePicker in the for property of the toolTip (it shows up in the list of controls to aim the toolTip at, but when I hover over the valuePicker nothing happens. I have several toolTips on the page aiming at radio buttons and edit boxes and they all work correctly so my process is correct. I aim the toolTip that I want for the valuePicker to an edit control and I get the correct tip displaying.
The valuePicker "loses" it id during rendering (look at rendered page's source code) so it is not possible to address valuePicker's id in tooltip.
A workaround is to put a <span> with an id around the valuePicker and to address this id in tooltip.
<span
id="valuePickerTooltip">
<xe:valuePicker
id="valuePicker"
...>
<xe:this.dataProvider>
...
</xe:this.dataProvider>
</xe:valuePicker>
</span>
<xe:tooltip
id="tooltip1"
for="valuePickerTooltip"
label="this is the tooltip">
</xe:tooltip>
perhaps you can compute the "for" property for the xe:tooltip to use getClientId("valuePickerTooltip").
Without having this tested, I'm pretty sure the "valuePickerTooltip" id will be converted to a client ID at runtime, that means it gets a prefix. With getClientId() you can get the runtime ID for a control.
Does anybody know how to remove the tooltip in Grails 2.0.4? Currently all my mandatory fields shows a tooltip. I am trying to create a UI without the tooltip. I am using jQuery and jQueryUI.
Is there anyway that I could remove the tooltip? I think the tooltip is set by default in Grails 2.0.4.
Thanks.
you could use jQuery to remove the title attribute like so...
$(document).ready(function() {
$('[title]').removeAttr('title');
});
I think this is html 5 related. Do the fields have "required" in the tags (which I know grails puts in by default when performing scaffolding)? If so, the browser will check that those fields are filled in and prompt the user if they are not before submission. This was driving me bonkers trying to figure out what was going on.
(Follows on from Can you define tooltips in Dojo wijit template?)
I'd like to be able to popup some help text if a user hovers or keeps the focus on a Dojo wijit for some time. I know that these wijits come with some prompt behaviours such as when they are empty or on validation errors, but I'd like to be able to prompt regardless of the content of the control. For example:
<input name="tooltipTesting"
data-dojo-attach-point="tooltipMe"
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props="placeHolder:'Type Something',
required:true,
value: '${blah}'" />
<div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'tooltipMe'">
Got to love hovering over links. Sometimes you a get a free tooltip.
</div>
Programmatic definition of the tooltips works for plain HTML elements like anchors, but nothing I do appears to associate a tooltip with other Dojo controls. Advice?
You can programatically connect the widget to the tooltip using
tooltip.addTarget(widget.domNode);
dijit.Tooltip connects to the DOM node(s), not to Dijit Widgets (i.e. javascript objects), but you can always use widget's reference to its root DOM node accessible via widget.domNode.
There is also a problem with your markup: dojo-dojo-attach-point does not assign an id to the widget (you reference from the Tooltip via connectedId). Define id property <input id="tooltipMe"> to do so, then the ValidationTextBox itself and also the root DOM node of the ValidationTextBox will have the same id. Note that you cannot use hardcoded IDs in the widget templates.
How do I get these grayed out words that appear in input texts and indicate what is this input text for? I am using JSF 2 and I need it for my login's username and password widgets, so that the words "username" and "password" would appear inside the inputText before the user clicks in them to type his information.
If what I'm asking isn't clear you can look for example at this site. When you hit the "ask question" button and get the question's dialog you can see in the Title the gray words "what's your programming question? be specific." How is this done?
It's called WaterMark
You need jquery watermark plugin , or use some library like primefaces that got it out of the box
here is the jquery plugin usage
jquery-watermark
just add it in ready finction of jquery:
$("#idOfTheInputPassword").watermark('Type Your Password');
and here an example of primefaces watermark (which use jquery plugin behind the scenes)
Watermark