All Apps and Add-ons

Adding tooltip to image on hover, inside the panel ?

pgadhari
Builder

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 :

alt text

0 Karma
1 Solution

thomasroulet
Path Finder

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>

View solution in original post

0 Karma

thomasroulet
Path Finder

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>
0 Karma

pgadhari
Builder

alt text

0 Karma

pgadhari
Builder

alt text

0 Karma

thomasroulet
Path Finder

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

0 Karma

thomasroulet
Path Finder

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; 
    }
0 Karma

pgadhari
Builder

@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;
}
0 Karma

pgadhari
Builder

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

0 Karma

pgadhari
Builder

@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;
}
0 Karma

pgadhari
Builder

alt text

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

0 Karma

pgadhari
Builder

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.

0 Karma

pgadhari
Builder

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;
}
}
0 Karma

pgadhari
Builder

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

0 Karma

niketn
Legend

@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

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

pgadhari
Builder

@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.

0 Karma

niketn
Legend

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

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

pgadhari
Builder

@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>
0 Karma

pgadhari
Builder

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." ???

0 Karma
Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...