- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Re: tooltip without javascript in splunk panel tit...
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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,
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
No, it does not work in splunk
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Indeed worked like wonder... Thanks
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@splunkdivya - can you share the whole code along with, how you put the above code into each panel ?
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Sometimes customization is required... please see my updated answer with code sample
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@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
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi @splunkdivya ,
Can you please share your sample code? So we can do some workaround with your code.
Take Your Breath Away with Splunk Risk-Based Alerting (RBA)
SignalFlow: What? Why? How?
Federated Search for Amazon S3 | Key Use Cases to Streamline Compliance Workflows
