I want to add a tooltip which would be displayed on mouse hover of the below elements.
<a ng-click="click(this)">
<span class="icon"></span>
</a>
{{product.title}}
I have the tooltip in product.desc.
I tried using the below code:
<span tooltip="{{product.desc}}" class="glyphicon"></span>
But this doesnt work.
Any Ideas/Suggestions? please help.
[EDIT] I can see the value of product.desc exists as expected in source of the page when i checked using developer tools.
Thankyou
Instead of
<span tooltip="{{product.desc}}" class="glyphicon"></span>
we need to give
<span data-toggle="tooltip" title="{{product.desc}}" class="glyphicon"></span>
None of the answers above solved my problem. This is what worked for me:
Instead of
<span data-toggle="tooltip" title="{{product.desc}}" class="glyphicon"></span>
we need to say:
<span data-toggle="tooltip" data-original-title="{{product.desc}}" class="glyphicon"></span>
Which version of angular are you using? A couple of things could be happening... I've spent the past 9 months developing angular apps all of which have leveraged the tooltip library.
Assuming you are using the tooltip library from angular-ui
Make sure you are referencing the angular-ui module in your in app.js module dependencies
angular.module('ValuesEntryApp', ['ui.bootstrap', ...more depedencies,]).config(funciton(){...});
Angular 1.3 has a known issue with angular-ui tooltips: issue/solution
Other things: You said that even if you use the title tag it still doesn't render a tooltip? I think it depends on what browser you use but I know atleast in chrome that if you hover and hold over an element with a title it will display the title for a short while. Is your glyphicon even rendering on screen?
Are there any errors in your console? Give us more info if you still seeking help. I could help get it working for you if we had more info on you dev setup.
Related
The fa-sticky-note-o icon is not being displayed in
<em class="fa fa-sticky-note-o" aria-hidden="true"></em> on my Chromebook, which is current. Other icons, such as <em class="fa fa-desktop" aria-hidden="true"></em> are displayed. It does appear when expressed as Unfortunately, this is a major documentary feature on https://marlinfw.org/docs/configuration/configuration.html I doubt that they are going to want to code their page differently just for my benefit. :)
I looked at the source of the Marlin document when it became evident that something was missing. I checked the FontAwesome cheatsheet https://fontawesome.com/v4/cheatsheet/ and see that it is displayed when expressed as I was hoping to find how to update or define the icon, but didn't find anything that told me how to do that. I see that "/assets/stylesheets/fontawesome.min.css" is part of the of the head.load javascript at top of the page. Could that be corrupted somehow? How would I force a reload?
Your fontawsome.min.css file appears to be missing a class definition for .fa-note-stick-o.
You'll want to add the following class definition(s) to it:
.fa-note-sticky-o:before,.fa-sticky-note-o:before{
content:"\f24a"
}
I'm getting started with Jekyll. I carefully followed the step-by-step tutorial https://jekyllrb.com/docs/step-by-step/01-setup/ like a good person, and everything is brilliant except that syntax highlighting is not working out of the box like the advertisement seems to imply. I've read jekyll syntax highlighter not working but the answer didn't do it for me.
Where my markdown says, e.g.,
```php
namespace Foo;
use My\Thing;
$thing = new Thing();
```
the output is
<div class="language-php highlighter-rouge"><div class="highlight">
<pre class="highlight"><code><span class="kn">namespace</span> <span class="nn">Foo</span><span class="p">;</span>
<span class="kn">use</span> <span class="nn">My\Thing</span><span class="p">;</span>
<span class="nv">$thing</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Thing</span><span class="p">();</span>
</code></pre></div>
</div>
but I'm not seeing any pretty colors. Obviously I am missing the CSS resource that defines highlighter-rouge and all that good stuff, but for all my searching I haven't been able to figure out where to get it or what I might be doing wrong.
I have tried multiple permutations of _config.yml with no luck, but I shouldn't need any special settings there because the default is what I want.
Suggestions?
Thanks.
You can find custom syntax highlighting libraries on GitHub and elsewhere, but you may want to start with https://prismjs.com/
I am getting H2 violation for below anchor tags.
It says 'H2: Combining adjacent image and text links for the same resource'
<div class="selected-label ccyImage">
</div>
<a href="javascript:void(0);" class="btn dropdown-html-toggle" tabindex="-1">
<span class="caret"></span>
</a>
But there is no any image used. Not getting how to resolve it.
So you have some unspecified tool which is detecting an accessibility problem which is different to the accessibility problem you actually have (or it is being really smart and noticing that you are expressing content using background images … don't do that).
There's not much you can do about the misidentification of the problem other than to report a bug to whomever makes the tool.
You can make your HTML more accessible by:
Not using links when you aren't linking somewhere. If you're using href="javascript:void(0);" then you're doing something wrong.
Link to somewhere useful and progressively enhance or
Use a button (not a link) if you can't make it work without JS
Putting content in your links (or buttons). There is no text at all there to give any clue to the user what the interactive element is going to do.
I'm new to jQuery Mobile and I'm trying to figure out how exactly to customize buttons. Which classes do i have to use to access certain css properties?
For instance I know that if you want to change the background color of a button you write .ui-btn-inner {background: white;}. But when I do it this way it doesn't work out all the time.
I already looked on the jQuery Mobile API website but I can't seem to find anything that really explains this concept in depth.
If someone could provide me with a website or an explanation about these classes that would be much appreciated.
You can inspect the html to see what jQuery mobile buttons look like.
For a basic button, created by:
Link button
the output looks like:
<a href="index.html" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Link button</span>
</span>
</a>
Create and load a custom CSS file after the jQuery mobile css.
Here you can override individual css classes, like
.ui-btn-inner {
// !important does the trick
background-color: #FF0 !important;
...
}
You sometimes might have to add !important to the css in order to override jQuery mobiles CSS. But I actually do not know when this is necessary, I just do it if it does not work without...
You can look up the structure of all elements in the jQuery mobile CSS, or, as i mentioned before, use the web inspector to see what jQuery turns your markup into.
PS
A more in-depth look at how the CSS works, is provided here
I'm trying to use Bootstrap's collapse functionality in Umbraco, but when I edit the HTML of a page in the rich text editor (TinyMCE), the data- attributes are scrubbed when I save the page so the plugin doesn't work. I've followed Allow any markup in the tinymce editor with no effect. Can I stop TinyMCE scrubbing my HTML?
EDIT: I've reproduced the problem at http://fiddle.tinymce.com/BNcaab
Try pasting the code below into the HTML editor, then saving and clickig the HTML editor again.
<a class="accordion-toggle down" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<h4>Slide 1</h4>
<span class="accordion-arrow"></span>
</a>
Umbraco has TidyHtml run after a save/publish event and unfortunately doesn't 100% sysnc with the tinyMCE valid/invalid_elements. There are a number of html5 elements and attributes that get discarded and i believe some other basic elements like <scripts> (this is for the better, i say!) and <iframes>. I can't remember the exact list of elements that tidy will squash, but this is a problem that we ran into on our latest Umbraco 4.8.11 implementation and unfortunately had to resort to disabling tidy.
Disabling Tidy can be done in the [/config/umbracoSettings.config] with the following:
<!-- clean editor content with use of tidy -->
<TidyEditorContent>False</TidyEditorContent> <!-- gross but: http://our.umbraco.org/wiki/how-tos/customizing-the-wysiwyg-rich-text-editor-(tinymce)/allow-any-markup-in-the-tinymce-editor -->
Unfortunatly, this setting is buggy: <![CDATA[*[*]]]> in the recent version of tinymce.
You will have to use the config option valid_elements and set the attributes as valid there.