Adding tooltip to image on hover, inside the panel ?

[pgadhari]

I am using Number Display viz app https://splunkbase.splunk.com/app/4537/#/details, from Splunk base and inserted the image inside the panel. I want to show tooltip, when someone hovers on that image. The image is placed inside the body of the panel. Please let me know how can I do that. I am attaching the panel image for the reference. If anyone hovers on the box image, it should display the tooltip with some comments.

This is quite urgent, please help :

[thomasroulet · Accepted solution]

Hello,
could you try the code below ? i change some css.

<panel id="panel1">
      <viz id="comments" type="number_display_viz.number_display_viz">
        <search>
          <done>
            <condition>
              <set token="boxcomment">$result.count$</set>
            </condition>
          </done>
          <query>index=_* | stats count by index</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="height">206</option>
        <option name="number_display_viz.number_display_viz.bordercolor">#FFFFFF</option>
        <option name="number_display_viz.number_display_viz.bordersize">2</option>
        <option name="number_display_viz.number_display_viz.colorprimary">#000000</option>
        <option name="number_display_viz.number_display_viz.colorprimarymode">auto</option>
        <option name="number_display_viz.number_display_viz.colorsecondary">#000000</option>
        <option name="number_display_viz.number_display_viz.colorsecondarymode">darker1</option>
        <option name="number_display_viz.number_display_viz.max">100</option>
        <option name="number_display_viz.number_display_viz.min">0</option>
        <option name="number_display_viz.number_display_viz.nodatacolor">#0178c7</option>
        <option name="number_display_viz.number_display_viz.padding">10</option>
        <option name="number_display_viz.number_display_viz.pulserate">4</option>
        <option name="number_display_viz.number_display_viz.shadowcolor">#F2F4F5</option>
        <option name="number_display_viz.number_display_viz.shapebordercolor">#FFFFFF</option>
        <option name="number_display_viz.number_display_viz.shapebordercolormode">static</option>
        <option name="number_display_viz.number_display_viz.shapebordersize">1</option>
        <option name="number_display_viz.number_display_viz.shapedropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.shapeshadow">yes</option>
        <option name="number_display_viz.number_display_viz.shapetexture">solid</option>
        <option name="number_display_viz.number_display_viz.sparkHeight">30</option>
        <option name="number_display_viz.number_display_viz.sparkWidth">90</option>
        <option name="number_display_viz.number_display_viz.sparkalign">5</option>
        <option name="number_display_viz.number_display_viz.sparkalignv">70</option>
        <option name="number_display_viz.number_display_viz.sparkcolorfill">#009DD9</option>
        <option name="number_display_viz.number_display_viz.sparkcolorline">#0178c7</option>
        <option name="number_display_viz.number_display_viz.sparkcolormodefill">auto</option>
        <option name="number_display_viz.number_display_viz.sparkcolormodeline">auto</option>
        <option name="number_display_viz.number_display_viz.sparkmin">0</option>
        <option name="number_display_viz.number_display_viz.sparknulls">gaps</option>
        <option name="number_display_viz.number_display_viz.sparkorder">bg</option>
        <option name="number_display_viz.number_display_viz.sparkstyle">area</option>
        <option name="number_display_viz.number_display_viz.spinnerspeedmax">20</option>
        <option name="number_display_viz.number_display_viz.spinnerspeedmin">1</option>
        <option name="number_display_viz.number_display_viz.style">nil</option>
        <option name="number_display_viz.number_display_viz.subtitlealign">center</option>
        <option name="number_display_viz.number_display_viz.subtitlealignv">80</option>
        <option name="number_display_viz.number_display_viz.subtitlecolor">#919191</option>
        <option name="number_display_viz.number_display_viz.subtitlecolormode">static</option>
        <option name="number_display_viz.number_display_viz.subtitledrop">no</option>
        <option name="number_display_viz.number_display_viz.subtitledropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.subtitlefont">number_display_viz-font4</option>
        <option name="number_display_viz.number_display_viz.subtitlesize">30</option>
        <option name="number_display_viz.number_display_viz.subtitletext">10 points per day</option>
        <option name="number_display_viz.number_display_viz.textalign">center</option>
        <option name="number_display_viz.number_display_viz.textalignv">9</option>
        <option name="number_display_viz.number_display_viz.textcolor">#000000</option>
        <option name="number_display_viz.number_display_viz.textdrop">yes</option>
        <option name="number_display_viz.number_display_viz.textdropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.textduration">300</option>
        <option name="number_display_viz.number_display_viz.textfont">number_display_viz-font1</option>
        <option name="number_display_viz.number_display_viz.textmode">static</option>
        <option name="number_display_viz.number_display_viz.textprecision">1</option>
        <option name="number_display_viz.number_display_viz.textsize">100</option>
        <option name="number_display_viz.number_display_viz.textunitposition">after</option>
        <option name="number_display_viz.number_display_viz.textunitsize">30</option>
        <option name="number_display_viz.number_display_viz.thickness">50</option>
        <option name="number_display_viz.number_display_viz.thresholdcol1">#ebb839</option>
        <option name="number_display_viz.number_display_viz.thresholdcol2">#d16f18</option>
        <option name="number_display_viz.number_display_viz.thresholdcol3">#b22b32</option>
        <option name="number_display_viz.number_display_viz.thresholdcol4">#ffffff</option>
        <option name="number_display_viz.number_display_viz.thresholdcol5">#ffffff</option>
        <option name="number_display_viz.number_display_viz.thresholdcol6">#ffffff</option>
        <option name="number_display_viz.number_display_viz.thresholdsize">20</option>
        <option name="number_display_viz.number_display_viz.thresholdval2">70</option>
        <option name="number_display_viz.number_display_viz.thresholdval3">90</option>
        <option name="number_display_viz.number_display_viz.titlealign">center</option>
        <option name="number_display_viz.number_display_viz.titlealignv">70</option>
        <option name="number_display_viz.number_display_viz.titlecolor">#2c2d65</option>
        <option name="number_display_viz.number_display_viz.titlecolormode">static</option>
        <option name="number_display_viz.number_display_viz.titledrop">yes</option>
        <option name="number_display_viz.number_display_viz.titledropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.titlesize">30</option>
        <option name="number_display_viz.number_display_viz.titletext">Box Comments</option>
        <option name="refresh.display">none</option>
      </viz>
    </panel>
    <panel>
      <html>
   <style>
     #comments .number_display_viz-wrap_main {
      display:center;
      background: url("/static/app/splunk_app/boxComments_1.png");
      background-repeat: no-repeat;
      margin-top:35px; 
      margin-left:21%;
    }
    #comments .number_display_viz-wrap_main:hover:after{
      display:block;
      background-color: #333;
        border-radius: 3px;
        font-size: 11px;
        color: #eee;
        z-index: 3;
        padding:5px;
        margin-right:5px;
        animation: moveup 0.3s linear;
    }

    #comments .number_display_viz-wrap_item:nth-child(1) .number_display_viz-wrap_main:hover:after {
      content:"Content tooltip 1";
    }
    #comments .number_display_viz-wrap_item:nth-child(2) .number_display_viz-wrap_main:hover:after {
      content:"Content tooltip 2";
    }
    #comments .number_display_viz-wrap_item:nth-child(3) .number_display_viz-wrap_main:hover:after {
      content:"Content tooltip 3";
    }
    #comments .number_display_viz-wrap_item:nth-child(4) .number_display_viz-wrap_main:hover:after {
      content:"Content tooltip 4";
    }
