Iam getting a problem while i place mouse on tooltip only when the page loads intially. When i login to website, after the page is loaded when i place my mouse on '?' glyphicon symbol, iam able to see the whole title script that written inside the html.
This is the below text iam seeing when i hover. This is the title with close button 'x' inside the tool tip.
About your score<button type=button class=close data-dismiss=popover aria-hidden=true onclick=$('#abcPopover').popover('hide')>×</button>
I made the tooltip clickable. when i click on '?' glyphicon symbol the popover is not coming on first click and the script is now hiding. when i click on '?' glyphicon symbol second time it works fine the popover is coming. This is the problem iam seeing only on when page loads and when i click on '?' glyphicon symbol the title will hide and on second click works fine and popover will come up.
This is the code i have written in html.
<a href="#" id="abcPopover" data-html="true"
title="About your score<button type=button class=close data-dismiss=popover aria-hidden=true onclick=$('#abcPopover').popover('hide')>×</button>"
data-toggle="popover" data-content="{{abcTooltip}}" ng-click="open()"><i class="glyphicon glyphicon-question-sign"></i></a>
nesting a button in Html tag it isn't valid HTML5 according to the HTML5 Spec Document from W3C:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
In other words, you can nest any elements inside an except the following:
<a>
<audio> (if the controls attribute is present)
<button>
<details>
<embed>
<iframe>
<img> (if the usemap attribute is present)
<input> (if the type attribute is not in the hidden state)
<keygen>
<label>
<menu> (if the type attribute is in the toolbar state)
<object> (if the usemap attribute is present)
<select>
<textarea>
<video> (if the controls attribute is present)
However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way.
Check this link out to create your tooltip. Link
Fiddle
Related
Using <a name="foobar">Hello</a> in the text mode editor and switching to visual mode and back to text editor results in 'Hello'. Using latest wordpress 4.8.2. Anchor tag itself works but not sure why the contents are moved out of the a tag. Any idea?
This is the default behaviour of TinyMCE - the default WP editor, and also used in many other applications.
The format you are using is valid according to the HTML 4.01 spec:
<a name="foobar">Hello</a>
However when you use TinyMCE to insert anchors into content, it uses the following format:
<a name="foobar"></a>
...and it appears that it enforces this structure, even if you manually add an anchor manually with text between the tag.
However, you can use any tag (not just <a>) to define the anchor point, if you need to have text in your anchor. The following example from the HTML 4.01 spec shows an id on a h2 tag being used as the anchor:
Section Two
//...later in the document
<h2 id="section2">Section Two</h2>
So if you want to keep the structure you have, you can change your anchor to
Go to foobar
[...]
<p id="foobar">Hello</a>
Note on HTML5 the name attribute of the <a> tag has been deprecated in HTML 5 - use id instead
Hope that helps :)
I have a p:autoComplete component in my view that is capable of accepting multiple values, like so:
<p:autoComplete
id="typesList"
value="#{bean.types}"
completeMethod="#{bean.typeLookup}"
var="type"
itemLabel="#{type.name}"
itemValue="#{type}"
queryDelay="300"
maxResults="5"
converter="typeConverter"
dropdown="true"
multiple="true">
...select and unselect ajax events...
</p:autoComplete>
I have purchased and am using the Primefaces Adamantium theme. Have not added any style customizations to the autoComplete component, yet this is how it looks:
As you can see, the dropdown arrow button is rendered below the actual textbox, for some reason. If I enter a lot of values, the textbox and the button both expand, but one always stays above the other. If I inspect the elements, I see the following style classes on the textbox:
ui-autocomplete-multiple-container ui-widget ui-inputfield ui-state-default ui-corner-all
And the following on the down arrow button:
ui-autocomplete-dropdown ui-button ui-widget ui-state-default ui-corner-right ui-button-icon-only
I've inspected each style class individually and I don't see anything that could be causing the issue. All of them are out-of-the-box, I haven't modified them in any way. Taking out one, many or all of the above style classes does not change anything. The button still appears below the textbox. What could I be doing wrong?
In the <button> specification part we see that permitted content is only Phrasing content. It's valid HTML code part (checked here):
<button>
<span></span>
</button>
This is not valid HTML code part (checked here):
<button>
<div></div>
</button>
Error: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
But we can change display property of the <span>:
<button>
<span style="display: block"></span>
</button>
And it looks like we use a <div> instead a <span>, but the HTML is valid. Is it OK (by the specification) to use a permitted content element and change its display property?
Even though you style a span with display: block you still can't put block-level elements inside it:
<div><p>correct</p></div>
<span style="display: block;"><p>wrong</p></span>
The (X)HTML still has to obey the (X)HTML DTD (whichever one you use), no matter how the CSS alters things.
So they are different, and thus there is nothing problematic here.
But in HTML5 some block elements may be placed inside inline! we say about putting block elements inside link and in other cases it doesn't have sense. “Block-level” links in HTML5
I'm using jQuery Mobile (jQM) and Knockout.js (ko) to develop an application. In this application, I need to generate a variable number of buttons that are defined by a constantly updating web service.
So, in my markup, I have:
<div id="answerPage-buttons" data-bind="foreach: buttonsLabels">
<button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" />
</div>
buttonLabels is a list of short strings returned from the web service. It's defined as:
self.buttonLabels = ko.observableArray();
This all works fine when the buttons are not "jQM styled". However, when I style them using:
$("#answerPage-buttons").trigger("create");
problems arise during the update.
The issue seems to be that jQM wraps the buttons in a div (with a sibling span) to make them all nice and mobile looking. However, when the ko applies the updates via the bindings, it only removes the tags, leaving the surrounding stuff, and adds new button tags - which are then also styled by the jQM trigger call.
So, I end up with an ever-growing list of buttons - with only the last set being operational (as the previous ones are gutted by the removal of their button element, but all the styling remains).
I've managed to address this, I think, by placing the following call immediately after the observable is updated:
$("#answerPage-buttons div.ui-btn").remove();
However, my feeling is that there's probably a better approach. Is there?
I found a solution.
If I surround the buttons with a div, it seems to work - e.g.
<div id="answerPage-buttons" data-bind="foreach: buttonsLabels">
<div>
<button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" />
</div>
</div>
I'm guessing this is because the markup added by jQM remains "inside" the markup replicated by ko. Without the div, jQM wraps the button tag, which was the immediate child of the tag that contains the ko foreach binding.
I have a DIV tag. Inside the DIV, I have a Table and in a row, I have placed a script code which displays random images which on a click leads to a url.
This is how the script renders inside the Div Tag
<div>
<table>
<tr>
<td>
<script />
<a href="some random url">
<img></img>
</a>
...
When the user hovers over these images, the anchor url shows as a message on browser status bar. This is very misleading for users. I want to know how to use CSS to hide this status message - Cross Browser and display a custom message instead. On the Div, I have given onmouseout and onmouseover, however it does not help.
Can this be done?
See https://developer.mozilla.org/en/DOM/window.status :
This property does not work in default configuration of Firefox and some other browsers: setting window.status has no effect on the text displayed in the status bar. To allow scripts change the the status bar text, the user must set the dom.disable_window_status_change preference to false in the about:config screen.
This is a security feature that you can't realistically bypass.
common users dont know that they should look at that place in the browser window.
but you can hide that message... you can maybe just redirect with javascript
something like this:
<a href="javascript:void(0);" onclick="someredirectfunction('someurl');return false;" >
<img />
</a>
onmouseout and onmouse over are used for events for client side scripting. Those are used "mostly" for a language called ecmascript(javascript). You unfortunately will not be able to do what you are asking with CSS, css is desinged to represent the appearance of a site, HTML the form, and javascript (other scripting sources) the function.