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!
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.
....
....
Some data
<span popover-placement="top" popover="content1, content2" popover-trigger="mouseenter">
<span class="fas fa-info-circle" style="font-size: 12px;"></span>
</span>
....
I want to change the content1 and content2 into two lines using <br>
I tried data-html="true", it doesn't work, I do believe, that's because it only works in the case like this -> data-toggle="popover" data-content="content1 <br> content2"
so is there any way to add in the first method? please make your suggestions and help me
If you are using Bootstrap's popovers, you are missing an element property to make the HTML popover work. Add this property data-html="true" to your span element with the tooltip and if it still doesn't render properly, run this on DOM ready:
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
I am using this template: https://startbootstrap.com/template-overviews/grayscale/ and am trying to replace the icon, which uses the i tag, with my own logo. I can't seem to find out how to use the i tag with my own image. I tried replacing it with an img tag, but the styling gets messed up. This is the line of html that is causing the issue:
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-play-circle"></i> <span class="light">Start</span> Bootstrap
</a>
I don't know what css, if any, to include since there is a lot relating to the specific class. Any help appreciated.
Edit: UncaughtTypeError's comment is the way to go.
That is because the .fa-play-circle CSS class is affecting the "play icon" using the following CSS (found in font-awesome.min.css):
.fa-play-circle:before {
content: "\f144";
}
So, it isn't really an image as much as it is a glyph loaded before the tag.
I want to use a bootstrap popover that gets triggered on click and has a (non-bootstrap) tooltip on hover. Normally you would use html title attribute for this. But on initialisation of a popover, bootstrap writes the content of the title attribute to the data-original-title attribute and replaces title with empty string.
For example this:
<a href="#!" data-toggle="popover" data-title="This is the Popover's Title" data-placement="bottom" data-trigger="click" title="This is a Tooltip">
</a>
becomes this after initialisation:
<a data-original-title="This is a Tooltip" href="#!" data-toggle="popover" data-title="This is the Popover's Title" data-placement="bottom" data-trigger="click" title=""></a>
Since title attribute is now empty, no tooltip is shown.
Is there a way to display a tooltip on a popover anchor with plain html?
Hi you can use other data attribute for a title and content of your example, check this:
$('a').each(function() {
$(this).popover({
content : $(this).attr("popover-content"),
title : $(this).attr("popover-title"),
placement : "right"
}),
$(this).tooltip({
title : $(this).attr("tooltip-title"),
placement : "bottom"
})
});
<a tooltip-title="This is a Tooltip" href="#!" popover-title="This is the Popover's Title" popover-content="popover content" data-trigger="click">click me</a>
Example on fiddle
I only have experience from using Bootstrap 2.3 Popover. But setting the title with the title option as mcmac suggested will only work if there is no title attribute text for popover to steal in the first place. The only solution I found was using a simple attribute copy to restore the title attribute after running the popover() method:
$('#myElement').attr('title', $('#myElement').attr('data-original-title'));
This one uses jQuery but can probably be done with plain JS.
My question is based on SO question Bootstrap tooltips not working
So, the solution is to use:
jQuery:
$("[rel='tooltip']").tooltip();
html:
test
And that works perfect.
My question is: what if I want to use a <span> tag instead of <a>.
Should it be <span rel="tooltip" title="A nice tooltip">Hover on me</span> ?
It works perfectly but I see the rel attribute is used for a tags.
So, what's the correct solution?
Your can write in the following ways :
Method 1
<a title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Tooltip on top">Tooltip on top</a>
And Than initialize it with the following code :
$('a').tooltip();
The other way is to use classes or ids and initialize them one by one like :
Method 2
<span class="top" title="A nice tooltip" data-original-title="Tooltip on right">Hover on me</span>
<a class="top" title="" href="#" data-original-title="Tooltip on top">Tooltip on top</a>
Than initializing it with the following code :
$(".top").tooltip({
placement: "top"
});
Jsfiddle Method 1
Jsfiddle Method 2
If you don't want to use a rel attribute on a <span>, simply use something else like a class and update the tooltip selector, eg:
$("[rel='tooltip'], .tooltip").tooltip();
<span class="tooltip" title="A nice tooltip">Hover on me</span>
You can use any CSS selector inside the jQuery function $() to select any element on the page in any way.