Bootstrap popover without title - javascript

I am using bootstrap popovers.There are many popovers on the page and in one of the popover , I dont want to display the title,when I dont give Title, it still shows that area where the title would have been.
Found an answer on How do you disable the title in Twitter Bootstrap's popover plugin?
but cant give css : display:none
to popover-title class since that would hide title from all other popovers also.
What should be the correct way to do this?
Thanks in advance.

Thanks.. got it worked by overriding the template
showpopover=function(message,context){
var popover_message="<div>"+message+"</div>";
//$(a).hide();
$popover=$(context).popover({ placement:"bottom",trigger:"hover",template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>',content:popover_message}).popover('show');
};
how i called the function is here:
html = html + "<td onmouseover=\"showpopover('"+main_image_data['score_reason']+"',this)\"><center>"+main_image_data['bonus']+"</center></td>";
It works :)

You can specify the template for a popover using the admittedly undocumented template option. This is described in one of the answers to the question you posted (not the accepted one). I'd use this method if it's only for some popovers on the page.
Edit: this has some drawbacks of course: updating bootstrap means making sure your template still fits, which is exactly the reason this option is not documented (I imagine).

Related

How to add content to a bootstrap panel by using jQuery?

After retrieving info, I want to show it inside a bootstrap panel by using jQuery.
I use the .html() function to show the panel.
$('#id_div').html('<div class="panel panel-info"><div class="panel-heading"><h3 class="panel-title">'+my.awesome.title+'</h3></div><div class="panel-body">Content here :) There is more and this is becoming a super long line ...</div></div>');
I have found that there is a way to break this into several lines by using .append() . I have tried the following:
$('#id_div').append('<div class="panel-body">Adding more content here :) </div>');
This does not work, since the added text appears outside the panel.
How do I specify where exactly I want the code to be appended?
Solved.
According to David, by using the .find() function, you can specify where exactly you want the text to be appended.
$('#id_div').find('.panel-body').append('Adding more content here :)');

Tooltips not working

OK, I am baffled on how to get Bootstrap 3 Tooltip working.
Bootstrap Tooltip "instructions"
http://getbootstrap.com/javascript/#tooltips
Says to trigger using:
$('#example').tooltip(options)
then HTML to write
Hover over me
No matter what I do, I cannot seem to get it working. There is no ID named example in their example, and adding said ID does not work (I wrap the script in a script tag and have added it before and after the anchor).
But, after looking around on Google, I found the following code, which when added makes the Tooltip work as it should.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
So, my question is, How the hell do I get it working with the provided Bootstrap code! What am I missing? They really need to work on their instructions. This should not take this long to figure out when it should be simple!
I was able to recreate this in a fiddle. Check the console on your browser if you are getting javascript errors. Looking at the code you have provided though it hits me that you might be mixing two things together. The options need to be defined in your javascript code and not in HTML, like this:
$(document).ready(function() {
var option = {
title: "example",
placement: "bottom"
};
$("#example").tooltip(option);
});
Well, this is about how to read the document of bootstrap.
$('#example').tooltip(options)
just presents how to use the jquery method, and it is not right for the following html:
Hover over me
The method must be called in order to active the tooltips plugin. So, in order to make the html working with the plugin, you need to do two steps:
add an id into the html, say,
Hover over me
call the jquery method,
$('#tips').tooltip(options)

jQuery/css not working with BigCommerce

So I've got this nice little div button navigation menu setup here FIDDLE and when I try to implement it on BigCommerce it doesn't work. I am running into a problem when I try to add a snippet "%%Panel.ProductDescription%%" into the text.
So this is the code that I amended with the snippet
$("#description").on("click", function() {
$("#content").text( % % Panel.ProductDescription % % );
});
I've tried .text, I've tried using .html, I've tried making it a variable and calling it. I'm out of ideas. Anyone come across this before? Before adding the snippet the code works beautifully. After adding it the code stops working.
The problem is that when you are trying to insert the text %%Panel.ProductDescription%% you are targeting a Bigcommerce template shortcode. Once the template is rendered that shortcode is no longer accessible by any means - including jQuery.
When rendered that panel has the div id "ProductDescription". So your code should look more like this.
$("#description").on("click", function() {
$("#content").text("#ProductDescription");
});
Note, however, that this div has other html in it. Either your jQuery should use .html instead of .text or you should think about targeting a div inside of the description panel.
.ProductDescriptionContainer is what actually holds the description content.

how to modify xlink:href with jquery not working

I was trying to follow this question but it's not quite working for me
Load src content to SVG image dynamically
I created some code on jsfiddle http://jsfiddle.net/sLXCr/
Basically, I am trying (but neither seem to work)...is it a selector issue?
$('.graphlink').attr('xlink:href', "#");
document.querySelector('.graphlink').setAttributeNS('http://www.w3.org/1999/xlink', 'href', "#");
This is the minimized version of my code and I am trying to select all of the class="graphlink" as I want to change all the a href stuff to # and then I also after that want to register an onclick handler to all of those a ref that pops up the same modal for all of them(the modal is static information is all).
hmmmmm, I should mention I am using D3 and maybe there is a way to do it with that in that I want to add a class style but I have optional code that runs on some pages and not others to change all the href...maybe that is possible with D3 code instead?
My latest try with D3 didn't work :(
var refs = d3.selectAll('a');
refs.attr("xlink:href", function(d) { return "#"; });
I do see the above grabbing 24 a links but it's grabbing links I don't want but 'a.graphlink' seem to select nothing :(
thanks,
Dean
grrrr, it had nothing to do with that code and everything to do with not posting the whole set of code(which had too much in it I thought)....turns out my code was not in the callback method so it was run toooo soon.

How to use onmouseover?

I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..
What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>
You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.
Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.
As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.
For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage

Categories

Resources