1

I want to retrieve item information when I hover the mouse over it. I tried the example of an earlier question but it doesn't work. It shows the title but not the content (Bootstrap popover over $(this) element)


    [...]
                    demoSource.push({
                                name: RFInum,
                        desc: deadline,
                                values: [{
                                    from: start,
                                    to: end,
                                    label: tit,
                                    customClass: balk_kleur,
                        dataObj: stat
                }],

        var popoverContent;
                        $(".gantt").gantt({
                            source: demoSource,
                            navigate: "scroll",
                            scale: "days",
                            maxScale: "months",
                            minScale: "hours",
                            itemsPerPage: 20,
                            scrollToToday: false,
                            useCookie: true,
                            onItemClick: function(data) {
                            },
                    onItemMouseover: function(elm, data) {
                                popoverContent = data.detailContent;
            alert(popoverContent);
                        },
                            onAddClick: function(dt, rowId) {
                                alert("Empty space clicked - add an item!");
                            },
                            onRender: function() {
                                if (window.console && typeof console.log === "function") {
                                    console.log("chart rendered");
                                }
                            }
                        });
            
                        $(".gantt").popover({
                            selector: ".bar",
                            title: function _getItemText() {
                                return this.textContent;
                            },
                            container: '.gantt',
                            content: function () {
                            return popoverContent;
                        },
                            trigger: "hover",
                            placement: "auto right"
                        });
    [...]
user14010662
  • 45
  • 6
  • I give you a suggestion: when you are clearly out of clues and you don't know what you are doing, it's better to slim down the code you are working on instead of pasting a whole mammuth having details not related to the issue you are dealing with. By the way you can use the `this` variable in any context and usually inside an event handler, that's the element triggering the event. Or try `event.target` or `event.currentTarget`. – Diego D Apr 06 '22 at 13:15
  • thanks for the advice. Concerning the `this` I thought that I could only retrieve the title and that is already done in the function `_getItemText()` – user14010662 Apr 06 '22 at 13:20
  • 1
    I wish I could help you further by knowing myself how the stuff you are using works. In case you'll be on your own, try to `console.log(this)` inside the event handler you are fighting with. Then at runtime, trigger the event and check in the console how the object `this` was done. If you can see there that `this` had the information you needed, just better complete your handler to extract those info. – Diego D Apr 06 '22 at 13:24
  • I tried to catch the `this` and it only returns the `
    ...
    INVICTUS GAMES 2022
    ` no other information.     – user14010662 Apr 07 '22 at 09:07
  • ok that's the element triggering the event. but since you said "I want to retrieve item information when I hover the mouse over it" and `this` is not the object containing the information you need, where are stored those information relative to element you are hovering? – Diego D Apr 07 '22 at 09:56
  • I changed the inital question and put in the variable demoSource which contains all information – user14010662 Apr 07 '22 at 10:06
  • I just see that demoSource it's an array of objects (with a given structure). Such objects have the property name and dataObj that seem the most interesting. The question is how are you expected to pick an element from that array in relation to the element you are hovering. You posted a glance of that object triggering the event and I can't find anything that could be considered a key to pick the corresponding item in that array. Maybe "INVICTUS GAME 2022" was the key? and you needed to pick the item in the array demoSource having as id == "INVICTUS GAME 2022"? – Diego D Apr 07 '22 at 10:12
  • I think it is impossible to get the connection between the array and the element I hover. Unless the previous question (i add in my question) would address it. – user14010662 Apr 07 '22 at 14:35

0 Answers0