Styling Discussion Tooltip bubble

vrijvlinder

I really like this plugin. I was trying to style the text bubble that appears when you hover over the Dttp image.

I did some research about how to go about it. I can use css to make it look like anything I want , the problem is my css code depends on some html to be there. For example, most tool tips act depending on the text or content to trigger the event. Usually the title text is wrapped in a span tag which is the part that I need to edit, the span background and text color of the tooltip bubble.

I formulated this css

  a.Dtooltip {outline:none;text-decoration:none;border-bottom:dotted 1px blue;}
    a.Dtooltip strong {line-height:30px;}
    a.Dtooltip > span 
    {
        width:200px;
        padding: 10px 20px;
        margin-top: 20px;
        margin-left: -85px;
        opacity: 0;
        visibility: hidden;
        z-index: 10;       
        position: absolute;

        font-family: Arial;
        font-size: 12px;
        font-style: normal;  
                
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        
        
        -webkit-box-shadow: 2px 2px 2px #999;
        -moz-box-shadow: 2px 2px 2px #999;      
        box-shadow: 2px 2px 2px #999;       
        
        -webkit-transition-property:opacity, margin-top, visibility, margin-left;
        -webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
        -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    
        -moz-transition-property:opacity, margin-top, visibility, margin-left;
        -moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
        -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    
        -o-transition-property:opacity, margin-top, visibility, margin-left;
        -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
        -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    
        transition-property:opacity, margin-top, visibility, margin-left;
        transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
        transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    }
    
    /*a.Dtooltip > span:hover,*/
    a.Dtooltip:hover > span
    {
        opacity: 1;
        text-decoration:none;
        visibility: visible;
        overflow: visible;
        margin-top:50px;
        display: inline;
        margin-left: -60px;     
    }

    a.Dtooltip span b {
    
        width: 15px;
        height: 15px;
        margin-left: 20px;
        margin-top: -19px;
            
        display: block;
        position: absolute;

        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
            
        -webkit-box-shadow: inset -1px 1px 0 #fff;
        -moz-box-shadow: inset 0 1px 0 #fff;
        -o-box-shadow: inset 0 1px 0 #fff;
        box-shadow: inset 0 1px 0 #fff;
            
        display: none\0/;
        *display: none;
    }
    
a.Dtooltip > span {
    color: #FFFFFF; 

    background: #222222;
    background: -moz-linear-gradient(top, #222222 0%, #444444 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#444444));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#444444',GradientType=0 );
        
    border: 1px solid #666666;       
}    
      
a.Dtooltip span b {
    background: #222222;
    border-top: 1px solid #666666;
    border-right: 1px solid #666666;
}    

This will generate a dark bubble with more style and text color. However in the plugin , where and how can I wrap the title
in a < span > tag ?

public function DiscussionsController_BeforeDiscussionContent_Handler($Sender) {
       

       $prelink = "plugins/DiscussionToolTip/design/images/";
        $CssItem = $Sender->EventArguments['CssClass'];
        $CssItem = str_replace("Bookmarked"," ",$CssItem);
        $this->DiscussionToolTipResources($Sender);
        $bodyLine = $Sender->EventArguments['Discussion']->Body;    
        $formline = strip_tags(str_replace(array('[',']'), array('<','>'), $bodyLine));   
       $sline = substr($formline, 0, 220) . "..." ;
       $oldName = $Sender->EventArguments['Discussion']->Name;
       $oldUrl = $Sender->EventArguments['Discussion']->Url;

      
        $newTitleAnchor  = '< a class="tooltip" href="' . $Sender->EventArguments['Discussion']->Url  . '">' .  Img($prelink . "dt.png", array('title' => $sline, 'class' => "Dtooltip")) . '< /a >';
       
    
     

hgtonight

This plugin does not insert the tooltip as an element in the DOM. It inserts the preview image with the discussion excerpt as the title attribute. This invokes the browser's builtin tool tip functionality.

AFAIK, this would be impossible to style with CSS.

vrijvlinder

yes the title attribute is what needs to be wrapped in a span tag . You can override the browser's tooltip with css3.

To get $sline ,to be able to be wrapped in a span tag somewhere .

$sline = substr($formline, 0, 220) . "..." ;

hgtonight

I am a little confused. Could you provide some sample html output?

This will insert a span containing the body excerpt inside of the anchor tag. Change line 30 to:

$newTitleAnchor = Anchor(
  Img($prelink . "dt.png", array('alt' => 'Tooltip', 'class' => "Dtooltip")).
  Wrap($sline, 'span'),
  $oldUrl
);

vrijvlinder

[title~=$sline]{ color:blue; } or

[title=$sline]{border:5px solid green;}

maybe this will work I will try it

vrijvlinder

Sure here is an example of the html

< a href="#" class="tooltip" >
the content of the link that will trigger the tooltip box
< span >start of the tooltip box
the content of the tooltip
< /span > — end of the tooltip
< /a >

Edit: Here is a link to the examples of css tooltips

http://sixrevisions.com/css/css-only-tooltips/

here is a css tooltip generator

http://csstooltip.com

hgtonight

<a href="link_to_discussion">
  <img src="preview_eye" />
  <span>Body Discussion Excerpt</span>
</a>

This would be good? I think I am confused because your css indicates a missing b and strong tag.

vrijvlinder

No your change basically just showed the excerpt on the discussion title instead of the title.

This plugin uses a little image link to hover over and trigger the excerpt.I tried to make it work but it did not. In fact it called the plugin icon instead of the dt.png.

$sline = substr($formline, 0, 220) . "..." . Wrap($sline, 'span');

This added the < span >< /span > like this at the end of the excerpt in the bubble, so that don't do it either. I have a feeling that is the area where these things need to be added, just have to find the right things to put in....