Handsontable + Bootstrap tooltip for column header - javascript

I am trying to add a Bootstrap tooltip to a Handsontable header. My table instance is named "hot". The relevant JS part is below:
<script>
hot.updateSettings({
colHeaders: ['Columname1', '<span style="color:white;" class="tooltip-button" data-toggle="tooltip" data-placement="bottom" title="Column description"> Columnname2 </span>']
});
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({trigger : 'hover', delay: {show: 700, hide: 100}});
});
</script>
I also have a CSS style for the "tooltip-button" class. The problem is that when I hover over the header text, the "Column description" appears as an unformatted title instead of a properly formatted and animated tooltip box. I am new to JS so I can imagine countless reasons why this does not work. I would appreciate if you could 1. describe why this does not work and 2. how to do it properly.

First : change tooltip css Position => fixed
<style>
.tooltip {
position: fixed;
}
</style>
Second : after your handsontable change, the header will re-render
hook a afterRender event to enable tooltip again.
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
Handsontable.hooks.add('afterRender', function() {
$('[data-toggle="tooltip"]').tooltip();
});
});

This part in your code is incorrect:
colHeaders: ['Columname1', '<span style="color:white;" \
class="tooltip-button" data-toggle="tooltip" \
data-placement="bottom" title="Column description"> Columnname2 </span>']
Your new lines break the dynamic html you are creating. Instead, try
colHeaders: ['Columname1', '<span style="color:white;" class="tooltip-button" data-toggle="tooltip" data-placement="bottom" title="Column description"> Columnname2 </span>']
or
colHeaders: ['Columname1', '<span style="color:white;"' +
' class="tooltip-button" data-toggle="tooltip"' +
' data-placement="bottom" title="Column description"> Columnname2 </span>']

Related

Why is tooltip auto placement not working correctly?

I'm using Bootstrap's tooltip plugin, and am having trouble getting data-placement="auto bottom" to work. Using data-placement="bottom" works as intended though. Here is what my element looks like:
<button class="tooltip-icon btn-icon tooltip-trigger" title="Enter Address" data-placement="auto bottom">
<svg class="icon help">
<use xlink:href="#help"/>
</svg>
</button>
The above causes the tooltip's placement to be top. I also changed the DEFAULT placement value in the JS:
Tooltip.DEFAULTS = {
animation: true,
placement: 'auto bottom',
selector: false,
template: '<div class="bootstrap-tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
trigger: 'hover focus',
title: '',
delay: 0,
html: false,
container: false,
viewport: {
selector: 'body',
padding: 0
}
}
Here is how I am initializing: $('.tooltip-trigger').tooltip();
Why isn't the auto placement working as intended?
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto bottom", the tooltip will display to the bottom when possible, otherwise it will display top.

Bootstrap set popover content

I have been trying to find a way to dynamically modify the content of a bootstrap popover using Javascript, however the method i have come across so far have not worked :
<!--object with the popover-->
<input id="popoverlist" type="text" name="poplist" placeholder="Enter data" data-html="true" data-content="" rel="popover" data-placement="bottom" data-original-title="pop list" >
$('#popoverlist').popover({
offset: 10,
trigger: 'manual',
animate: false,
html: true,
placement: 'left',
template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).click(function(e) {
e.preventDefault() ;
}).mouseenter(function(e) {
$(this).popover('show');
});
The methods i have been trying to use to set the html content are :
$('#popoverlist').data('bs.popover').html("<p>New content</p>");
//and using the inner HTML
document.getElementsByClassName("popover-content")[0].innerHTML = '<p>New content</p>';
However neither of those methods change the html data content. I would appreciate any help on this to point me in the correct direction :)
Your second idea works, but you need to invoke it after the popover-content has been created.
The popover isn't created until the first time it is shown, and is recreated after each call to show. Thus, you need to change the content after $(this).popover('show');.
I've included a snippet showing this in action:
$('#popoverlist').popover({
offset: 10,
trigger: 'manual',
animate: false,
html: true,
placement: 'bottom',
template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).click(function(e) {
e.preventDefault() ;
}).mouseenter(function(e) {
$(this).popover('show');
// dynamically change content after show
document.getElementsByClassName("popover-content")[0].innerHTML = '<p>New content</p>';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<input id="popoverlist" type="text" name="poplist" placeholder="Enter data" data-html="true" data-content="" rel="popover" data-placement="bottom" data-original-title="pop list" >

How can I dynamically disable popover from a DOM element?

I have almost identical multiple divs on a page. They all have graphs inside I want some of them to have popovers when they are hovered.
I want to decide for each div if the popover is displayable or not. Is there a property that I can include inside options such as "diplay: false" ?
HTML
<div id="{{graph.id}}" data-ng-repeat="graph in graphs" data-placement="top" data-original-title="Parameters"></div>
JS
var options = {
html: true,
placement: 'top',
trigger : 'hover',
content: function() {
return $('#info-chart-' + currentObj.id).html();
}
}
$(currentObj.id).popover(options);
You can add some class to those elements on which you don't want popup like nopop class.
<div id="{{graph.id}}" class="nopop" data-ng-repeat="graph in graphs" data-placement="top" data-original-title="Parameters"></div>
Now change the jquery code.
$(currentObj.id).not(".nopop").popover(options);
You can check here --> JsFiddle

Showing Popover in a Table element using Codeigniter

Can anyone explain how to use popover on a table element using Codeigniter?
<td> <span id="popover" data-toggle="popover" data-content="<?php echo $userData[$i]->name; ?>"></span><?php echo custom_echo($userData[$i]->name,15); ?></td>
And javascript code is
<script>
$(document).ready(function() {
$("#popover").popover({
html: true,
animation: false,
placement: "bottom"
});
});
</script>
What exactly is not working?
Using your code, I have guessed how output html would look like:
<table>
<tr>
<td><span id="popover" data-toggle="popover" data-content="user name in popover">user name in span</span></td>
</tr>
</table>
I have also added your script in onLoad event:
$("#popover").popover({
html: true,
animation: false,
placement: "bottom"
});
I have included some resources:
jQuery
bootstrap.min.js
bootstrap.min.css
And it all works fine, as you can see in this jsfiddle: http://jsfiddle.net/d2k8zzsw/1/

Avoid wrapping to a new line in the bootstrap 3 tables

I place a html table to the bootstrap's popup dynamically:
html popup placeholder:
<button
id="holder"
type="button"
class="btn btn-link btn-lg"
data-toggle="popover"
>Images info</button>
javascript:
function getTab()
{
var tab = $('<table class="table table-condensed table-hover"' +
'style="margin-top: 20px;"></table>');
tab
.append($('<tr></tr>')
.append($('<td></td>').text('Number of images:'))
.append($('<td ></td>').text(100000)) )
.append($('<tr></tr>')
.append($('<td></td>').text('Images data type:'))
.append($('<td ></td>').text('unsigned char (8 bit)')) )
.append($('<tr></tr>')
.append($('<td></td>').text('Images format type:'))
.append($('<td ></td>').text('grascale mono')) );
return tab;
}
$('#holder').popover(
{
trigger: 'click',
html: 'true',
placement: 'bottom',
}
);
$('#holder').data('bs.popover').options.content = getTab();
Everything works fine (see here - http://jsfiddle.net/JJQS9/192), but I need to render each tables row in one line - without wrapping to a new line.
I tried to expand popover's width:
.popover
{
width: 500px;
}
but this has no effect.
You need to override the max-width property on popover which is already set to 276 px.
.popover {
max-width:500px;
}
Example:
http://jsfiddle.net/JJQS9/193/

Categories

Resources