Tooltip integrated in core source

[GitHubLionel]

Hi,

I often use tooltip and always modifier plug-in is not practice. Since time ago, I inserted code in core to have tooltip like a property. I have updated with the latest core source. Code modified is bracketed with comment : /* tooltip begin / and / tooltip end */ So you can customize your tooltip just with css. Result is like this sample :

Regards, Lionel Source and demo :

Tooltip.zip

[leeoniya]

i am quite surprised by how cheap this part is:

// Simple test to stay in the window over
if (left + tooltipEl.clientWidth > over.clientWidth) left -= tooltipEl.clientWidth;
if (top + tooltipEl.clientHeight > over.clientHeight) top -= tooltipEl.clientHeight; 

i have been thinking about an integrated tooltip, but do not like all the code duplication. i think almost everything required by a tooltip except for mouse tracking and overflow testing is already done by a live legend. somehow reusing most of the legend init and update code will be needed.

for now, it may be easier for you to just create a custom static legend and re-use the uPlot's legend as a tooltip. see legendAsTooltipPlugin in https://leeoniya.github.io/uPlot/demos/candlestick-ohlc.html

[GitHubLionel]

Hi,

Indeed, I didn't invent anything and I have just re-used a mix of legend code and candlestick demo code. My goal is to keep both tooltip and legend because in some graph it is useful to have both (for example to hide a graph by click on legend and continue to see value in tooltip) and the ability to switch from one to the other. I keep the legend construction but I always can modify the appearance with css ;) It was just a suggestion, for me it is easy to merge my code in new core release, so no problem :) Note : I am not very fan of plug-in. Plug-in is very useful for sharp purpose but here, tooltip is a very common object. All plot library have tooltip integrated. We don't need sophisticated tooltip (for that, plug-in is the solution) and I am like you : I want light and fast code.

Best regards, Lionel

[leeoniya]

for example to hide a graph by click on legend and continue to see value in tooltip

the problem is that there are potentially lots of custom requirements like this, though the common ones are:

• custom sorting
• custom filtering
• custom highlighting (not just closest, maybe max, min, etc)

We don't need sophisticated tooltip (for that, plug-in is the solution) and I am like you : I want light and fast code.

if the tooltip is not sophisticated enough, it will be dead code, because people will just make custom plugins.

i agree with you that maybe we should add an integrated tooltip but it must reuse the existing legend code, not simply copy/paste it. this will require more work and some refactoring. if you would like to work on something like this, you will have to do it with Git/Github since it is extremely difficult reviewing/accepting patches applied to the final build files via attachments.

[GitHubLionel]

I will see what I can do. But it's easier for me to work on final build because I can see all the interactions between parts. Working on separate sources need a deeper comprehension of the library. And I am not a specialist of JS ! lol

[GitHubLionel]

Hi

Ok, I make a try to factorize the code for legend and tooltip. Here is the result. I do the change on final build (what tool do you use to make it ?). The code is not clean and we can optimize lot of things if you are interested by this project. I keep old code in comment and I bracketed new code with /* NEW BEGIN / and / NEW END*/ Specific code for tooltip is bracketed with /* tooltip begin / and / tooltip end*/ I introduced legendClass and tooltipClass object. We can use these objects in all the code but I do not for the moment. I have tested with the demos and seems to work as before (note that I found several variables that are maybe not correctly initialised depending on live/show combinations). Best regards, Lionel uplot.zip

[tve]

I'd like to add my vote that "something should be done about the tooltip" :-)

I'm currently trying to combine the "Timeline / Discrete" demo, and in particular the 4th chart which removes duplicated values, and the "Tooltips" demo. It works, except for the removed duplicate values... I see that updateCursor has a bunch of magic around activeIdxs that the tooltip demo doesn't have... I'm off trying the legendAsTooltipPlugin thing now, but:

• it feels really hacky to go in and change all CSS attributes of the u-legend element
• legend and tooltip shouldn't be mutually exclusive
• I need to insert the tooltip somewhere else in the DOM so it doesn't get cropped by u-over (unless I'm missing some CSS trick)

Maybe an option is for the tooltip to fetch values from legend.values instead of calculating them from isx as done in the tooltip demo. Or perhaps this notion of activeIdxs needs to be exposed somehow. I didn't even know this was a thing...

Edit: I have legend.live=false and that causes legend.values not to be set, but legend.idxs is set and works too.

[GitHubLionel]

Hi,

I found a bug in the correction I made to have tooltip. Now, it work with "Timeline / Discrete" demo. Just add the css :

.u-tooltip {
    font-size: 14px;
    text-align: left;
    pointer-events: none;
    position: absolute;
    display: none;
    left: 5px;
    top: 5px;
    box-shadow:  2px 2px 10px rgba(0,0,0,0.5);
    border: 1px solid rgb(54, 136, 255);
    border-radius: 10px 0px;  
    background:rgba(255, 249, 196, 0.92);
    color: black;
    z-index: 500;  
}

.u-tooltip th > * {
	vertical-align: middle;
	display: inline-block;
}

.u-tooltip .u-marker {
	width: 1em;
	height: 1em;
	margin-right: 4px;
	border: 2px solid transparent;
}

.u-tooltip .u-series > * {
  padding: 0px;
}

.u-tooltip .u-off > * {
	opacity: 0.3;
}

/* tooltip end */  

and 
tooltip : {
                  show: true
                },
in the opt of the demo.

[GitHubLionel]

The file : uplot_tooltip.zip

[GitHubLionel]

Hi I updated with the source 1.6.25. I bracketed new code with /* NEW BEGIN / and / NEW END*/ Specific code for tooltip is bracketed with /* tooltip begin / and / tooltip end*/ See sample tooltip.html

uplot_tooltip.zip