What’s the recommended way to add tooltips in panels?
Using the Aurora-theme, it seems I can’t get auto-initalization using ‘tooltip-init’ to work in side-panels.
What I can do is,
var iconTooltip = app.tooltip.create({
targetEl: '.icon-tooltip',
text: 'Tooltip textadsfafasd',
on: {
show: function (el) {
console.log('Tooltip became visible for', el);
}
}
});
…but e.g. the ‘on’ event doesn’t do anything (so ‘Tooltip became visible for’… is never called) and I don’t understand how to use the data-tooltip
text
Maybe I get it totally wrong, but shouldn’t:
<div class="tooltip-init" data-tooltip="Hello it's me">
initalize a tooltip with the text in the attribute?
- Is there a way to add tooltips to dynamically added items, e.g. as in:
<f7-list-item tooltip-init v-for="(itm, idx) in mainview.reverseLayers" :key="idx" :data-tooltip="itm.name">
In order for all auto-init stuff to work in F7 it should be placed in Page which is in the intialized View. So if you use Vue.js, your panel structure should be like
f7-panel > f7-view > f7-page -> ... required content
In this case it will intialized page which lead to init all auto-init stuff.
Some Vue components, like f7-link
, f7-button
already have Tooltip creation inside. And they should be just used like: <f7-link tooltip="some text">...</f7-link>
.
If this item is present on the moment of page init (e.g. not added to DOM later via Ajax or some other logic), it can be done with:
<f7-list-item class="tooltip-init" v-for="(itm, idx) in mainview.reverseLayers" :key="idx" :data-tooltip="itm.name">
But i will better add same tooltip support for f7-list-item component in next update
So I added a class ‘.icon-tooltip’ to all elements where I want to show a tooltip.
Maybe I just don’t understand the logic behind the tooltip-class, but HOW do I manage to add the data-tooltip
attribute to the tooltip? In kitchen-sink all tooltips share the same text, which is not really what I want…
This is more or less from the docs, but doesn’t work for me (‘show’ is never called).
Btw:
var iconTooltip = app.tooltip.create({
targetEl: '.icon-tooltip',
text: 'Tooltip text',
on: {
show: function (el) {
console.log('Tooltip became visible for', el);
}
}
});
If I do
iconTooltip.on('show', function(el) {
...
}
it works, but the passed el
is always the tooltip itself (I’d expect here the target-element - but maybe I’m seeing that wrong).
Btw the F7 tooltip object contains all found target-elements:
$targetEl: {
0: <span class="icon-tooltip">,
1: <span class="kc_icons save icon-tooltip">,
2: <span class="kc_icons trash icon-tooltip">
...
}
but since I don’t know which element was hovered, they are pretty useless for me
You need to create each tooltip separately:
$('.icon-tooltip').each(function(index, targetEl){
app.tooltip.create({
targetEl: targetEl,
text: 'Tooltip text',
on: {
show: function (tooltip) {
console.log('Tooltip became visible for', tooltip.$targetEl);
}
}
});
});
That’s what I do, but I thought it would be much cooler, if you can do something like this:
var iconTooltip = app.tooltip.create({
targetEl: '.icon-tooltip',
on: {
show: function (el) {
this.setText(el.dataset.tooltip);
}
}
});
…this would also allow for dynamic tooltips.
…and the show
event doesn’t fire for me
You are right, there is an issue in core that i fixed. For now, you can just use it as:
$('.icon-tooltip').each(function(index, targetEl){
const t = app.tooltip.create({
targetEl: targetEl,
text: 'Tooltip text',
});
t.on('show', () => {
console.log('Tooltip became visible for', t.$targetEl);
});
});
Jep - and I can also add dynamic text like that:
this.$$('.kc-tooltip').each(function(idx, targetEl){
if (!targetEl.tooltip) {
const newTooltip = app.tooltip.create({
targetEl: targetEl,
cssClass: 'kc_tooltip',
text: txt
});
targetEl.tooltip = newTooltip; //save the tooltip instance, so I can switch it on/off individually
newTooltip.on('show',function (tooltip) {
this.setText(new Date().toLocaleTimeString()); //or whatever
});
}
});
Notice, that I also attach the tooltip to the element, so I can individually switch on/off any tooltip and I can add more tooltips dynamically (e.g. if list-elements or whatever are added to the page)
1 Like