+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: MyCodes (https://community.mybb.com/forum-117.html)
+--- Thread: tooltips code (/thread-142332.html)
tooltips code - ikhwanulfikri - 2013-07-11
hello friends.
how to create code tootips with CSS3 in MyCode?
RE: tooltips code - effone - 2013-07-11
http://community.mybb.com/thread-56478.html
RE: tooltips code - ikhwanulfikri - 2013-07-11
hello effone.
why there is no $2. how to work these tooltips. nothing happen. only the image next to posts.
RE: tooltips code - .m. - 2013-07-11
^ if that MyCode is added then [tooltip]tooltip content - which should appear on mouse over[/tooltip] should work
RE: tooltips code - ikhwanulfikri - 2013-07-11
Thank you. m.
This is very helpful.
but I've got a better tooltip code.
I got it here: http://www.menucool.com/tooltip/css3-tooltip
Regular Expression *
\[tip=(.*?)\](.*?)\[/tip\] Replacement *
<a href="#" class="tooltip">$1<span><b></b>$2</span> </a>css
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;
}
code :
[tip=your word] your tips [/tip] output : [tip=$1] $2 [/tip]
RE: tooltips code - Dr_The_One - 2020-11-02
(2013-07-11, 01:31 PM)ikhwanulfikri Wrote: Thank you. m.
This is very helpful.
but I've got a better tooltip code.
I got it here: http://www.menucool.com/tooltip/css3-tooltip
Regular Expression *
\[tip=(.*?)\](.*?)\[/tip\]
Replacement *
<a href="#" class="tooltip">$1<span><b></b>$2</span> </a>
css
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; }
code :
[tip=your word] your tips [/tip] output : [tip=$1] $2 [/tip]
This is not working. Does anyone have an idea about the working code?
Thank you.