@keyframes moveup {
    0% {
        //for rotating effect rotate is set 25deg at beggining
        transform: translateY(10px) rotate(25deg);
        opacity: 0;
    }

    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
}
   </style>
 </html>
    </panel>

[pgadhari]

[pgadhari]

[thomasroulet]

with which browser do you get this result? and which version?

[thomasroulet]

i think the css below is part of the problem, especially the margin-left.
Is the margin-left really necessary?

#comments .number_display_viz-wrap_main {
       display:center;
       background: url("/static/app/splunk_app/boxComments_1.png");
       background-repeat: no-repeat;
       margin-top:35px; 
       margin-left:21%;
}

you could try with this :

    #comments .number_display_viz-wrap_main {
           background-position:center 0px;
           background: url("/static/app/splunk_app/boxComments_1.png");
           background-repeat: no-repeat;
           margin-top:35px; 
    }

[pgadhari]

@thomasroulet - I was able to fix the alignment and border-radius issue by adding width property.
I have set width to 125 px and the tooltip is displaying properly. Thanks for properly guiding me on my CSS issues. Really Appreciate it. I will attach an updated and working image.

Below is my working and updated CSS :

#comments .number_display_viz-wrap_main:hover:after {
         display:block;
         background-color: #263079;
         border-radius: 6px;
         font-size: 12px;
         color: yellow;
         z-index: 3;
         padding:3px;
         margin-top:40%;
         width: 125px;
}

