Tooltips MyCode

**Hasan** · 04-20-2024, 05:58 PM

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

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ış kullanılmıştır.