Tooltip pure css tooltip with attribute and tag function and 12 positions

Case of use

base #

Example Code

					
						
  base of tooltip

position, focusable #

Example Code

	left	center	right
top	top-left (default) left-top	center-top	right (top) right-top
middle	left-middle		right-middle
bottom	left-bottom bottom	bottom-center	right-bottom bottom-right

					
						
    
      
        
        left
        center
        right
      
    
    
      
        top
        
          
            
              
                top-left (default)
              
              
                left-top
              
            
          
        
        
          
            
              center-top
            
          
        
        
          
            
              
                right (top)
              
              
                right-top
              
            
          
        
      
      
        middle
        
          
            
              left-middle
            
          
        
        
            
        
        
          
            
              right-middle
            
          
        
      
      
        bottom
        
          
            
              
                left-bottom
              
              
                bottom
              
            
          
        
        
          
            
              bottom-center
            
          
        
        
          
            
              
                right-bottom
              
              
                bottom-right

inside html, focusable #

Example Code

					
						
  
    right-middle
    Lorem ipsum 
dolor sit amet

inside html, focusable #

Example Code

	left	center	right
top	top-left (default) Tooltip will start at top / right of element left-top Tooltip will start at the bot tom of element. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum mollitia iure, perferendis adipisci quisquam, velit similique sint ut saepe assumenda voluptatibus eos? Cumque inventore nesciunt rem! Dolorem iusto illum magnam.	center-top Tooltip at the center top	right (top) Tooltip will start at top / left of element right-top Tooltip will start at the bot tom of element. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum mollitia iure, perferendis adipisci quisquam, velit similique sint ut saepe assumenda voluptatibus eos? Cumque inventore nesciunt rem! Dolorem iusto illum magnam.
middle	left-middle Tooltip left middle Lorem ipsum dolor sit amet		right-middle Lorem ipsum dolor sit amet
bottom	left-bottom Tooltip will start at the top of element. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum mollitia iure, perferendis adipisci quisquam, velit similique sint ut saepe assumenda voluptatibus eos? Cumque inventore nesciunt rem! Dolorem iusto illum magnam. bottom Tooltip will start at bottom / right of element	bottom-center Tooltip bottom center Lorem ipsum dolor sit amet	right-bottom Tooltip will start at the bottom-right Tooltip will start at bottom / left of element

					
						
    
      
        
        left
        center
        right
      
    
    
      
        top
        
          
            
              
                top-left (default)
                Tooltip will start at top / right of element
              
              
                left-top
                Tooltip will start at the bot tom of element. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum mollitia iure, perferendis adipisci quisquam, velit similique sint ut saepe assumenda voluptatibus eos? Cumque inventore nesciunt rem! Dolorem iusto illum magnam.
              
            
          
        
        
          
            
              center-top
              Tooltip at the center top
            
          
        
        
          
            
              
                right (top)
                Tooltip will start at top  / left of element
              
              
                right-top
                Tooltip will start at the bot tom of element.
 Lorem ipsum dolor sit amet consectetur
 adipisicing elit. Laborum mollitia iure,
 perferendis adipisci quisquam, velit similique
 sint ut saepe assumenda voluptatibus eos?
 Cumque inventore nesciunt rem!
 Dolorem iusto illum magnam.
              
            
          
        
      
      
        middle
        
          
            
              left-middle
              Tooltip left middle
Lorem ipsum dolor sit amet
            
          
        
        
            
        
        
          
            
              right-middle
              Lorem ipsum 
dolor sit amet
            
          
        
      
      
        bottom
        
          
            
              
                left-bottom
                Tooltip will start at the  top of element.
Lorem ipsum dolor sit amet consectetur adipisicing
 elit. Laborum mollitia iure, perferendis adipisci quisquam,
 velit similique sint ut saepe assumenda 
voluptatibus eos? Cumque inventore nesciunt rem! Dolorem
 iusto illum magnam.
              
              
                bottom
                Tooltip will start at bottom / right of element
              
            
          
        
        
          
            
              bottom-center
              Tooltip bottom center
 Lorem ipsum dolor sit amet
            
          
        
        
          
            
              
                right-bottom
                Tooltip will start at the 
              
              
                bottom-right
                Tooltip will start at bottom  / left of element

inside html, hoverable #

Example Code

	left	center	right
top	top-left (default) left-top	center-top	right (top) right-top
middle	left-middle		right-middle
bottom	left-bottom bottom	bottom-center	right-bottom bottom-right

					
						
  
    
      
      left
      center
      right
    
  
  
    
      top
      
        
          
            
              top-left (default)
            
            
              left-top
            
          
        
      
      
        
          
            center-top
          
        
      
      
        
          
            
              right (top)
            
            
              right-top
            
          
        
      
    
    
      middle
      
        
          
            left-middle
          
        
      
      
          
      
      
        
          
            right-middle
          
        
      
    
    
      bottom
      
        
          
            
              left-bottom
            
            
              bottom
            
          
        
      
      
        
          
            bottom-center
          
        
      
      
        
          
            
              right-bottom
            
            
              bottom-right

Setup #

classes less/formir/setup/classes.less #

			
				@tooltip: tooltip;
@has-tooltip: has-tooltip;
@tooltip-bottom: bottom;
@tooltip-bottom-right: bottom-right;
@tooltip-bottom-center: bottom-center;
@tooltip-top: top;
@tooltip-top-right: right;
@tooltip-center: center;
@tooltip-right: right;
@tooltip-right-middle: right-middle;
@tooltip-left-middle: left-middle;
@tooltip-right-top: right-top;
@tooltip-right-bottom: right-bottom;
@tooltip-left-top: left-top;
@tooltip-left-bottom: left-bottom;
@tooltip-hoverable: hoverable; // tooltip not hide when try hover on it (arrow will be not work with data-tooltip)
@tooltip-hovered: hovered; // simulate :hover state to active tooltip manualy
@tooltip-absolute: absolute;
@tooltip-fixed: fixed;

variables less/formir/setup/variables.less #

			
				@tooltip-background: darken(@color-primary, 20%);
@tooltip-border-width: 0;
@tooltip-border-color: rgba(60, 60, 60, 1);
@tooltip-border: @tooltip-border-width solid @tooltip-border-color;
@tooltip-shadow: 0;
@tooltip-text-color: #fff;
@tooltip-font-size: 0.8rem;
@tooltip-line-height: 1.35em;
@tooltip-padding-vertical: 0.45rem;
@tooltip-padding-horizontal: 0.65rem;
@tooltip-max-width: 30rem;
@tooltip-width: max-content;  // Try not change this configuration
@tooltip-border-radius: 5px;
@tooltip-arrow-height: 5px;
@tooltip-arrow-width: @tooltip-arrow-height;
@tooltip-arrow-offset: 10px;
@tooltip-offset: @tooltip-arrow-offset;
@tooltip-distance: 5px;