Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Styling Discussion Tooltip bubble

vrijvlindervrijvlinder Papillon-Sauvage MVP
edited April 2013 in Vanilla 2.0 - 2.8

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 >';
       
    
     

Comments

  • Options
    hgtonighthgtonight ∞ · New Moderator

    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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    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) . "..." ;

  • Options
    hgtonighthgtonight ∞ · New Moderator
    edited April 2013

    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
    );
    

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

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

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

    maybe this will work I will try it

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited April 2013

    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

  • Options
    hgtonighthgtonight ∞ · New Moderator
    edited April 2013
    <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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited April 2013

    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.... :(

Sign In or Register to comment.