The show delay of a Bootstrap Vue tooltip can be set adding a .dXXX modifier, like so:
<b-button v-b-tooltip.d300 title="Tooltip content">Hover Me</b-button>
Is there a way to configure the default show delay globally? I'd like to add a small delay to all tooltips by default.
After some investigation:
Is there a way to configure the default show delay globally?
Not currently. However, I've submitted a PR to add this feature: https://github.com/bootstrap-vue/bootstrap-vue/pull/3426
Once merged, the delay of both tooltips and popovers can be customized globally like so:
import Vue from 'vue';
import BVConfig from 'bootstrap-vue/es/bv-config';
import BootstrapVue from 'bootstrap-vue';
Vue.use(BVConfig, {
BTooltip: {
delay: {
show: 400,
hide: 100,
},
},
BPopover: {
delay: 1000,
},
});
Vue.use(BootstrapVue);
Related
I'm trying to make a jquery-ui tooltip show/hide on a click event. Also I don't want it to show hide on mouse enter/leave.
Here is a fiddle with a normal tooltip : http://jsfiddle.net/Michael_0/sLhD9/
(unfortunately jsfiddle doesn't seem to be able to include jquery-ui from google cdn ?).
I had the idea to disabled the tooltip at initialization then enable it on click just before showing it, it works but I can't prevent the tooltip from hiding when the mouse leaves the target.
$("#myDiv").tooltip({
disabled: true,
content: function () {
return "<div>Custom content</div>"
}
});
$("#myDiv").click(function () {
$(this).tooltip("option", "disabled", false);
$(this).tooltip("open");
});
To do this you need to unbind the default event handlers:
$("#myDiv").unbind('mouseover');
$("#myDiv").attr('ttVisible','no');
$("#myDiv").click(function() {
if($("#myDiv").attr('ttVisible') == 'no') {
$("#myDiv").tooltip('open');
$("#myDiv").unbind('mouseleave');
$("#myDiv").attr('ttVisible','yes');
} else {
$("#myDiv").tooltip('close');
$("#myDiv").attr('ttVisible','no');
}
});
You can track the current state however works for you, I used an attribute called ttVisible. jQuery UI doesn't seem to expose the current state of the tooltip in any way.
I want to disable the use of navigator in highcharts but still show it as "full" small chart.
Is it possible?
Yes, you can hide them in callback: http://jsfiddle.net/nX37D/
But user still will have possibility to change extremes by using handles (even if they are invisible). To change that behavior, you will need to edit sources.
$('#container').highcharts('StockChart', options, function (chart) {
var handles = chart.scroller.handles;
setTimeout(function () {
handles[0].hide();
handles[1].hide();
}, 1);
});
Another way to hide them within the API is:
navigator: {
handles: {
backgroundColor: 'transparent',
borderColor: 'transparent'
}
},
Fiddle here.
I want to add a reference series to my charts (i.e. a reference price). Axis.addPlotLine() does it, but I want to be able to toggle this series from the legend; a plain plotLine does not show up in the graph's legend.
Another reason why plotLine does not seem like a good solution is that it does not get accounted for by the viewport calculations. Which means that toggling other series might lead to the plotLine appearing outside the viewport due to zooming.
The simplest way to accomplish what I want would be, to add a dynamic series via chart.addSeries. But it's impossible to call this method from within a triggered addSeries event because chart.addSeries is set to null while in the event handler.
Tying in to the redraw event creates a whole lot of difficulties as well, because render() can't be called anymore.
How would you go about it?
Update:
As per the comment of Pawel Fus, I unsuccessfully tried the following:
[…]
events: {
load: function (event) {
foo = this;
},
addSeries: function(event) {
console.log(foo) // returns chart object as expected
console.log(foo.addSeries) // undefined
}
}
Solution is to store addSeries on load event, and use stored function when adding series. Live example: http://jsfiddle.net/3bQne/808/
events: {
load: function (event) {
foo = this.addSeries;
},
addSeries: function (event) {
if (iterator) {
iterator--;
foo.call(this, {
data: [100, 200, 100, 100, 200, 300]
});
}
}
},
Still you can stick with plotLine only.
If the position of the line is static that is the best way.
If the position is dynamic then you can still go with plotLine.
There are events for adding and removing plotLine on the fly.
API link
removePLotLine() : http://api.highcharts.com/highcharts#Axis.removePlotLine
addPlotLine() : http://api.highcharts.com/highcharts#Axis.addPlotLine
I hope this will help you.
I want to implement a feature somewhat like (but not exactly like) the hint mode of the Mahjong Titans game in Windows. In that game, you can ask the game to show you a tile that matches the tile you're on.
In my app, when the user hovers the pointer over a cell of my table, I want to display a tooltip but also add a class to the underlying cell, as well as to some other related cells, in order to highlight these cells for the duration of the tooltip display; the highlight would disappear when the tooltip closes.
The cell click event is already dedicated to some other behavior. This related-cells-highlighting behavior must be an ancillary behavior of the tooltip.
I am creating the tooltip like this now:
$("#my-table tbody td.foo").tooltip({
content: function () {
// figure out the custom message to be displayed
}
},
items: "td.foo",
position: { my: "left+15 center", at: "left top" },
show: {
delay: 666
}
})
Can this instantiation approach be extended with functions that are invoked when the tooltip is displayed and when the tooltip is taken down?
In the function tied to the tooltip's opening, I would figure out which cells are involved and add the correct class to them; in the function related to the tooltip's closing, I would remove that class from those cells.
I think you're looking for the open and close events.
$("#my-table tbody td.foo").tooltip({
content: function () {
// figure out the custom message to be displayed
},
items: "td.foo",
position: {
my: "left+15 center",
at: "left top"
},
show: {
delay: 666
},
open: function (event, ui) {// do stuff when tooltip opens...
},
close: function (event, ui) {// do other stuff when tooltip closes...
}
});
My problem is that tooltips are not hiding after the cursor is moved away from the text with tooltip. You can check this page for an example of this problem:
http://federationgenealogie.qc.ca/nous-contacter (which is an simple com_contacts page)
But the problem persists throughout the website.
I've tried to the a template override of the com_contacts and to change the way tool-tips are handled using: http://docs.joomla.org/How_to_add_tooltips_to_your_Joomla!_website
$toolTipArray = array('className' => 'mytooltipclass', 'showDelay'=>'500',
'hideDelay'=>'500', 'fixed'=>true,
'onShow'=>"function(tip) {tip.effect('opacity',
{duration: 500, wait: false}).start(0,1)}",
'onHide'=>"function(tip) {tip.effect('opacity',
{duration: 500, wait: false}).start(1,0)}");
JHTML::_('behavior.tooltip', '.hasTip', $toolTipArray); ?>
Only the 'fixed'=>true parameter works, so I get a feeling this kind of works. But since all other parameters are not working, this is not a solution.
I've also tried to make my own tooltip.js file containing:
window.addEvent('domready', function(){
//do your tips stuff in here...
var zoomTip = new Tips($$('.hasTip'), {
className: 'mytooltipclass', //this is the prefix for the CSS class
offsets: {
'x': 20, //default is 16
'y': 30 //default is 16
},
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity',
{duration: 1000, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(0,.8);
},
onHide: function(toolTip) {
this.fx.start(.8,0);
}
});
});
But I only get a tooltip that looks like an html alt, and changing my css files with according class names does not work.
Using a tooltip extension is not the solution because I need the default registration and contact page of joomla to work. And they both use class="hasTip"and changing this would require me to do some hacking which I can not do for durability reasons.
Using firebug and chrome, it does not seems like there is a conflict between javascripts.
Any ideas?