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.
Related
I am trying to put a form in a bootstrap popover but the form is not visible. does anyone have a solution? The Name in the span works well but the form not.. below my code..
<svg id="Foo" width="107" height="224.893" viewBox="0 0 107 224.893" data-placement="top" data-html="true" role="button" data-trigger="focus" data-toggle="popover"
data-content='<span>#Foo.Name</span><button>sfddf</button>'>
<script>$("[data-toggle=popover]").popover();</script>
Popovers use the built-in sanitizer to sanitize options which accept HTML. It contains <a>,<div>,<em>, etc. You can refer to this document. It shows all the built-in sanitizers.
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});
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 wanted to create Similar tooltip as shown in this fiddle
http://jsfiddle.net/Qv6L2/294/
(Please mouse over on the input fields to see the tooltip)
I was following the above fiddle and created my code as
<div class="kp-color-button">
<a id="bullishengulfing" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title="This is bullishengulfing" class="candlespattern green-button">Bullish Engulfing</a>
<a id="dojiyestersay" rel="tooltip" data-placement="bottom" data-toggle="tooltip" title="This is dojiyestersay" class="candlespattern orange-button">Doji Yesterday</a>
<a id="hammer" rel="tooltip" data-placement="bottom" data-toggle="tooltip" title="This is hammer" class="candlespattern light-blue-button">Hammer Pattern</a>
<a id="bearishengulfing" data-placement="bottom" data-toggle="tooltip" rel="tooltip" title="This is bearishengulfing" class="candlespattern maroon-button">Bearish Engulfing</a>
</div>
and this is my fiddle
http://jsfiddle.net/7jf3E/31/
Could you please tell me how to create similar tooltip ??
The first fiddle uses a set of JS and CSS code to create tooltips.
In the code you are using in the second fiddle, the tooltips are based on the "title" HTML attribute and all the data-* stuff you added have no effect.
EDIT: to be more specific, a "title"-based tooltip is generated by the browser, like a tooltip in an application. It is not an HTML entity and thus cannot be styled.
It seems that you've copied/pasted these data attributes form some other code/page without knowing excatly what they are. Perhaps something using Bootstrap:
http://getbootstrap.com/javascript/#tooltips
Anyway, to answer your question, you cannot change the color for "title"-based tooltip.
But do not hesitate to check Bootstrap if you are starting a new website.
Best,
First add another div for the tooltip
<div id = "tooltip"></div>
then hide it with CSS
#tooltip {
display: none;
}
then use jQuery:
$(document).ready(function() {
$("#bullishengulfing").hover(function() {
$("#tooltip").show("slow");
$("#tooltip).text("the text for that category");
)}; // repeat this for every div
)};
hope this helps!
I am trying to implement facebook share button in my webpage. Here is my code:
<a class="btn btn-social-icon btn-facebook" href="https://www.facebook.com/sharer/sharer.php?u=test.com" target="_blank">
<i class="fa fa-facebook"></i>
</a>
What are my options if I want to share just a simple text, not an URL ? Is there some kind of text param ?
Facebook allows meta tags to specify some parameters to pass over.
See facebooks developer page for more info.