topic Re: tooltip without javascript in splunk panel title in Dashboards & Visualizations

tooltip without javascript in splunk panel title

splunkdivya — Tue, 09 Jan 2018 07:12:53 GMT

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,

Re: tooltip without javascript in splunk panel title

kamlesh_vaghela — Tue, 09 Jan 2018 10:27:27 GMT

Hi @splunkdivya ,

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

Re: tooltip without javascript in splunk panel title

paramagurukarth — Tue, 16 Jan 2018 10:38:17 GMT

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>

Re: tooltip without javascript in splunk panel title

splunkdivya — Wed, 17 Jan 2018 07:05:57 GMT

No, it does not work in splunk

Re: tooltip without javascript in splunk panel title

paramagurukarth — Thu, 18 Jan 2018 12:23:32 GMT

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

Re: tooltip without javascript in splunk panel title

splunkdivya — Thu, 18 Jan 2018 13:49:11 GMT

Indeed worked like wonder... Thanks

Re: tooltip without javascript in splunk panel title

jossplacencia — Fri, 12 Apr 2019 20:44:57 GMT

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>

Re: tooltip without javascript in splunk panel title

pgadhari — Sun, 08 Sep 2019 08:39:56 GMT

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

Re: tooltip without javascript in splunk panel title

pgadhari — Mon, 09 Sep 2019 08:17:32 GMT

@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