У овом водичу ја ћу вам показати како да креирате ЦСС Тоолтип без користећи ЈаваСцрипт то врло једноставна и ефикасна техника. Надам се да ћете уживати овај пост.

Овде је снимак екрана

Корак: 1 Основни ЦСС

  ; padding : 0 ; } * (Паддинг: 0; паддинг: 0;) 
  % normal  Arial, Helvetica, sans-serif ; } боды (фонт: 100% нормалан Ариал, Хелветица, санс-сериф;) 
  : # 666 ; font-size : 12px ; line-height : 150 %; margin : 0 0 10px 0 ; } П (цолор: # 666; фонт-сизе: 12пкс; лине-хеигхт: 150%; паддинг: 0 0 10пкс 0;) 
   margin : 0 auto ; width : 550px ; } # страници (маргин: 0 ауто; УИДТХ: 550пкс;) 

Овде је магични број

 : #F00 ; font-size : 12px ; } a :hover { background : #fff ; /*background color for IE*/ text-decoration :none ; } a .tooltip span { display :none ;         padding : 5px 5px ;         margin-left : 3px ;         margin-top : 10px ;       width : 170px ;         font-size : 12px ;         line-height : 150 %; } a .tooltip :hover span { display :inline ;         position :absolute ; background : #F20F27 ;         border : 1px solid #C30018 ; color : #fff ; } (боја: # Ф00; фонт-сизе: 12пкс;) а: ховер (бацкгроунд: # ФФФ; / * Боја позадине за ИЕ * / фонт-децоратион: ноне;) Тоолтип педаљ. (дисплаы: ноне; паддинг: 5пкс 5пкс; паддинг-лефт: 3пкс; маргин-топ: 10пкс, ширина 170пкс; фонт-сизе: 12пкс; лине-хеигхт: 150%;) Тоолтип: Лети див. (дисплаы: инлине; поситион: абсолуте; позадини: # Ф20Ф27; бордер: 1пкс солид # Ц30018; боја: # ФФФ;) 

Корак: 2 Основни ХТМЛ Структура

 > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <див ИД "паге" => <п> Лорем ипсум долор сит амет цонсецтетур адиписцинг елите.  ДУИ НЕЦ ут виверра рисус.  ЕУ рхонцус тортор некуе лациниа.  У интердум Лорем ипсум долор сит амет цонсецтетур адиписцинг елите.  Ут виверра рисус ДУИ НЕЦ <. / ФОНТ> </> Лорем ипсум долор сит амет цонсецтетур адиписцинг елите.  Потенти.Лорем Суспендиссе ипсум долор сит амет </ фонт> <п> Лорем ипсум долор сит амет цонсецтетур адиписцинг елите.  ДУИ НЕЦ ут виверра рисус.  ЕУ рхонцус тортор некуе лациниа.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. У Хреф интердум <а = "#" класе "тоолтип" => плацерат <спан> Лорем ипсум долор сит амет цонсецтетур адиписцинг елите.  Ут виверра рисус ДУИ НЕЦ <. / ФОНТ> </> Лорем ипсум долор сит амет цонсецтетур адиписцинг елите.  Потенти.Лорем Суспендиссе ипсум долор сит амет </ фонт> <п> Лорем ипсум долор сит амет цонсецтетур адиписцинг елите.  ДУИ НЕЦ ут виверра рисус.  ЕУ рхонцус тортор некуе лациниа.  У интердум Лорем ипсум долор сит амет цонсецтетур адиписцинг елите.  Ут виверра рисус ДУИ НЕЦ <. / ФОНТ> </> Лорем ипсум долор сит амет цонсецтетур адиписцинг елите.  Потенти.Лорем Суспендиссе ипсум долор сит амет </ фонт> </ спан> 

На крају смо направили три колоне ЦСС распоред.
Доунлоад | Погледајте демо

Молимо Вас да делите ваше коментаре са нама, ми смо волели да чујемо од тебе ...

Подастрт испод: ЦСС, Туториали админ