I faced issue of getting two tooltips instead of one while using FontAwesome 5 as It will create additional SVG tag with bootstrap tooltip. I even disable the tooltip everywhere for bootstrap tooltip but still I was getting undesired tooltip.
Issue can be reproduced with following code
<span
class="fa fa-question-circle"
data-toggle="tooltip"
data-placement="right"
title="Some Title"
data-tt-head="Some Header"
data-tt-footer="<a style='opacity: 70%' target='_blank' href=''>Read More ...
</a>" >
</span>
This issue was solved following the solution by #serghost found in link below using a wrapper for the tag instead using it with in same tag.
https://github.com/FortAwesome/Font-Awesome/issues/11902
<span
data-toggle="tooltip"
data-placement="right"
title="Some Title"
data-tt-head="Some Header"
data-tt-footer="<a style='opacity: 70%' target='_blank' href=''>Read More ...
</a>" >
<i class="fa fa-question-circle"></i>
</span>
Related
Lighthouse suggesting to fix my a href text
I have a html like that
What is really happens here is I just displaying the image inside a href by using css class:
.social-icon.twitter {
background: url('../images/logo-twitter.png') no-repeat center center;
}
I can't do <a....>Twitter</a> as in that case the displayed text will destroy the view.
I can't think of anything else like just putting a span with a text inside my a and make it hidden e.g <a....><span class="hide">Twitter</span></a> but wonder if there is any proper solution?
Any recommendations on that?
For accessibility reasons (required for screen readers) links must contain a text or have description in aria-label attribute. In many use cases like yours you don't want to add any text in a link, but instead use as image or any graphic element wrapper.
Fix it by adding aria-label="Twitter" to your a element, like
If want to implement this in react app then, We need to add aria-label property to <a> tag.
Before:
<a href={`https://${ this.props.info }`} target="_blank" rel="noopener noreferrer">
<i className="fa fa-circle fa-stack-2x"></i>
<i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>
After:
<a href={`https://${ this.props.info }`} aria-label={`${ this.props.name }`} target="_blank" rel="noopener noreferrer">
<i className="fa fa-circle fa-stack-2x"></i>
<i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>
For SlickNav
The solution is quite simple. Just add title to the element of the Javascript file which has aria-haspopup="true" and tabindex="0" attribute. Add title like title="Anything" in above-mentioned line. It will solve the problem.
Working example is Oceanspace
For other similar issues you have to add title attribute to the respective anchor element
I am using bootstrap 4
I'm using this syntax in my code:
<a class="btn popovers" href="#" data-toggle="popover" data-placement="top" data-content="test content <a href='' title='test add link'>link on content</a>" data-original-title="test title">
<div class="ui-bullet"></div>
<strong>Booth 1</strong>
</a>
but the <a> tag still showed like this:
is there anything wrong with my code?
You can use data-html="true" on the pop over span.
This enables HTML content.
See more here: http://getbootstrap.com/docs/4.0/components/popovers/#options
$('[data-toggle="popover"]').popover({html:true});
Lighthouse suggesting to fix my a href text
I have a html like that
What is really happens here is I just displaying the image inside a href by using css class:
.social-icon.twitter {
background: url('../images/logo-twitter.png') no-repeat center center;
}
I can't do <a....>Twitter</a> as in that case the displayed text will destroy the view.
I can't think of anything else like just putting a span with a text inside my a and make it hidden e.g <a....><span class="hide">Twitter</span></a> but wonder if there is any proper solution?
Any recommendations on that?
For accessibility reasons (required for screen readers) links must contain a text or have description in aria-label attribute. In many use cases like yours you don't want to add any text in a link, but instead use as image or any graphic element wrapper.
Fix it by adding aria-label="Twitter" to your a element, like
If want to implement this in react app then, We need to add aria-label property to <a> tag.
Before:
<a href={`https://${ this.props.info }`} target="_blank" rel="noopener noreferrer">
<i className="fa fa-circle fa-stack-2x"></i>
<i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>
After:
<a href={`https://${ this.props.info }`} aria-label={`${ this.props.name }`} target="_blank" rel="noopener noreferrer">
<i className="fa fa-circle fa-stack-2x"></i>
<i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>
For SlickNav
The solution is quite simple. Just add title to the element of the Javascript file which has aria-haspopup="true" and tabindex="0" attribute. Add title like title="Anything" in above-mentioned line. It will solve the problem.
Working example is Oceanspace
For other similar issues you have to add title attribute to the respective anchor element
i am working on setting up my social icons on footer using font awesome and bootstrap-social.css. When i do this
<button class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></button>
it works properly see image
but when i try to use same css classes in < a > tag
<a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a>
i get result like this see image,its hover,icon in the middle, etc. styles are messed up.
There is a 'how to use' example on original page where i dl-ed bootstrap-social.css with < a > tag used because of that i am confused.
So my goal is to apply that button like style to a link or add link in button with that style if its possible somehow. Any help is appreciated.
<a class="btn btn-social-icon btn-facebook" href="here paste your link"><i class="fa fa-facebook"></i></a>
When you use <a> element it has default hover properties,so you can disable them.
Here is example: https://jsbin.com/qogunenura/1/edit?html,css,output
I would like to add the name base on the attribute title as there is no text displayed for the link but instead a icon using font-awesome
My link are like this :
<a itemprop="url" href="whatever.html">
<i class="fa fa-home" title="Home"></i>
</a>
I need solution without javascript involve
Like this:
<a itemprop="url" href="whatever.html">
<i class="fa fa-home" title="Home"></i>
<meta itemprop="name" content="Whatever Name You Want" />
</a>
(Note edited to remove incorrect alternative after below discussion).
Though as an aside, as per below conversaation, some question on whether <i> tag should even be used: Should I use <i> tag for icons instead of <span>?