#comments .number_display_viz-wrap_item:nth-child(1) .number_display_viz-wrap_main:hover:after {
        content:'10 Points per Day \a Max 30 Points per Day';
        white-space: pre;
        text-align: center;
}

[pgadhari]

Ya sure. I will try it and keep you posted. Thanks.

[pgadhari]

@thomasroulet - Great !!!. Your CSS changes are working. But I am getting some minor issues, listed below. I tried putting the CSS for that, but not working. Attaching the image for your reference.

1. Border-radius is not getting applied to top-right and bottom-right of the block. (tried overflow=hidden, but not working)
2. Also, the margin of left is more as compared to margin on right, after making made the content-text to center.

Below is the updated CSS :

#comments .number_display_viz-wrap_main:hover:after {
         display:block;
         background-color: #263079;
         border-radius: 6px;
         overflow: hidden;
         font-size: 12px;
         color: yellow;
         z-index: 3;
         padding:3px;
         margin-right:12px;
         margin-top:55px;
         //animation: moveup 0.3s linear;
}

[pgadhari]

The tooltip is visible on the image, but hover is not working. Attached is the image.

[pgadhari]

Just an update :

I have written the CSS for the hover on image inside the panel, but somehow the hover is not working. I added a span for the tooltip in the panel for the VIZ option. But hover is not working. Below is the code from my splunk panel and the CSS. Please help to resolve this :

Splunk Panel code :

<style>
           #comments .number_display_viz-wrap_main {
             display:center;
              background: url("/static/app/splunk_app/boxComments_1.png");
              background-repeat: no-repeat;
              margin-top:35px; 
              margin-left:21%;
              }
</style>

<panel id="panel1">
        <html>
          <span class="tooltip1">Testing tooltips</span>
        </html>
        <viz id="comments" type="number_display_viz.number_display_viz" >
        <search>
          <query>my search query.....</query>
          <earliest>1567281600</earliest>
          <latest>now</latest>
          <refresh>5m</refresh>
          <refreshType>delay</refreshType>
          <done>
            <condition>
              <set token="boxcomment">$result.count$</set>
            </condition>
          </done>
        </search>
        <option name="drilldown">none</option>
        <option name="height">206</option>
        <option name="number_display_viz.number_display_viz.bordercolor">#FFFFFF</option>
        <option name="number_display_viz.number_display_viz.bordersize">2</option>
        <option name="number_display_viz.number_display_viz.colorprimary">#000000</option>
        <option name="number_display_viz.number_display_viz.colorprimarymode">auto</option>
        <option name="number_display_viz.number_display_viz.colorsecondary">#000000</option>
        <option name="number_display_viz.number_display_viz.colorsecondarymode">darker1</option>
        <option name="number_display_viz.number_display_viz.max">100</option>
        <option name="number_display_viz.number_display_viz.min">0</option>
        <option name="number_display_viz.number_display_viz.nodatacolor">#0178c7</option>
        <option name="number_display_viz.number_display_viz.padding">10</option>
        <option name="number_display_viz.number_display_viz.pulserate">4</option>
        <option name="number_display_viz.number_display_viz.shadowcolor">#F2F4F5</option>
        <option name="number_display_viz.number_display_viz.shapebordercolor">#FFFFFF</option>
        <option name="number_display_viz.number_display_viz.shapebordercolormode">static</option>
        <option name="number_display_viz.number_display_viz.shapebordersize">1</option>
        <option name="number_display_viz.number_display_viz.shapedropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.shapeshadow">yes</option>
        <option name="number_display_viz.number_display_viz.shapetexture">solid</option>
        <option name="number_display_viz.number_display_viz.sparkHeight">30</option>
        <option name="number_display_viz.number_display_viz.sparkWidth">90</option>
        <option name="number_display_viz.number_display_viz.sparkalign">5</option>
        <option name="number_display_viz.number_display_viz.sparkalignv">70</option>
        <option name="number_display_viz.number_display_viz.sparkcolorfill">#009DD9</option>
        <option name="number_display_viz.number_display_viz.sparkcolorline">#0178c7</option>
        <option name="number_display_viz.number_display_viz.sparkcolormodefill">auto</option>
        <option name="number_display_viz.number_display_viz.sparkcolormodeline">auto</option>
        <option name="number_display_viz.number_display_viz.sparkmin">0</option>
        <option name="number_display_viz.number_display_viz.sparknulls">gaps</option>
        <option name="number_display_viz.number_display_viz.sparkorder">bg</option>
        <option name="number_display_viz.number_display_viz.sparkstyle">area</option>
        <option name="number_display_viz.number_display_viz.spinnerspeedmax">20</option>
        <option name="number_display_viz.number_display_viz.spinnerspeedmin">1</option>
        <option name="number_display_viz.number_display_viz.style">nil</option>
        <option name="number_display_viz.number_display_viz.subtitlealign">center</option>
        <option name="number_display_viz.number_display_viz.subtitlealignv">80</option>
        <option name="number_display_viz.number_display_viz.subtitlecolor">#919191</option>
        <option name="number_display_viz.number_display_viz.subtitlecolormode">static</option>
        <option name="number_display_viz.number_display_viz.subtitledrop">no</option>
        <option name="number_display_viz.number_display_viz.subtitledropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.subtitlefont">number_display_viz-font4</option>
        <option name="number_display_viz.number_display_viz.subtitlesize">30</option>
        <option name="number_display_viz.number_display_viz.subtitletext">10 points per day</option>
        <option name="number_display_viz.number_display_viz.textalign">center</option>
        <option name="number_display_viz.number_display_viz.textalignv">9</option>
        <option name="number_display_viz.number_display_viz.textcolor">#000000</option>
        <option name="number_display_viz.number_display_viz.textdrop">yes</option>
        <option name="number_display_viz.number_display_viz.textdropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.textduration">300</option>
        <option name="number_display_viz.number_display_viz.textfont">number_display_viz-font1</option>
        <option name="number_display_viz.number_display_viz.textmode">static</option>
        <option name="number_display_viz.number_display_viz.textprecision">1</option>
        <option name="number_display_viz.number_display_viz.textsize">100</option>
        <option name="number_display_viz.number_display_viz.textunitposition">after</option>
        <option name="number_display_viz.number_display_viz.textunitsize">30</option>
        <option name="number_display_viz.number_display_viz.thickness">50</option>
        <option name="number_display_viz.number_display_viz.thresholdcol1">#ebb839</option>
        <option name="number_display_viz.number_display_viz.thresholdcol2">#d16f18</option>
        <option name="number_display_viz.number_display_viz.thresholdcol3">#b22b32</option>
        <option name="number_display_viz.number_display_viz.thresholdcol4">#ffffff</option>
        <option name="number_display_viz.number_display_viz.thresholdcol5">#ffffff</option>
        <option name="number_display_viz.number_display_viz.thresholdcol6">#ffffff</option>
        <option name="number_display_viz.number_display_viz.thresholdsize">20</option>
        <option name="number_display_viz.number_display_viz.thresholdval2">70</option>
        <option name="number_display_viz.number_display_viz.thresholdval3">90</option>
        <option name="number_display_viz.number_display_viz.titlealign">center</option>
        <option name="number_display_viz.number_display_viz.titlealignv">70</option>
        <option name="number_display_viz.number_display_viz.titlecolor">#2c2d65</option>
        <option name="number_display_viz.number_display_viz.titlecolormode">static</option>
        <option name="number_display_viz.number_display_viz.titledrop">yes</option>
        <option name="number_display_viz.number_display_viz.titledropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.titlesize">30</option>
        <option name="number_display_viz.number_display_viz.titletext">Box Comments</option>
        <option name="refresh.display">none</option>
      </viz>
