1. 基础外观

    <div class="c_toolTip">
    	<div class="pointer"></div>
    	<div class="content">
    		内容
    	</div>
    </div>
    
  2. 应用外观

    1. 弹出列表

      <div class="c_toolTip">
      	<div class="pointer"></div>
      	<div class="content">
      		<div class="select">
      			<ul>
      				<li><a href="#nogo">我的集团</a></li>
      			</ul>
      		</div>
      	</div>
      </div>
      
    2. 弹出菜单

      <div class="c_toolTip">
      	<div class="pointer"></div>
      	<div class="content">
      		<div class="menus">
      			<button class="e_button-3">电话呼叫</button>
      		</div>
      	</div>
      </div>
      
  3. 扩展外观

    【注】 demo 中的效果使用了临时样式,该组件在页面中的具体位置由 JS 控制。

    1. 添加标题

      <div class="c_toolTip">
      	<div class="title"><div class="txt">业务导航</div></div>
      	<div class="pointer"></div>
      	<div class="content">
      		<div class="select">
      			<ul>
      				<li><a href="#nogo">我的集团</a></li>
      			</ul>
      		</div>
      	</div>
      </div>
      
    2. 改变箭头方向

      <div class="c_toolTip">
      	<div class="pointer pointer-right"></div>
      	<div class="content">
      		<div class="select">
      			<ul>
      				<li><a href="#nogo">我的集团</a></li>
      			</ul>
      		</div>
      	</div>
      </div>
      

      支持上、右、下、左四个方向,对应的样式分别为:pointer-toppointer-rightpointer-bottompointer-left,默认为向上。

    3. 改变箭头位置

      <div class="c_toolTip">
      	<div class="pointer" style="left:9em;"></div>
      	<div class="content">
      		<div class="select">
      			<ul>
      				<li><a href="#nogo">我的集团</a></li>
      			</ul>
      		</div>
      	</div>
      </div>
      

      支持高、宽限制内的任意位置调整,单位可使用“%”或“em”,为保证不同机型下的效果一致,请尽量不要使用“px”作为调整单位。

    4. 改变组件宽度

      <div class="c_toolTip" style="width:10em;">
      	<div class="pointer"></div>
      	<div class="content">
      		<div class="select">
      			<ul>
      				<li><a href="#nogo">我的集团</a></li>
      			</ul>
      		</div>
      	</div>
      </div>