Sunday 2 November 2014

Report Studio: Mouse over pop up with our own text box using java script

Cognos: Mouse over pop up with our own text box using java script

Some times we need a popup message box when we over the mouse on some image like below..









Take Html object into RS

paste the following code

<style>
.tooltip
{
  text-decoration:left;
  position:relative;
}


.tooltip span
{
  display:none;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:black;
  background:#f2f2f2;
}


.tooltip span img
{
  float:left;
  margin:0px 8px 8px 0;
}


.tooltip:hover span
{
  display:block;
  position:absolute; top:-40px;  left:5px;
   width:300px;
   height:75px;
  max-width:400px;
  min-height:75px;
  border:1px solid #888888;
  margin-top:12px;
  margin-left:32px;
  overflow:hidden;
  padding:8px;
}

</style>

<a class="tooltip" href="#" style="border:none">
  <img src="../samples/images/red.jpg" style="border:0px solid #cc3300;" />
   <span style="text-align=left">
       Insert definition here
</span>
</a>


you can put your own image in the above script 

1 comment: