[Feature Request] User Defined Tooltips

[LeeThompson]

This is certainly not a high priority but users may find this useful. It would be a css-style tooltip (unless it's easier to do it in js).

It would be an optional parameter for any object with a "name" field.

Example:

{
    "sections": [
        {
            "name": "Servers",
            "tiles": [
                {
                    "name": "Synology 1",
                    "url": "http://synology1:5000/",
                    "faIcon": "fa-solid fa-hard-drive",
                                        "tooltip": "Synology Unit 1 with Media Files"
                },
...              

Sample HTML Code: <div class=tooltip data-container=body><span class=tooltiptext>This is a tooltip.</span>This is what is displayed normally.</div>

Sample CSS:

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  min-width: 20vw;
  background-color: #404040;
  color: #E0E0E0;
  text-align: left;
  opacity: 0.9;
  padding: 0.2vw 0.2vw;
  font-family: Helvetica, sans-serif;
  font-size: 1.1vw;
  border-radius: 0.2vw;
  top: -2em;
  left: -1em;
  word-wrap: normal;
  padding-left: 0.2em;
  position: absolute;
  visibility: hidden;
  z-index: 99;
}

.tooltip .tooltiptext::after {
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

[erohtar]

That definitely could be useful for people with a lot of services running and who still want to keep the dashboard looking clean. I first looked here since Dasherr is built on Bootstrap framework, but it turns out it's an optional add-on, so your posted code should definitely have a much lesser overhead - thank you for posting that, makes my job easier :)

[LeeThompson]

You should know I got the base code form somewhere on the web (some CSS tooltip thing) although I did make some changes to it, it's not completely mine. (I don't remember any license stuff on the site though.)

I also modified it for github since for my own usage I have a section that sets up all the options as CSS variables so there may be some typo issues.

Stuff like:

  background-color: var(--tooltipbackgroundcolor);
  color: var(--tooltiptextcolor);
  text-align: var(--tooltiptextalign);

EDIT:

I found the sites I referenced:

https://www.w3schools.com/css/css_tooltip.asp http://www.menucool.com/tooltip/css-tooltip

The second one I didn't use but it gave me some ideas.

[erohtar]

It's just a bit of CSS & HTML, hardly a standalone function, let alone a library or application - I wouldn't worry too much about licensing for it. And no one here is profiting from it anyway. And I looked at both the demos - w3schools is nice and clean, menucool is pretty fancy - both are good though. I think I'll go with w3schools and put that in the next update. Thank you!

[LeeThompson]

I liked the clean simplicity myself.

[erohtar]

I had a little spare time today and thought I'd quickly add this feature, figuring I'll just have to use the code you gave - I updated custom.css in file, and updated the webpage code in-browser (just in developer view for testing), since the actual update would be dynamically creating these elements via javascript - but turns out it didn't show the tooltip or the innerText of span, for whatever reason. At the moment I didn't have the time to troubleshoot it so I left it for later, but in case you're able to get it to work, pls feel free to lend me a hand by sending a working html page - else I promise I'll get to it soon-ish anyway

[LeeThompson]

@erohtar I'll take a look.

I did some really really crude testing, basically putting the tooltip in the name field in settings and it does not work. I think there's some conflicting css as there is a class="tile btn overflow-hidden" which (I think) is part of bootstrap.

I'm not familiar with bootstrap but maybe using the bootstrap tooltip will be necessary.

[erohtar]

Yeah I think you may be on to something there. But I haven't given up yet - I'll soon give it a proper shot before using the BS-approved method (which I have a feeling might come with a slightly bigger overhead on page loading time).

[erohtar]

Thoughts?

[LeeThompson]

I think that works. Maybe a little bit of transparency? (Better yet if that can be configured but ok if not)

[erohtar]

Added in v1.02.00 I coded it such that tooltips function doesn't get enabled unless there's at least one info tooltip actually created by user

Pls feel free to try it out and close the thread