Tooltip styles do not take effect

[KBPratap]

I am using "vis-timeline": "^7.4.8" and trying to style the tooltip but that doesn't take effect. Even the examples from documentation seem to be broken - https://jsfiddle.net/17mt8a69/5/

Am I missing something? Was this supported on an older version?

[KBPratap]

Found the issue. Tooltip styling works fine till 7.4.3 and broken 7.4.4 onwards. downgraded to version 7.4.3 in my project.

[goCougs7]

Any idea when this will be resolved. Spent quite a bit of time thinking I was doing something wrong until I determined it was just broken

[Fanna1119]

Any idea when this will be resolved. Spent quite a bit of time thinking I was doing something wrong until I determined it was just broken

I am also trying to solve this.

will lowering the version break any features?

why doesn't all templates follow the same standard used for items and groups?

Since for me it is a lot easier just to render vue templates, than typing html and it is possible with the item and group templates. but it is not possible to do it with tooltips and loadingScreenTemplate because they don't return the html element that is required to render the element on.

I might end up just sending the hover event to the rendered element as a prop to my item template and render the tooltip from there. Which will make it reactive too since the tooltip doesn't show the item changes until the hover event is reinstated.

targeting the div.vis-tooltip in css and making everything !important is impractical and limited, but fine for some use cases.

[Fanna1119]

My solution with vue was to render my own tooltip inside the custom template (see #1300) but the issue was the item is being rendered inside a deeply nested div and the position: absolute of the item takes the parent relatively positioned div as reference. Which made resort to teleport the tooltip to the body instead.

My solution allows the tooltip to follow the cursor only when the mouse is inside the container. Still an issue where the tooltip does not follow whilst dragging so i will still need to figure out how to add an event listener to that and update accordingly.

<template>
    <div ref="container" class="bar-container">
        <span>{{ formatDate(item.start) }} - {{ formatDate(item.end) }} - {{ item.content }}</span>
        <button
            class="btn btn-xs bg-blue-gray-700 del-button"
            @click="emits('delete', item.id)"
        >delete</button>
    </div>

    <teleport to="body">
        <div
            v-if="isOutside == false"
            :style="computedTooltip"
            class="tippy"
        >{{ formatDate(item.start) }} - {{ formatDate(item.end) }} - {{ item.content }}</div>
    </teleport>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { useMouseInElement } from '@vueuse/core'
const container = ref(null);
const tooltip = ref(null);

const { x, y, isOutside, } = useMouseInElement(container)


const computedTooltip = computed(() => {
    return { left: x.value + 10 + "px", top: y.value + 10 + "px" }
})

const emits = defineEmits(['delete']);

const props = defineProps({
    item: {
        type: Object
    }
})


//convert date to string ex: 10 april 2020
const formatDate = (date) => {
    const d = new Date(date)
    const month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    return `${d.getDate()} ${month[d.getMonth()]} ${d.getFullYear()}`
}

</script>


<style>
.vis-item.blue {
    background: blue;
}

.del-button:hover {
    cursor: pointer;
}

.bar-container {
    @apply w-full;
}

.vis-item.vis-range .vis-item-content {
    width: 100% !important;
}

.tippy {
    position: absolute;
    width: 300px;
    border: none;
    background: #fff;
    box-shadow: 12px -7px 9px -5px rgba(0,0,0,0.28);
    padding: 0.6em;
    transition: 0.15s;
    border-radius: 5px;
}
</style>

Additonally to get the tooltip to update re-actively just pass the onMoving option item to your template then diff between the item and the onmoving item value.

[StefanWolf-tp]

Just had a similar problem. I add some html elements with classes as title for my timeline elements

<div>
     <span class='attributeName'>Start: </span>
     <span class='attributeValue'>12:00:14</span>
</div>
....

but all the classes are getting removed of the rendered tooltip.

Just downgraded the version of vis-timeline to 7.4.3 and it works..

[StefanWolf-tp]

have looked into it a little more and i think i found the reason --> xss.

Also the example used in the first post works with disabling xss. https://jsfiddle.net/uLtg3wa8/

However, it might be useful to have an option to disable xss only for the tooltip. Currently you would have to define a special filter / whitelist for that.

[KBPratap]

turns out that configuring xss.filterOptions.allowList allows for styling the tooltip.

I was able to get it working here https://jsfiddle.net/zac1r40b/1/

Reference: follow xss section from https://visjs.github.io/vis-timeline/docs/timeline/

I am now able to use "vis-timeline": "^7.7.2"