</panel>

My CSS code :

.tooltip1{
        position: absolute;
        //opacity: 1;
        background-color: #333;
        border-radius: 3px;
        font-size: 11px;
        color: #eee;
        margin-top: 61%;
        z-index: 3;
        margin-left: 50%;
}

.tooltip1::after {
        position: absolute;
        content: "";
        top: 100%; //to set the triangle at end
        left: 10%; // left side moved 10% so it looks like tooltip1
        // this border property makes the triangle
        border-top: 5px solid #333;
        border-right: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid transparent;
}

#comments .number_display_viz-wrap_main : hover

.tooltip1 {
display: block;
}

.tooltip1 {
animation: moveup 0.1s linear;
}
@keyframes moveup {
  0% {
//for rotating effect rotate is set 25deg at beggining
transform: translateY(10px) rotate(25deg);
opacity: 0;
}
100% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
}

To make the hover work, I am adding property display: none in tooltip1 class, but that is not working. Please help resolve the issue.

[pgadhari]

Adding the CSS code again, as the previous one did not get posted properly.

.tooltip1{
        position: absolute;
        //opacity: 1;
        background-color: #333;
        border-radius: 3px;
        font-size: 11px;
        color: #eee;
        margin-top: 61%;
        z-index: 3;
        margin-left: 50%;
}

.tooltip1::after {
        position: absolute;
        content: "";
        top: 100%; //to set the triangle at end
        left: 10%; // left side moved 10% so it looks like tooltip1
        // this border property makes the triangle
        border-top: 5px solid #333;
        border-right: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid transparent;
}

#comments .number_display_viz-wrap_main : hover > .tooltip1 {
        display: block;
}

.tooltip1 {
animation: moveup 0.1s linear;
}
@keyframes moveup {
  0% {
//for rotating effect rotate is set 25deg at beggining
transform: translateY(10px) rotate(25deg);
opacity: 0;
}
100% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
}

[pgadhari]

@niketnilay - can you help resolve the above css issue ? Thanks.

[niketn]

@pgadhari sorry I wont be able to look at this until the weekend. However, if you just need to display an icon, any reason why you did not use Status Indicator Custom visualization and went for Number Display viz?

Meanwhile, here are some of the link to my older answers with Tooltip based on different visualizations. See if any of them fits the needs:

https://answers.splunk.com/answers/661481/is-it-possible-that-a-dashboard-with-single-value.html
https://answers.splunk.com/answers/586554/is-it-possible-to-do-mouseover-hint-on-a-radio-gau.html
https://answers.splunk.com/answers/236389/adding-tooltip-to-panel-on-a-hover.html

[pgadhari]

@niketnilay - Did you get time to have a look at my issue ? Also, I have tried doing the changes from the links you have provided, but that is not working for me. Appreciate your help on this.

[niketn]

@pgadhari sorry I did not. Paging @chrisyoungerjds who has built the app... in case this is specific to the app!

[pgadhari]

@niketnilay - Actually, it is an image within the panel body and a number has to be displayed on top of that image. In Status indicator viz, I was getting some margin issues which are not getting displayed properly, and Number Display Viz sufficed my requirements, hence used it.

I will go through the links, you have given. But, I would appreciate if you have have a look at it once you are free, I have time until next early week to fix it. I think there is some minor issue in CSS, which I am not able to fix. Also, per my understanding. the issue is - somehow the option is not able to understand the elements and not applying the CSS on hover. Appreciate your help on this ?

<panel id="panel1">
         <html>
           <span class="tooltip1">Testing tooltips</span>
         </html>
         <viz id="comments" type="number_display_viz.number_display_viz" >
         <search>
           <query>my search query.....</query>
           .......................
</panel>

[pgadhari]

correcting my statement in above comment - "somehow the VIZ option is not able to understand the html span elements and also the id and type class of viz is not able to understand the CSS on hover." ???