1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Tool tip custimization

Discussion in 'Styling and Customization Questions' started by Trover, Dec 13, 2011.

  1. Trover

    Trover Member

    So, what I am trying to do is customize a particular tool tip, or hover preview, on my site. Currently, the tool tip will go off of the right side of the page; so I am wanting to flip it horizontally.This way, the tool tip will be in a much better location.

    What should I do to achieve this effect?
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I wasn't able to figure this out. But there is a lot of tooltip CSS to work with:

    Admin CP -> Appearance -> Templates -> xenforo.css

    Code:
    /* ***************************** */
    
    .xenTooltip
    {
    	@property "tooltip";
    	font-size: 11px;
    	color: rgb(255, 255, 255);
    	background-color: @tooltipBackground;
    	padding: 5px 10px;
    	border-radius: 5px;
    	display: none;
    	z-index: 15000;
    	cursor: default;
    	@property "/tooltip";
    }
    
    .xenTooltip a,
    .xenTooltip a:hover
    {
    	color: @tooltip.color;
    	text-decoration: underline;
    }
    
    	.xenTooltip .arrow
    	{
    		@property "tooltipArrow";
    		border-top: 6px solid @tooltipBackground;
    		border-right: 6px solid transparent;
    		border-bottom: 1px none black;
    		border-left: 6px solid transparent;
    		position: absolute;
    		bottom: -6px;
    		line-height: 0px;
    		width: 0px;
    		height: 0px;
    		@property "/tooltipArrow";
    		left: {xen:calc '@tooltipArrow.border-top-width + 3'}px;
    		
    		/* Hide from IE6 */
    		_display: none;
    	}
    
    	.xenTooltip.flipped .arrow
    	{
    		left: auto;
    		right: {xen:calc '@tooltipArrow.border-top-width + 3'}px;
    	}
    
    .xenTooltip.statusTip
    {
    	/* Generated by XenForo.StatusTooltip JavaScript */
    	@property "statusTooltip";
    	padding: 5px 10px;
    	line-height: 17px;
    	width: 250px;
    	height: auto;
    	@property "/statusTooltip";
    }
    
    	.xenTooltip.statusTip .arrow
    	{
    		@property "statusTooltipArrow";
    		border: 6px solid transparent;
    		border-right-color: @tooltipBackground;
    		border-left: 1px none black;
    		top: 6px;
    		left: -6px;
    		bottom: auto;
    		right: auto;
    		@property "/statusTooltipArrow";
    	}
    			
    .xenTooltip.iconTip { margin-left: -6px; }
    .xenTooltip.iconTip.flipped { margin-left: 7px; }
    
    /* ***************************** */
    
    #PreviewTooltip
    {
    	display: none;
    }
    
    .xenPreviewTooltip
    {
    	@property "previewTooltip";
    	border: 10px solid @primaryDarker;
    	border-radius: 10px;
    	position: relative;
    	box-shadow: 0px 12px 25px rgba(0,0,0, 0.5);
    	width: 400px;
    	@property "/previewTooltip";
    	
    	display: none;	
    	z-index: 15000;
    	cursor: default;
    	
    	border-color: {xen:helper rgba, @previewTooltip.border-color, 0.5};
    }
    
    	.xenPreviewTooltip .arrow
    	{
    		@property "previewTooltipArrowOuter";
    		border-top: 15px solid rgba(3,42,70, 0.25);
    		border-right: 15px solid transparent;
    		border-bottom: 1px none black;
    		border-left: 15px solid transparent;
    		position: absolute;
    		bottom: -15px;
    		left: 22px;
    		@property "/previewTooltipArrowOuter";
    		
    		_display: none;
    	}
    	
    		.xenPreviewTooltip .arrow span
    		{
    			@property "previewTooltipArrowInner";
    			border-top: 15px solid @primaryContent.background-color;
    			border-right: 15px solid transparent;
    			border-bottom: 1px none black;
    			border-left: 15px solid transparent;
    			position: absolute;
    			top: -17px;
    			left: -15px;
    			@property "/previewTooltipArrowInner";
    		}
    
    	.xenPreviewTooltip .section,
    	.xenPreviewTooltip .sectionMain,
    	.xenPreviewTooltip .primaryContent,
    	.xenPreviewTooltip .secondaryContent
    	{
    		margin: 0;
    	}
    	
    		.xenPreviewTooltip .previewContent
    		{
    			overflow: hidden; zoom: 1;
    			min-height: 1em;
    		}
    
    /* ***************************** */
    
     
    rafass and Trover like this.
  3. Trover

    Trover Member

    Thanks Jake, I'm going to play around with it and see what I can do.
     
  4. yoghurtfarmer

    yoghurtfarmer Well-Known Member

  5. rafass

    rafass Well-Known Member

    There are some way to remove the effect of .xenTooltip.statusTip?
    /* Generated by XenForo.StatusTooltip JavaScript */
    9.gif
     

Share This Page