Dashboards & Visualizations

tooltip without javascript in splunk panel title

splunkdivya
Explorer

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,

0 Karma
1 Solution

paramagurukarth
Builder

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
New Member

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

paramagurukarth
Builder

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
Explorer

No, it does not work in splunk

0 Karma

splunkdivya
Explorer

Indeed worked like wonder... Thanks

0 Karma

pgadhari
Builder

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

0 Karma

paramagurukarth
Builder

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

0 Karma

pgadhari
Builder

@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

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi @splunkdivya ,

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

0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...