bootstrap tooltips在 angularJS中的使用方法
使用bootstrap自帶的提示控件,省去了不少事情
<div class="s2" ng-init="InitTooltip()"> <input type="text" ng-pattern="/^(http|https|ftp)\://[a-zA-Z0-9\.\,\?\'\\/\+&%\$\#\=~:_\-\s@]+$/" class="inputwords" id="txtExamination" name="txtExamination" ng-model="csInfo.ExamUrl" placeholder="測驗(yàn)地址"> <span data-toggle="tooltip" data-placement="top" data-html="true" title="1、點(diǎn)擊《新建測驗(yàn)》按鈕 <br/> 2、測驗(yàn)創(chuàng)建完成后,點(diǎn)擊頁面右上角《共享》按鈕>點(diǎn)擊《復(fù)制》按鈕 <br/> 3、把復(fù)制的url粘貼到此處即可" style="cursor: pointer;"> <i class="fa fa-question-circle-o examSpan"></i> </span> <span style="margin-left: 88px; width: 8px;"> <a target="_blank" >創(chuàng)建測驗(yàn)</a></span> </div>
控制器或者js代碼:
$scope.InitTooltip = function() { //初始化tips提示控件 $("[data-toggle='tooltip']").tooltip(); };
控制顏色,類名是生成彈出層后的類名:
/**控制彈出層顏色和大小*/ .tooltip-inner { background: #fafafa !important; text-align: left !important; color: #363636 !important; border: 1px solid #dedede; max-width: 400px !important; padding: 4px; } /**控制小三角透明度*/ .tooltip-arrow{ border-bottom-color: #ffffff !important; opacity: 0.3; }
默認(rèn)背景顏色
設(shè)置顏色后
總結(jié)
以上所述是小編給大家介紹的bootstrap tooltips在 angularJS中的使用方法,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
- Some tips of wmi scripting in jscript (1)
- ASP小貼士/ASP Tips javascript tips可以當(dāng)桌面
- JavaScript Tips 使用DocumentFragment加快DOM渲染速度
- javascript tips提示框組件實(shí)現(xiàn)代碼
- JavaScript Title、alt提示(Tips)實(shí)現(xiàn)源碼解讀
- 新鮮出爐的js tips提示效果
- jQuery懸停文字提示框插件jquery.tooltipster.js用法示例【附demo源碼下載】
- JavaScript調(diào)試的多個必備小Tips
- 總結(jié)分享10個JavaScript代碼優(yōu)化小tips
相關(guān)文章
top.location.href 沒有權(quán)限 解決方法
以前好像沒有遇到這問題,也可能是沒有在意吧,我的blog內(nèi)容頁都是有判斷的,規(guī)則是,如果top.location不是內(nèi)容頁的話就跳到內(nèi)容頁2008-08-08通過action傳過來的值在option獲取進(jìn)行驗(yàn)證的方法
通過action傳過來的值在option獲取進(jìn)行驗(yàn)證,下面有個不錯的示例,需要的朋友不要錯過2013-11-11Jupyter Notebook運(yùn)行JavaScript的方法
Jupyter Notebook是一塊所見即所得的畫布,通過在瀏覽器上編輯代碼,讓開發(fā)人員實(shí)現(xiàn)展示與快速迭代的利器,本文主要介紹了Jupyter Notebook運(yùn)行JavaScript的方法,感興趣的可以了解一下2021-05-05詳解js中Number()、parseInt()和parseFloat()的區(qū)別
本文主要對js中Number()、parseInt()和parseFloat()的區(qū)別進(jìn)行詳細(xì)介紹,具有很好的參考價值,需要的朋友一起來看下吧2016-12-12BootStrap與validator 使用筆記(JAVA SpringMVC實(shí)現(xiàn))
這篇文章主要介紹了BootStrap與validator 使用筆記(JAVA SpringMVC實(shí)現(xiàn))的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09input file上傳 圖片預(yù)覽功能實(shí)例代碼
input file上傳圖片預(yù)覽其實(shí)很簡單。今天小編就通過本文給大家介紹input file上傳 圖片預(yù)覽功能的實(shí)現(xiàn)代碼,比較簡單,對input file 上傳預(yù)覽功能感興趣的朋友參考下吧2016-10-10