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});
Related
I want to add a link in the text of one popup info button.
This is the code
<a class="icon-tooltip" data-container="body" data-content="you can find more information" data-html="true" data-original-title="" data-placement="top" data-toggle="popover" data-trigger="focus" role="button" tabindex="0" title=""><span aria-hidden="true" class="icon-icon_info"></span></a>
In the data-content="you can find more information" I want more information to be with a link to another site.
How can I do that?
Thank you very much for your help!
If the tooltip is generated by a library which supports HTML in tooltips (and based on data-html="true" it does) then all you would need should be the following:
data-content="You can find <a href='example.com'>more information</a>"
Pay attention to the different quotation marks used in the <a> Tag in the property.
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>
I have added addthis to a Joomla site. By default it loaded like this:
<div class="addthis_sharing_toolbox"></div>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxx"></script>
And it looks like this:
I have enabled JCH (to improve speed), but addthis is not working. I have to keep JCH. I manage to make it work, using following code:
<div class="addthis_sharing_toolbox addthis_default_style addthis_64x64_style" data-title="title">
<a class="addthis_button_facebook at-icon-wrapper at-share-btn at-svc-facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_google_plusone" style="cursor:pointer"></a>
</div>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxx"></script>
As you see I have added the tags with the icons, in that way they load, but the styling is totally different, how can I keep same design?
The answer is here: https://www.addthis.com/academy/customizing-the-addthis-toolbox/.
In my div I had the class "addthis_sharing_toolbox" but I had to use "addthis_sharing_toolbox"
<div class="addthis_toolbox addthis_default_style addthis_64x64_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone"></a>
</div>
Fairly new to coding html and css and want to make sure I'm keeping my code clean and closing tags correctly.
I'm working with an html template and trying to correctly create links from my buttons.
The way I've wrapped them in Brackets is working properly on the page and the links are working correctly, but Brackets is showing some red tags meaning I've not wrapped something properly.
Could someone show me where I'm doing this incorrectly, as I'd like to follow good code form moving forwards.
Thanks so much.
Current code for the button below:
<span class="button--inner">Contact Us</span></button>
You need to close your link tag:
<a href="contact_us.html">
<button class="button button-blue button-bordered">
<span class="button--inner">Contact Us</span>
</button>
</a>
BUT I wouldn't wrap a button with a link and instead style the link as a button.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
Contact Us
Also look at this answer as Our_Benefactors stated in the comments: How to create an HTML button that acts like a link?
You are missing a > bracket for the HREF.
<a href="contact_us.html"> <!-- THIS ONE HERE -->
<button class="button -blue -bordered">
<span class="button--inner">
Contact Us
</span>
</button>
</a>
There is a small mistake actually.
You forget > for <a> tag.
Try this.
<a href="contact_us.html">
<button class="button -blue -bordered">
<span class="button--inner">Contact Us</span>
</button>
</a>
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