Why is tooltip auto placement not working correctly? - javascript

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.

Related

Ion range slider color and dragger not showing in Laravel

I am trying to add ion-rangeslider in my project
This is my HTML code
<div style="position: relative; padding: 200px;">
<div>
<input type="text" id="range" value="" name="range" />
</div>
</div>
This is my Jquery code
$(function () {
$("#range").ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 0,
max: 5000,
from: 1000,
to: 4000,
type: 'double',
step: 1,
prefix: "$",
grid: true
});
});
This is what I am getting on the screen.
As we can see the color inside the slider is not showing as well as the dragger for setting the values.
I don't know why it is not showing. Can anyone help?
By the way, I am using Laravel.
Open Developer Tools and Inspect the element. Find the relevant elements/classes and adjust the colors using css.

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" >

Handsontable + Bootstrap tooltip for column header

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>']

Spectrum colorpicker not working on jQuery dialog

I'm trying to show the Spectrum colorpicker on a jQuery dialog but it's not showing up. This is the code I'm using for loading spectrum:
$(document).ready(function() { $("#colour").spectrum({color: "#f00" });});
Being 'colour' a div inside my jQuery dialog.
This is the code that initializes the dialog:
dialogObj = $("#_dialogPanel").dialog({
autoOpen: false,
resizeable: true,
position: { my: "center-100 bottom-40", at: "center center" },
stack: true,
height: 'auto',
width: 'auto',
modal: true
});
$("#_dialogPanel").submit( function(e) {
e.preventDefault();
});
dialogObj.dialog("open");
The content in the dialog is dynamically loaded using:
$("#_dialogPanel").empty().html(response);
$(document).ready(function() { $("#colour").spectrum({color: "#f00" });});
Being 'response':
<div name='colour' id='colour' />
The references to spectrum.js and spectrum.css are added in the master page
Spectrum color picker doesn't work on div, only on input elements
<input type='text' id="colour" />

Jquery Colorbox Next and Previous buttons not working after updates

I'm using Colorbox - a jQuery lightbox and recently updated it from version 1.3.20 to version 1.5.10. Now the Previous and Next buttons are not working.
The existing colorbox object is configured like this,
$(".inline").colorbox({
arrowKey: false,
reload: false,
customClick: true,
customTyping: false,
width: '655px',
loop: false,
scrolling: false,
inline: true,
rel: 'inline',
href: $(this).attr('href'),
click: $(this).click(),
current: 'Item {current} of {total}'
});
$(".inline") is an array of anchor elements.
<div id="foo" data-bind="with: carouselItems">
<!-- ko foreach:items -->
<div class="carouselItem">
<a class='inline' data-bind="attr: { href: '#BlogCarousel' }, click: $root.load">
<input id="carouselElements" type="hidden" data-bind="value: Id" />
<img data-bind="attr: { src: PreviewImageUrl }" />
</a>
</div>
<!-- /ko -->
</div>
Should the configurations for Next and Previous buttons be changed?
Seems like reload, customClick, customTyping, click properties are no longer available in the Colorbox plugin. What are the alternatives for those properties?
reading the doc it says when
arrowKey: false
deactivates the arrows, so set
arrowKey: true
reading the changelog, maybe this is an interesting part :
Version 1.4.0 - 2013/2/12
Better accessibility:
Replaced div controls with buttons
so you may change your selectors in your knockout or whatsoever click triggering code ?!

Categories

Resources