BBCode Tooltips MyCode

Verilen bir kelime veya konuyu açıklamasını gösterecek bir tooltips ekler

Mykod Başlığı: Tooltips

Açıklama: Tooltips ekler.

Düzenli ifade:

Kod:

\[tip=(.*?)\](.*?)\[/tip\]

Yerine Gösterilicek İfade:

Kod:

<a href="#" class="tooltip">$1<span><b></b>$2</span></a>

Kullanılan temanın global.css sayfasının en sonuna eklenecek:

Kod:

a.tooltip {outline:none;text-decoration:none;border-bottom:dotted 2px blue;}
    a.tooltip strong {line-height:30px;}
    a.tooltip > span
    {
        max-width:350px;
        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.tooltip > span:hover,*/
    a.tooltip:hover > span
    {
        opacity: 1;
        text-decoration:none;
        visibility: visible;
        overflow: visible;
        margin-top: 35px;
        display: inline;
        margin-left: -100px;        
    }

    a.tooltip 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.tooltip > span {
    color: #000000;

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

Kullanım:

Kod:

[tip=açıklanacak metin] açıklama [/tip]

Demo:
Burada yazılan yazını tooltips ile yazılmış burada tooltipsGörüldüğü üzere yazının üzerinde mouse geldiğinde buradaki yazıyı okuyorsunuz kullanılmıştır.

Cevapla