Solved: Re: tooltip without javascript in splunk panel tit...

splunkdivya · ‎01-08-2018

Hi, I have a requirement wherein I need to add a tooltip or mouse-hover capability to an image in the title. We have added an image to the title with url option in background option of the panel in css:
something like:

xyz.h2.panel{
background:right float url (////.png)
}

Now, I need to add a textual description when I hover on this title. I have 20 panels in my dashboard and need to add individual tooltip to all. Any help/pointer is appreciated.

P.S. I don't have access to put files in /app/static folder, I can only use inline capability of the splunk css, not used inline js anytime.

Best,

paramagurukarth · ‎01-16-2018

This may help you... Just simple styles

<html>
        <style>
          .custom-tooltip{
              display: inline;
              position: absolute;
          }
          .custom-tooltip:hover:after{
            background: #333 ;
            background: rgba(0,0,0,.8) ;
            border-radius: 5px ;
            bottom: 26px ;
            color: #fff ;
            content: attr(title) ;
            left: 20% ;
            padding: 5px 15px ;
            position: absolute ;
            z-index: 98;
            width: 220px;
        }
        .custom-tooltip:hover:before{
          border: solid;
          border-color: #333 transparent;
          border-width: 6px 6px 0 6px;
          bottom: 20px ;
          content: "" ;
          left: 50% ;
          position: absolute ;
          z-index: 99 ;
        }
        </style>
        <a title="This is some information for our tooltip." class="custom-tooltip">CSS3 Tooltip</a>
      </html>

View solution in original post

jossplacencia · ‎04-12-2019

This is the solution

  <html>
    <a data-toggle="tooltip" title="THIS IS A TOOLTIP ">
       <center>
        <img src="/static/app/APPNAME/IMAGENAME.png/"/> </center>
    </a>
</html>
</panel>

paramagurukarth · ‎01-16-2018

This may help you... Just simple styles

<html>
        <style>
          .custom-tooltip{
              display: inline;
              position: absolute;
          }
          .custom-tooltip:hover:after{
            background: #333 ;
            background: rgba(0,0,0,.8) ;
            border-radius: 5px ;
            bottom: 26px ;
            color: #fff ;
            content: attr(title) ;
            left: 20% ;
            padding: 5px 15px ;
            position: absolute ;
            z-index: 98;
            width: 220px;
        }
        .custom-tooltip:hover:before{
          border: solid;
          border-color: #333 transparent;
          border-width: 6px 6px 0 6px;
          bottom: 20px ;
          content: "" ;
          left: 50% ;
          position: absolute ;
          z-index: 99 ;
        }
        </style>
        <a title="This is some information for our tooltip." class="custom-tooltip">CSS3 Tooltip</a>
      </html>

splunkdivya · ‎01-16-2018

No, it does not work in splunk

splunkdivya · ‎01-18-2018

Indeed worked like wonder... Thanks

pgadhari · ‎09-08-2019

@splunkdivya - can you share the whole code along with, how you put the above code into each panel ?

paramagurukarth · ‎01-18-2018

Sometimes customization is required... please see my updated answer with code sample

pgadhari · ‎09-09-2019

@paramagurukarthikeyan - I am also trying to achieve the tooltip feature, but not in the title, I want to hover on the image within the panel and show the tooltip, can you please help here ?

I already opened the question for that, please check if you can help :

https://answers.splunk.com/answers/771549/adding-tooltip-to-image-on-hover-inside-the-panel.html

kamlesh_vaghela · ‎01-09-2018

Hi @splunkdivya ,

Can you please share your sample code? So we can do some workaround with your code.

tooltip without javascript in splunk panel title

Index This | I’m short for "configuration file.” What am I?

New Articles from Academic Learning Partners, Help Expand Lantern’s Use Case Library, ...

Your Guide to SPL2 at .conf24!