MyBB Community Forums

MyBB Community Forums > Resources > MyCodes > tooltips code
Full Version: tooltips code
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

ikhwanulfikri

2013-07-11, 02:37 AM
hello friends.

how to create code tootips with CSS3 in MyCode?

effone

2013-07-11, 05:30 AM
http://community.mybb.com/thread-56478.html

ikhwanulfikri

2013-07-11, 10:59 AM
hello effone.
why there is no $2. how to work these tooltips. nothing happen. only the image next to posts.

.m.

2013-07-11, 12:57 PM
^ if that MyCode is added then [tooltip]tooltip content - which should appear on mouse over[/tooltip] should work
[Image: uej.gif]

ikhwanulfikri

2013-07-11, 01:31 PM
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
[attachment=29706]

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]

Dr_The_One

2020-11-02, 06:29 AM
(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.
MyBB Community Forums > Resources > MyCodes > tooltips code