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.
Related
I have a "migrated.html" page in root directory. How do I add that link to this CSS style button?
<button onclick="#" Migrated</button>
The above html code didn't work for me.
Here is the link to the code set:
https://codepen.io/prateek-vishwas/pen/Rwwpzjo
There are a few different ways to accomplish this.
But, from what I understand, it sounds like you just want an anchor <a> tag with a href attribute that is styled like this button.
You can simply just set the same class on the anchor tag that is on the button, so you should receive
<a href = "url-to-ur-page" class = glossy-button glossy-button--red>Migrated</a>
Why it has to be a button ? Why not use the normal "A" tag and style him like a button ?
<a href="migrated.html" class="glossy-button glossy-button--red">!!!Migrated!!!
</a>
Works in your codepen - ijust moved the migrated text inside the tag
This will work even without javascript.
Anyhow.the js to change the current url is
window.location = 'your url';
<button onclick="window.location='migrated.html';">
Migrated
</button>
which also work in your pen
The html structure looks like this
<div>
<a href="#"> some info
<div role="button" tabindex ="0"
aria-label = "close"
/>
</a>
</div>
When using screen reader the a tag get read "some info close" and then on focus on button it again read "close". All I want a tag to read is "some info" and button to read "close". What change should I make? I cannot change the HTML structure.
jsfiddle https://jsfiddle.net/5c1oywzg/1/
You can't have a focusable element inside another focusable element.
What change should I make? I cannot change the HTML structure.
Being given an HTML code, it's difficult to make a change without changing the code.
you're using a a[href] link for what seems to be a button
you have to separate the focusable elements
If you could have changed the HTML structure, this would be a better code:
<div>
<button> some info</button>
<button aria-label="close" />
</div>
Unfortunately, we can't change anything if you can't change the HTML structure as your structure is by nature malformed.
We can still use some hacks (using javascript for instance) like adding role=description and tabindex=-1 to the a[href] element and replace "some info" with an html button, but that would be against the second rule of ARIA :
Do not change native semantics, unless you really have to.
1.) The fiddle is different from the code you posted above. For my answer I used the fiddle code (and added a missing " for the href attribute...)
2.) The button is part of the link, so its content is read as part of the link. Do you really want the (same) link to work both when the button is clicked AND when "some info" is clicked. Looks like "some info" is supposed to be a label/comment for the link?
depending on what you want, I would either close the a tag before the button or only wrap the button into the a tag, labeling it wth the full text and hiding the text before that with aria-hidden = "true":
<div>
<a href="#">
some info
</a>
<button aria-label = "close">close</button>
</div>
OR
<div>
<span aria-hidden="true">some info</span>
<a href="#">
<button aria-label = "some info, close">close</button>
</a>
</div>
If you can only add attributes and not change the HTML structure at all you could do this:
<div>
<a href="#" tabindex="-1">
<div tabindex="0">some info</div>
<button>
close
</button>
</a>
</div>
Setting tabindex to -1 removes an element from the tab order while setting it to 0 adds an item. Generally on other values should be used. More info here.
Removing the a tag from the tab order and adding the div in instead will make the keyboard skip over the a tag and focus on both the div and button tags separately.
🎻 Fiddle
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!
First here is my Plunker code: http://plnkr.co/edit/NAH3ePyZdQePbB9EdOzW?p=preview
I'm trying to change the icon from icon-refresh to icon-spinner when the button is clicked but for some reason it's not working. I am pretty new to HTML so I believe there might be a syntax error somewhere but I'm stumped.
Your document.getElementById("something").innerText = "Loading..."; command is replacing all the contents of the tag, including the i tag. You can wrap your text in a span and then target the innerText of the span:
<a href='#' onclick="load()" id="something" class="buttonLink">
<i id="changeThis" class="icon-refresh"></i> <span id="button-text">Button</span>
</a>
javascript:
document.getElementById("button-text").innerText = "Loading...";
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.