Bootstrap 工具提示.pdfVIP

Bootstrap ⼯具提⽰ Bootstrap⼯具提示是⼀个⼩的浮动消息当⿏标悬停在组件上时。 Bootstrap 的⼯具提⽰是使⽤CSS创建，通过JavaScript触发。 要使⽤⼯具提⽰，我们必须定义⼀些⾃定义的 data-* 属性。 data-placement属性接受⼀个的 下四个值之⼀：top ，bottom ，left和right 。 data-placement属性定义⼯具提⽰相对于其⽗组件的位置。 !DOCTYPE html html lang=en head script type=text javascript src=http: code.jquery .com jquery-1.10.1.min.js script link rel=stylesheet href=https: bootstrap 3.2.0 css bootst link rel=stylesheet href=https: bootstrap 3.2.0 css bootst script src=https: ajax . ajax libs jquery 1.11.1 jquery . script src=https: bootstrap 3.2.0 js bootstra script type=text javascript $(document).ready(function(){ $(.tooltipButton).tooltip(); }); script head body style=margin:30px button type=button class=btn btn-default tooltipButton data-toggle=tooltip data-placement=bottom title=I am a Bootstrap buttonWho am I? button body html 通过data属性定位⼯具提⽰ 我们可 设置⼯具提⽰显⽰在元素的顶部，右侧，底部和左侧。 下⽰例显⽰如何通过data属性设置⼯具提⽰的⽅向。 !DOCTYPE html html lang=en head link rel=stylesheet href=https: boots link rel=stylesheet href=https: boots script src=https: ajax . ajax libs jquery 1.11.1 j script src=https: bootstrap 3.3.1 js bo script type=text javascript $(document).ready(function(){ $([data-toggle=tooltip]).tooltip(); }); script style type=text css .bs-example{ margin: 60px; } style head body div class=bs-example ul class=list-inline lia href=# data-toggle=tooltip data-placement=top lia href=# data-toggle=tooltip data-placement=righ lia href=# data-toggle=tooltip data-placement=bott lia href=# data-toggle=tooltip data-placement=left ul div body html 通过JavaScript定位⼯具提⽰ 下⽰例显⽰如何通过JavaScript设置⼯具提⽰的⽅向。 !DOCTYPE html html lang=en head link rel=stylesheet href=https: boots link rel=stylesheet href=https: boots script src=https: ajax . ajax libs jquery