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

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Why Splunk Customers Should Attend Cisco Live 2026 Las Vegas

What Is the Name of the USB Key Inserted by Bob Smith? (BOTS Hint, Not the Answer)

Automating Threat Operations and Threat Hunting with Recorded Future

Join the Conversation